An AI-IDE landing built on warm-craft confidence — pure #000000 ground, ABC Diatype premium grotesque, cream-pink hairline borders and a scarce orange accent. Developer warmth as the primary signal.
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 Replit’s language, not just a screenshot.
Paste into your agent. No signup, no cost.
Replit's design language is warm-IDE confidence. Pure #000000 ground carries the entire brand, ABC Diatype (custom premium grotesque) handles every typographic moment, and a single saturated orange #ff3c00 + cream-pink hairline borders provide the warm-craft signature most dev tools refuse. The page reads as a beautifully bound coding manual — printed, deliberate, never chrome-glossy.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (pure #000000 ground dominant, #898c94 mid-grey for secondary text, #2f3034 deep grey for tertiary, #ffffff for primary text and highlights, #76716f for tertiary text, #ff3c00 orange brand accent used scarcely, #191818 near-black for elevated surfaces, #52545a slate-grey, #ffb199 cream-pink for hairline borders, #dbd9d3 warm cream for soft borders), ABC Diatype + ABC Diatype Plus Variable as sole typographic identity (weights 400-500, sizes 13.3-20px catalogued), tight 4px spacing scale heaviest at 2/4/6/8/10/12/16/20, container ladder 1380-1392px (single wide frame), Tailwind-standard breakpoints with lg=900 (note: 900 not 1024) sm=640 md=768 xl=1280 2xl=1536, Framer Motion for restrained reveals at cubic-bezier(0.4, 0, 0.2, 1) 150-300ms. Treat orange #ff3c00 as scarce signal, never paint. Treat cream-pink #ffb199 as the brand's secret warmth in hairlines. Apply the language, not the source brand's copy.
Layout
Single-column reading flow with 1380-1392px ceiling; dense terminal-tight typography rhythm without sidebar.
Content width
1380-1392px container, body content at 720-960px reading rail.
Framing
Warm IDE manual — black canvas, cream-pink hairlines, ABC Diatype editorial discipline.
Grid strength
Implicit — 4px base unit governs spacing, rhythm comes from typography ladder and accent scarcity.
Pure #000000 ground; ABC Diatype in greyscale (#898c94, #2f3034, #ffffff) for hierarchy; cream-pink #ffb199 as hairline warmth signal; #ff3c00 orange brand accent.
Mode strategyDark-only — the warm-on-black contrast is the entire identity.
IBM Plex Sans also preloaded as supplemental webfont
Use ABC Diatype (or licensed equivalent) for every typographic moment
Reserve #ff3c00 for scarce brand signals
Use cream-pink #ffb199 for warm hairline borders — the brand's secret
Keep ground pure #000000
Don't paint surfaces in orange — it's voice, not paint
Don't substitute Inter for ABC Diatype
Don't widen the container beyond 1392px
Don't lighten the black to charcoal
Dark-only — no light variant
Type lock: ABC Diatype family
Orange coverage under 4% of pixels per viewport
Background grep: #000000 dominant
Font-family grep: ABC Diatype present
Cream-pink hairline #ffb199 visible in card borders
Orange #ff3c00 used as accent only, never as fill background
Spacing scale: 2/4/6/8/10/12/16/20 enforced
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. 7 nodes across 5 levels, shallow to deep by color.
body1
div (×7)2
div2
Headerbanner1
Nav
Footer
Sectionstatus
Accessibility
Contrast matrix
126 combinations - 52 pass AA - 34 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 fox19.52
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#FAF6F1
APCA Lc
+101
Use
foreground on background
AaThe quick brown fox19.52
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FAF6F1
bg
#000000
APCA Lc
-102
Use
background on foreground
AaThe quick brown fox17.72
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FFFFFF
bg
#191818
APCA Lc
-107
Use
background on foreground
AaThe quick brown fox17.72
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#191818
bg
#FFFFFF
APCA Lc
+105
Use
foreground on background
AaThe quick brown fox16.47
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#191818
bg
#FAF6F1
APCA Lc
+99
Use
foreground on background
AaThe quick brown fox16.47
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#FAF6F1
bg
#191818
APCA Lc
-101
Use
background on foreground
AaThe quick brown fox16.21
NormalAAANormal text passes AAALargeAAALarge text passes AAA
fg
#000000
bg
#E2E2E2
APCA Lc
+89
Use
foreground on background
Images
Image strategy
Observable image posture - total count, lazy-loading ratio, and format mix. The hero image is measured above the fold.
