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.
Joré©
Joré© is a cinematic agency template built almost entirely in black, where every scroll feels like a scene change rather than a page transition. An oversized headline system — topping out near 248px — anchors each view, flanked by autoplay video thumbnails, parallax portraits, and a ©-stamped heading convention that gives every section the air of proprietary studio IP. The palette stays disciplined: true black voids, stark white type, a single blood-red signature accent, and glassy near-transparent overlays that blur beneath floating UI chrome. Typographically the system pairs a clean variable grotesk for structure with an uppercase monospace for eyebrow labels and a condensed italic serif for quoted, editorial, or tooltip moments — three distinct voices used sparingly and deliberately. Spacing is spacious and architectural, with 250px section rhythms and generous dividers, while buttons and circular controls use a consistent pill/circle radius language. The result reads like a creative house that owns its process: confident, monochrome, and unapologetically large.
Colors
Canvas
Ash Gray
#2a2a2d
Card & form surface. Backing for pricing links, field inputs, and glass-blur service cards.
Void Black
#000000
Primary canvas & darkest surface. Base body background for every section, creating the cinematic void the photography explodes against.
Charcoal Veil
#222222
Secondary section surface. Lifts alternating sections like the team/awards blocks off the pure-black base.
Smoke Whisper
#f5f5f5
Footer & inverted surface. Used where the palette flips to light for the footer block and inverted logos/icons.
Ink
Ink White
#ffffff
Primary text & ink. Headlines, nav labels, button fills, and the dominant ink against the black void.
Accent
Fog Glass
#f8f8f31a
Glass overlay tint. The translucent backdrop-blur fill behind floating nav and modal chrome.
Steel Line
#414141
Borders & dividers. Thin hairlines around cards, inputs, and dashed award-list separators.
Crimson Signature
#c2001a
Brand signature accent. Reserved for the single saturated highlight across link states and badge accents.
Typography
The quick brown fox jumps
Uppercase eyebrow labels and oversized section numerals
The quick brown fox jumps
Primary grotesk for headlines, body copy, nav, and buttons
The quick brown fox jumps
Italic condensed serif for tooltip cursors, quoted service numerals, and editorial asides
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1400pxSection gap
250pxCard padding
20pxElement gap
16pxSpacing scale
Purpose
Value
Preview
--spacing-10
10px--spacing-20
20px--spacing-30
30px--spacing-50
50px--spacing-60
60px--spacing-120
120px--spacing-250
250pxBorder radius
cards8pxfields4pxbuttons35pxcontainer10pxbuttons-circle160pxSurfaces
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 1Void Black
Level 2Charcoal Veil
Level 3Ash Gray
Level 4Smoke Whisper
Do's and don'ts
- Keep the base canvas true black and let white type and photography carry all contrast.
- Reserve Crimson Signature for a single accent use per view — a badge, a link underline, never a full block.
- Scale headlines aggressively; let display type exceed 100px so every section reads as a statement, not a label.
- Stamp section headings with a © mark to preserve the proprietary, studio-system feel.
- Apply the 35px button radius and 160px circular radius consistently across CTAs, play/pause controls, and badges.
- Pair video thumbnails with static imagery in the work grid to keep the gallery-meets-film-reel rhythm.
- Hide the native cursor and route every hover through the custom dot/tooltip system ("View Project", "Read More").
- Use the mono eyebrow face only for numerals and short uppercase labels, never for body copy.
- Don't introduce a second saturated accent color alongside Crimson Signature — the palette must stay monochrome plus one red.
- Don't compress the 250px section padding rhythm; the spaciousness is what makes each scroll feel cinematic.
- Don't set body copy in the mono or condensed serif faces — they are accent voices only.
- Don't round corners beyond the defined radius set; sharp rectangular imagery should stay edge-to-edge.
- Don't lighten the base canvas to gray or off-white outside the dedicated footer/inverted surface.
- Don't shrink the hero display type below heading-lg scale; the oversized headline is the template's signature move.
- Don't stack more than one testimonial per viewport — quotes are meant to read as standalone headlines.
- Don't add drop shadows beyond the single soft hover glow; depth comes from blur and overlay, not shadow.
Example prompts
New hero section
Services block
Testimonial
Footer
# 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