Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Noah Turner
Noah Turner® stages the portfolio of a motion designer the way a director stages a reel: full-bleed black sequences crash into stark white content breaks, oversized condensed type struts across the viewport, and color-blocked project cards do the job photography alone can't. The palette stays deliberately restrained — ink black and paper white anchor everything, while a single violet glow and a soft dusty-blush accent carry all the warmth, letting pastel lavender and rosewood project tiles read like a curated mood board rather than a conventional grid. Every surface commits to extremes: type is either whisper-small uppercase labels or viewport-filling headlines set in a hyper-condensed display face, buttons are either fully pilled or softly rounded at 30px, and sections alternate between spacious 150px breathing room and tightly cropped sticky hero sequences. The system rewards confidence — big gestures, flat color blocking, and a navbar that literally inverts itself over whatever it crosses.
Colors
Canvas
Fog Gray
#e7e7e7
Lifted hover surface. Presentation-grid thumbnails brighten to this tone on hover.
Paper White
#ffffff
Base canvas. Content sections, cards, and reversed type sit on this surface.
Ink
Plum Ink
#4a2e2a
Icon & accent ink on light cards. Anchors line icons over blush surfaces.
Deep Noir Black
#000000
Primary ink & dark surfaces. Hero, footer, and sticky-nav backgrounds plus all headline text.
Accent
Dusty Blush
#ffcdd9
Secondary accent & link ink. Rotator text, button fills, and hover reveals.
Rosewood Pink
#f0c4c6
Color-blocked project card. Fills bento-style portfolio tiles in place of photography.
Electric Violet
#883eff
Signature hero accent. Gradient glows, cursor trails, and rare hover highlights.
Powder Lavender
#d8e0fb
Soft service-card surface. Backs icon tiles and feature blocks on light sections.
Warm Taupe Blush
#e8c9c2
Alternate project-card tone. Pairs with plum iconography on work grids.
Typography
The quick brown fox jumps
UI & body voice — variable width/weight sans for buttons, nav, forms, captions
The quick brown fox jumps
Display & headline voice — condensed, uppercase, maximalist scale
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1920pxSection gap
150pxCard padding
50pxElement gap
16pxSpacing scale
Purpose
Value
Preview
--spacing-5
5px--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-25
25px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-60
60px--spacing-80
80px--spacing-100
100px--spacing-150
150pxBorder radius
pill999pxbadge7pxcards30pxinputs6pxbuttons30pxnavlink10pxSurfaces
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 1Paper White
Level 2Fog Gray
Level 3Powder Lavender
Level 4Deep Noir Black
Do's and don'ts
- Set all headlines in Big Shoulders Display, uppercase, with tight line-height (0.8–1.1) for maximum visual weight.
- Use Monasans Wdth Wght for every piece of UI chrome: buttons, nav links, labels, and form inputs.
- Apply full 999px pill radius to primary buttons and badges; use 30px rounded corners on cards and photo masks.
- Alternate black full-bleed sections (hero, footer, portfolio) with white content sections to build rhythm.
- Color-block project cards using dusty blush, lavender, and taupe rather than relying on photography alone.
- Keep vertical section padding generous (120–150px) so oversized type has room to breathe.
- Apply mix-blend-mode: difference to the sticky navbar so it self-inverts over any background it crosses.
- Don't introduce extra saturated hues beyond violet and blush — keep the palette to black, white, blush, and lavender.
- Don't set body copy below 14px or above 20px; reserve the huge scale strictly for headlines.
- Don't use sharp 0px corners anywhere — every card, button, and image mask carries at least 6px radius.
- Don't mix in a serif or rounded display face — Big Shoulders Display must remain the sole headline voice.
- Don't crowd hero sections; let oversized type and a single focal image spread across the full viewport.
- Don't add drop shadows for depth — rely on flat color blocking and section layering instead.
- Don't skip uppercase transforms on navigation links, categories, and small labels.
Example prompts
Hero section
Project card grid
Navigation
Footer CTA
# 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