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.
Rise N Shine
Rise N Shine is a warm, hand-poured ode to neighborhood coffee culture — all soft cream canvases, blazing tangerine ink, and chunky rounded display type that feels like it was painted on a chalkboard at sunrise. The whole system runs on a two-color promise: a buttery off-white sits behind everything, while a single saturated orange does the heavy lifting for text, buttons, borders, dividers, and oversized headlines. The energy is friendly and confident — pillowy Lilita One headlines hit hard against airy Satoshi body copy, generous 120px section gaps let images breathe, and pill-shaped CTAs and 24px rounded photo crops give every block a soft, hospitable silhouette. It is a template that smells like espresso and feels like a flannel shirt: handcrafted, local, and unapologetically cheerful.
Sections from Rise N Shine
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Coffee Shop Hero Section
View section
Multi-Column Footer with Social
View section
Stats with Moving Banner
View section
Mission Statement with Feature Cards
View section
Animated Image Gallery Marquee
View section
Illustrated History Gallery Grid
View section
Values Grid with Sticky Header
View section
Hero with Horizontal Gallery
View section
FAQ Section with Accordion
View section
Coffee Shop Hero Split Layout
View section
Store Locations Two Column
View section
Feature Section with Benefits
View section
Colors
Canvas
Morning Cream
#fef3e1
Primary canvas. Page background, button text on orange, footer reverse text, and divider strokes inside dark sections.
Porcelain White
#ffffff
Pure white. Used sparingly for ecommerce checkout block headers that need to read against the cream canvas.
Ink
Midnight Roast
#000000
Form input underline. Reserved exclusively for the unfocused border of contact text fields.
Shadow Overlay
#00000080
Photographic overlay. A 50% black scrim laid over hero photography to lift cream-colored text.
Espresso Tangerine
#f94200
Brand ink and signature accent. Drives all body text, headlines, button fills, borders, and gallery section backgrounds.
Accent
Sunrise Glow
#fd511e
Hover state for primary CTAs. A half-shade brighter than the brand orange to signal interactivity.
Tangerine Veil
#f9420021
Tinted utility wash. Used for the cart pill in the navbar — a 13% transparent layer of the brand color over cream.
State — utility only
Ember Error
#ff3128
Validation focus. Highlights checkout text fields when focused or in an error state.
Typography
The quick brown fox jumps
Display & headline face. Chunky, rounded, single-weight slab-meets-poster type used for every H1–H3, oversized numbers, menu pills, and testimonial quotes.
The quick brown fox jumps
Body & UI face. Clean geometric grotesque used for body copy, navigation links, captions, form fields, and footer text.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
120pxCard padding
64pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-64
64px--spacing-80
80px--spacing-100
100px--spacing-120
120pxBorder radius
cards24pxsmall12pxcircle9999pxbuttons60pxmenu-pill172pxnavigation70pxSurfaces
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 1Morning Cream
Level 2Espresso Tangerine
Level 3Tangerine Veil
Do's and don'ts
- Use Espresso Tangerine (#f94200) as both the primary text color and the primary fill — the entire system is built on this monochromatic ink-on-cream contrast.
- Set every primary CTA as a 60px pill with cream text on orange, 52px tall, and 32px horizontal padding for that signature lozenge silhouette.
- Reserve Lilita One for display-scale moments only (40px and up) and let Satoshi handle anything 32px or smaller — never mix the roles.
- Frame photography in 24px rounded corners and let images run full-bleed inside their grid cell so the soft crop becomes part of the brand language.
- Use 120px top/bottom section padding on desktop to give the warm canvas room to breathe between blocks.
- When inverting onto an orange surface (footer, galleries, hero overlays), flip cleanly to Morning Cream type and dividers — no muddy mid-tones.
- Build oversized rounded menu pills (172px radius, 252px tall, Lilita 52px) for navigation between coffee/sweets/snacks-style categories — they are the brand's second logo.
- Don't introduce a third hue. The system is strictly cream + orange; any blue, green, or neutral gray will instantly break the handcrafted café mood.
- Don't use drop shadows or elevation effects — depth is communicated through color inversion and pill geometry, never blur.
- Don't set body copy below 18px on desktop; the template is built for generous, readable type starting at 22px.
- Don't apply Lilita One to body paragraphs, form labels, or navigation links — it's a poster face and will overwhelm UI text.
- Don't use sharp or small radii on photos and cards — 24px is the floor; pills go all the way to 60–172px.
- Don't pair the orange with pure black for text. Black is reserved for unfocused form input borders only.
- Don't crowd sections — the rhythm depends on 80–120px breathing room between hero, gallery, menu, and testimonial blocks.
Example prompts
Hero section
Primary CTA
Inverted gallery section
Menu category pills
# 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