This entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm - do not reproduce brand identity, logo, product copy, or proprietary features.
A typed, paste-ready design system brief - philosophy, tokens, rules, techniques, and fitness checks. Drop it into Claude, Cursor, v0 or any coding agent and it builds in Clerk’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Clerk's design language is hairline-grid structural confidence. Soft hairline borders (#d9d9de) thread the entire page as the primary layout device; Geist Variable and Suisse Intl carry the typography; Sōehne Mono handles code; and a single saturated cyan accent (#5de3ff) provides scarce chromatic punctuation. The page reads like a beautifully constructed legal document — every cell is framed, every number is tabular, every transition is deliberately long.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (#ffffff ground for primary surface, #131316 dark surface for inversion zones, #d9d9de hairline border as primary structural element, #000000 primary text, #ffffff text on inversion, #747686 muted grey for secondary text, #5e5f6e tertiary text, #2f3037 elevated dark surface, #9394a1 metadata grey, #42434d background for dark cards, single saturated #5de3ff cyan accent), typography stack (Geist Variable for numerals and emphasis at sizes 10/13/16px, Suisse Intl for body and display, Sōehne Mono at 12-14px for inline code, with letter-spacing -0.12px on tight UI labels), incremental 4px spacing scale 1/4/6/8/10/12/14/16/20/24, container ladder 672/1280 (one tight reading + one wide hero), Tailwind-standard 640/768/1024/1280/1536 breakpoints, Framer Motion with custom signature easings cubic-bezier(0.33, 1, 0.68, 1) at 450ms + cubic-bezier(0.4, 0.36, 0, 1) at 300ms, 12 catalogued gradients used as atmospheric depth. Treat hairline borders as the primary brand asset — every section, card, and table cell uses them. Apply the language, not the source brand's copy.
Layout
Hairline-grid plate layout — every section bordered, every card framed; tight 672px reading width with 1280px hero canvas breakouts.
Explicit hairline grid — borders are not decoration, they are layout.
Light primary canvas with #d9d9de hairline borders threading the entire layout; dark inversion zones for inverted plates; single cyan accent #5de3ff as scarce signal.
Mode strategyLight-first canvas with dark inversion zones used for hero anchors and code-emphasised callouts. Implicit dark-variant compatibility via the inversion zone language.
#ffffff primary canvas — clean and bright
#d9d9de hairline border colour — primary structural brand element
#000000 primary ink text (~2,361 refs — high text density)
#131316 dark inversion zone background
#747686 muted grey for secondary text
#5e5f6e tertiary text
#2f3037 elevated dark surface for inverted cards
#9394a1 metadata grey for tabular figures and timestamps
#42434d background for dark cards on dark surfaces
#5de3ff cyan accent — scarce signal, scarce paint
Gradients (paste-ready)
12 gradients catalogued — atmospheric depth around hero, subtle cyan-tinted glow around key callouts, never decorative chromatic surfaces
Geist Variable for numerals, tabular figures, and emphasis — especially on rate cards and stats
Suisse Intl for body and display moments
Sōehne Mono at 12-14px for inline code and metadata
Display 32-72px in Suisse Intl 500-600; body 13-16px
Letter-spacing -0.12px on tight UI labels (small caps and metadata)
4px base unit, incremental scale 1/4/6/8/10/12/14/16/20/24
Section vertical rhythm: 80-120px between major sections
Card padding: 24-32px
CTA padding: 12-14px vertical, 16-24px horizontal
Hairline border padding: borders sit at 0 from container edges — no inset
Surface styleHairline-bordered plates. Every card and section has a #d9d9de 1px border; depth comes from inversion zones (dark plates on light pages) and atmospheric gradient.
0 drop shadow on marketing chrome
1px hairline border #d9d9de on every card, table cell, and section divider
Inversion zones (dark #131316 surfaces) sit flush — no separate border
Hover bumps border colour to slightly darker #c4c4c8, no lift
Inversion zones may animate in with stronger emphasis
Sticky nav fades in after 120px scroll
Motion has signature long duration — never use 200ms quick eases for primary interactions
Respect prefers-reduced-motion
Custom cubic-beziers are brand assets — preserve them
Hover shifts colour with long-duration ease, never position
Focus rings: 2px cyan #5de3ff ring with 2px offset
Active state: 95% opacity
Hairline border colour shifts as a hover signal
Approachmobile-first
Tailwind defaults (640/768/1024/1280/1536) — no custom ladder.
<768: 16px gutter, single column, hairline plates stack
768-1024: 672px reading rail, plates side-by-side at 2-column
≥1024: full 1280px hero canvas with multi-plate grid layouts
Body text #000000 on #ffffff passes WCAG AAA (21:1)
Hairline border #d9d9de visible but soft — passes 1.4 contrast (UI element, not text)
Inversion zone white on #131316 passes AAA
Cyan #5de3ff used carefully — passes AA on dark surfaces only, never on white at small sizes
Focus visible always present
Respect prefers-reduced-motion
Next.js (assumed from font preload patterns)Geist Variable for numerals preloaded as woff2Suisse Intl Bold + BoldItalic preloaded as woff2Sōehne Mono for inline codeFramer Motion for orchestrated section reveals
Typography + hairline-grid plates + atmospheric gradient depth are the entire visual identity. Cyan accent appears as illustration spot.
Geist Variable Numbers preloaded — tabular figures as brand asset
Suisse Intl loaded with selected weights
Sōehne Mono subsetted for ASCII + common operators
Framer Motion scoped to section reveals with custom long-duration easings
Use #d9d9de hairline borders as the primary structural device
Pair Geist Variable (numerals) with Suisse Intl (body/display)
Tabular numerals: Geist Variable with font-feature-settings 'tnum' enabled
Motion duration: 450ms+ used for primary CTA hovers
Cyan #5de3ff usage: badges and accent text only, never as fill background on primary buttons
Design tokens
Observed token system
Color, type, spacing, gradients, and stacking order captured from the live page and rendered here as living, paste-ready previews.
Inspector
Observable layers
Structure, breakpoints, motion, fonts, and images captured from the live page and kept paste-ready alongside the tokens.
Depth-first walk of the meaningful sections. 9 nodes across 7 levels, shallow to deep by color.
body1
div (×2)3
Header1
div1
div1
div1
Nav
Main
Footer
Accessibility
Contrast matrix
192 combinations - 64 pass AA - 32 pass AAA. Each pair is previewed with its real foreground on background; APCA Lc sits alongside the WCAG 2.1 ratio for draft WCAG 3 awareness.
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FFFFFF
APCA Lc
+106
Use
foreground on background
AaThe quick brown fox21.00
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#000000
APCA Lc
-108
Use
background on foreground
AaThe quick brown fox18.54
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#131316
bg
#FFFFFF
APCA Lc
+105
Use
foreground on background
AaThe quick brown fox18.54
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#131316
APCA Lc
-107
Use
background on foreground
AaThe quick brown fox14.93
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#D9D9DE
APCA Lc
+84
Use
foreground on neutral
AaThe quick brown fox14.93
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#D9D9DE
bg
#000000
APCA Lc
-84
Use
neutral on foreground
AaThe quick brown fox13.90
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#5DE3FF
APCA Lc
+80
Use
foreground on accent
AaThe quick brown fox13.90
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#5DE3FF
bg
#000000
APCA Lc
-80
Use
accent on foreground
AaThe quick brown fox13.18
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#D9D9DE
bg
#131316
APCA Lc
-83
Use
neutral on foreground
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
