Design systems, extracted.
Search curated design systems pulled from premium templates or create one from URL. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Jake Carter
Jake Carter is a freelance creative's portfolio steeped in a soft sage stillness — a pale eucalyptus canvas paired with deep slate-teal ink, where typography does the heavy lifting and imagery breathes between generous gutters. The mood is contemplative and confident: a designer's notebook left open in a bright minimalist studio. Every surface tilts toward calm. Pill-shaped buttons and gently rounded tiles avoid hard geometry, while oversized sans-serif headlines slide into view with restrained motion. The single grey accent — used for fading-out lines, secondary captions, and subdued italicized prose — keeps the page anchored without disturbing its quiet.
Sections from Jake Carter
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Values Tag Cloud Section
View section
Client Testimonials Slider
View section
FAQ Accordion Section
View section
Contact Section with Profile
View section
Photography Portfolio Gallery
View section
Interactive Services List Navigation
View section
Multi-Column Footer with Contact
View section
Service Detail Split Layout
View section
Portfolio Projects Grid Section
View section
Responsive Navigation Bar
View section
Instagram Portfolio Gallery Showcase
View section
Personal Hero with Gallery
View section
Colors
Canvas
Sage Mist
#e4efe4
Primary canvas. Page background and footer text — the defining pale-eucalyptus surface that sets the calm tone.
Elevated Sage
#dce7dd
Lifted surface. Testimonial cards, cart container, checkout fields, and small chrome elements that need to sit just above the canvas.
Canvas Translucent
#e4efe499
Footer fineprint. 60% opacity Sage Mist used over Midnight Pine for legal text and divider lines.
Ink
Midnight Pine
#18282e
Primary ink. Headlines, body copy, dark CTA fills, footer background, and form borders.
Softened Pine
#2a3f47
Hover ink. Lifted state for the dark pill CTA — a single shade lighter than Midnight Pine.
Ink Translucent
#18282ecc
Soft ink. 80% opacity Midnight Pine for subtitles and secondary headings that need to recede.
Accent
Drift Grey
#7e8b89
Faded accent. Italicized phrases, fade-out heading lines, and quiet supporting metadata.
Hover Sage
#cfddd0
Interactive hover. Slightly cooler tint used on slider arrow hover states above the elevated surface.
Typography
The quick brown fox jumps
Single workhorse family for the entire site — display, headings, body, navigation, and UI labels.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1600pxSection gap
100pxCard padding
52pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-24
24px--spacing-32
32px--spacing-48
48px--spacing-52
52px--spacing-64
64px--spacing-76
76px--spacing-80
80px--spacing-100
100px--spacing-120
120pxBorder radius
tags80pxcards12pxavatar120pxbuttons70pxhairline4pxpill-field60pxpill-input50pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Sage Mist
Level 2Elevated Sage
Level 3Midnight Pine
Do's and don'ts
- Anchor every page on the Sage Mist canvas (#e4efe4) — it is the brand, not an option.
- Use Elevated Sage (#dce7dd) for any container that must lift off the canvas: testimonial tiles, cart, form fields, slider arrows.
- Apply 70px border-radius to dark CTAs and 50–60px to text inputs — the pill silhouette is non-negotiable.
- Keep Satoshi as the only typeface; lean on weight (400/500/700) and size, not font swaps, for hierarchy.
- Pair oversized 72–104px headlines with generous 100px section padding to preserve the airy rhythm.
- Reserve Drift Grey (#7e8b89) for italicized emphasis, fade-out heading lines, and supporting metadata only.
- Use the testimonial card as a model: 12px radius, 52px padding, 80px internal column gap.
- Animate headings with the translateY(150%) → 0 reveal — it is the template's signature gesture.
- Don't introduce additional saturated hues — the palette is sage, ink, and one soft grey; nothing else.
- Don't use pure black or white; everything resolves to Midnight Pine and Sage Mist.
- Don't square off buttons or inputs — sharp 4–12px corners belong only to image tiles and small cards.
- Don't pair Drift Grey with body text at small sizes; it is a tonal accent, not a readable body color.
- Don't compress section padding below 50–100px; the design relies on breathable vertical rhythm.
- Don't add drop shadows to surfaces other than the cart drawer — depth comes from tone, not blur.
- Don't mix in serif or display faces; Satoshi handles every register from caption to 104px Instagram handle.
- Don't apply uppercase to headings — only the tiny 14px blog-type label uses uppercase tracking.
Example prompts
New section on this template
Hero variant
CTA component
Testimonial card
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide