--- version: alpha name: Replit description: Warm off-white canvas, ABC Diatype Plus Variable with extreme negative tracking, a single orange-red brand accent, and a friendly-accessible AI-coding identity that bridges consumer warmth with developer precision. colors: # Canvas — warm off-white, not cold white background: "#faf6f1" surface: "#f6f5f4" surface-raised: "#ffffff" surface-dark: "#1a1b1b" # manifest theme color — dark product surfaces surface-dark-deep: "#0e0e0f" # deepest dark background for editor UI # Ink ink: "#1b1c1e" # warm near-black — button hover text, primary ink ink-secondary: "#36373b" # default UI text on light background ink-muted: "#898c94" # secondary/muted text — neutral 1 ink-dim: "#52545a" # tertiary labels # On-dark surfaces on-dark: "#fcfcfb" # was rgb(252,252,251) — semantic primary on dark # Brand accent — the Replit orange-red primary: "#ff3c00" # Replit Orange — logo, CTA, focus states primary-hover: "#bb3e02" # brand-accent-stronger primary-light: "#fe9c6c" # brand-accent-dimmer — soft orange tint primary-container: "#ff845e" # was hsl(14deg,100%,68.5%) — container tint on-primary: "#ffffff" # Semantic success: "#527a5f" # was hsl(140deg,20%,40%) error: "#a87d84" # was hsl(350deg,20%,57.5%) info: "#5496d8" # was hsl(210deg,63%,58.8%) warning: "#8e7b44" # was hsl(45deg,35%,41.2%) # Interactive states surface-hover: "#e3e2dd" # was rgb(227,226,221) — button and nav hover background focus-ring: "#ff3c00" # brand orange for focus outlines # Borders border: "#cfc9c3" # brand-border CSS var — warm stone # Shadow tint shadow-soft: "#000000" # used at low opacity; opaque approx for token system typography: display-hero: fontFamily: "ABC Diatype Plus Variable, ABC Diatype, system-ui, -apple-system, Helvetica Neue, sans-serif" fontSize: 68px fontWeight: 400 lineHeight: 1.00 letterSpacing: -4.08px display: fontFamily: "ABC Diatype Plus Variable, ABC Diatype, system-ui, -apple-system, Helvetica Neue, sans-serif" fontSize: 48px fontWeight: 400 lineHeight: 1.00 letterSpacing: -2.88px heading-section: fontFamily: "ABC Diatype Plus Variable, ABC Diatype, system-ui, -apple-system, Helvetica Neue, sans-serif" fontSize: 42px fontWeight: 400 lineHeight: 1.00 letterSpacing: -1.68px heading-sub: fontFamily: "ABC Diatype Plus Variable, ABC Diatype, system-ui, -apple-system, Helvetica Neue, sans-serif" fontSize: 26px fontWeight: 400 lineHeight: 1.20 letterSpacing: -0.78px body-large: fontFamily: "ABC Diatype Plus Variable, ABC Diatype, system-ui, -apple-system, Helvetica Neue, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 1.40 letterSpacing: 0px body: fontFamily: "ABC Diatype Plus Variable, ABC Diatype, system-ui, -apple-system, Helvetica Neue, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.20 letterSpacing: -0.48px nav-link: fontFamily: "ABC Diatype Plus Variable, ABC Diatype, system-ui, -apple-system, Helvetica Neue, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.00 letterSpacing: -0.28px button-ui: fontFamily: "ABC Diatype Plus Variable, ABC Diatype, system-ui, -apple-system, Helvetica Neue, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.00 letterSpacing: 0px label-caps: fontFamily: "ABC Diatype Plus Variable, ABC Diatype, system-ui, -apple-system, Helvetica Neue, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.20 letterSpacing: 0.52px caption: fontFamily: "ABC Diatype Plus Variable, ABC Diatype, system-ui, -apple-system, Helvetica Neue, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px mono-ui: fontFamily: "IBM Plex Sans, ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.00 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px 5xl: 80px rounded: none: 0px xs: 2px sm: 6px md: 8px lg: 16px xl: 20px 2xl: 28px pill: 9999px components: # Primary orange CTA button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 10px 20px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 10px 20px # Outlined CTA — warm stone border on off-white button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 10px 20px borderColor: "{colors.border}" button-secondary-hover: backgroundColor: "{colors.surface-hover}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 10px 20px borderColor: "{colors.border}" # Ghost nav button button-ghost: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" typography: "{typography.nav-link}" rounded: "{rounded.sm}" padding: 8px 12px button-ghost-hover: backgroundColor: "{colors.surface-hover}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.sm}" padding: 8px 12px # Standard content card card: backgroundColor: "{colors.surface-raised}" rounded: "{rounded.2xl}" padding: 24px borderColor: "{colors.border}" card-dark: backgroundColor: "{colors.surface-dark}" rounded: "{rounded.2xl}" padding: 24px # Mega input bar (the hero prompt field) input-hero: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xl}" padding: 16px 20px borderColor: "{colors.border}" input-hero-focus: backgroundColor: "{colors.surface-raised}" borderColor: "{colors.focus-ring}" # Standard input input: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px borderColor: "{colors.border}" input-focus: backgroundColor: "{colors.surface-raised}" borderColor: "{colors.focus-ring}" # Pill badge / tag badge: backgroundColor: "{colors.surface-hover}" textColor: "{colors.ink-secondary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px # Agent pill badge (orange accent) badge-agent: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 4px 12px # Top navigation bar nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.nav-link}" padding: 12px 24px borderColor: "{colors.border}" --- # Replit Design System ## Overview Replit's visual identity sits at an unusual and carefully calibrated intersection: consumer-friendly warmth and developer tool precision, held together by a single electric accent and a warm off-white canvas that feels neither clinical nor infantilizing. The page opens on `{colors.background}` — a linen-tinged off-white closer to a physical notebook than a default browser white — and everything from the logotype to the input bars inherits that organic temperature. It's a visual grammar that says "build anything" without the sterile confidence of pure developer tools or the illustrative brightness of no-code consumer products. The headline system is ABC Diatype Plus Variable, a variable-axis grotesque with extremely aggressive negative letter-spacing at large sizes (-4px at 68px, narrowing proportionally as size decreases). At display scale the tracking pushes characters together until headlines read almost as solid forms — compressed, intentional, like compiled output. At body scale the tracking relaxes to near-zero, letting the font breathe without losing the precision. A secondary appearance of IBM Plex Sans in UI contexts signals the product layer beneath the marketing surface: the editor, the shell, the infrastructure. What anchors the whole system is `{colors.primary}` — the Replit orange-red, a bold `#ff3c00` that appears in the logo mark, every CTA button, the AI "Agent" badge, and implicitly in the hover states of the orange circle submit button in the hero prompt. Everything else in the palette is intentionally neutral: warm grays, stone borders, soft shadows. The orange never shares the spotlight. This restraint makes it one of the few AI-coding platforms where the brand accent doesn't feel aggressive — it's a punctuation mark, not a color story. **Key Characteristics:** - Warm linen off-white canvas (`{colors.background}`) — not neutral white, not cream, somewhere between - ABC Diatype Plus Variable with negative letter-spacing: -4px at 68px down to -0.28px at 14px - Single brand accent: `{colors.primary}` orange-red for all CTAs, logo mark, and focus states - Friendly-rounded shapes: `{rounded.xl}` (20px) on inputs, `{rounded.2xl}` (28px) on feature cards, `{rounded.pill}` on buttons - Dual-mode identity: warm marketing canvas on light surfaces, near-black (`{colors.surface-dark}`) for product/editor UI - IBM Plex Sans as the secondary UI typeface for editor and monospace contexts - Motion calibrated at 0.12s–0.2s `ease` — quick, unobtrusive, never animated for effect - CSS variable system with full brand color scale (`--brand-surface-color-*`, `--brand-accent-*`) - Uppercase `{typography.label-caps}` with positive letter-spacing (+0.52px) for section labels — flips the hierarchy direction from display text - Radix UI, Fluent UI, and PrimeReact powering the component layer beneath the custom surface ## Colors ### Canvas - **Warm Off-White** (`{colors.background}`): The page canvas. A stone-adjacent off-white that reads warm under natural light. Not white. - **Surface** (`{colors.surface}`): Buttons and subtle wells. Slightly cooler than background but same family. - **Raised Surface** (`{colors.surface-raised}`): Cards, modals, input fields. Pure white for maximum contrast with `{colors.background}`. ### Dark Surfaces - **Dark Surface** (`{colors.surface-dark}`): Product/editor UI — the application side of Replit. Manifest theme color. - **Dark Deep** (`{colors.surface-dark-deep}`): Deepest UI layer — code editors, background panels. - **On Dark** (`{colors.on-dark}`): Near-white ink for dark surface contexts. ### Ink - **Primary Ink** (`{colors.ink}`): The darkest text — headlines, hover states, high-emphasis labels. - **Secondary Ink** (`{colors.ink-secondary}`): Default UI text and nav link color. - **Muted Ink** (`{colors.ink-muted}`): Placeholder text, secondary captions, subtle labels. - **Dim Ink** (`{colors.ink-dim}`): Tertiary copy, footer links, least-emphasis elements. ### Brand Accent - **Replit Orange** (`{colors.primary}`): The only non-neutral color in the UI chrome. Logo mark, primary CTA buttons, "Agent" badge, submit arrows. - **Stronger Orange** (`{colors.primary-hover}`): Hover state for primary CTAs. - **Dimmer Orange** (`{colors.primary-light}`): Soft tint for hover states, glows, and secondary accent touches. - **Container Orange** (`{colors.primary-container}`): Light orange tint for backgrounds that need brand presence without full saturation. ### Semantic - **Success** (`{colors.success}`): Muted sage green — completion and validation states. - **Error** (`{colors.error}`): Muted rose — destructive actions and error messaging. - **Info** (`{colors.info}`): Mid-range blue — notice and informational states. - **Warning** (`{colors.warning}`): Muted amber — caution states. ### Interactive States - **Surface Hover** (`{colors.surface-hover}`): Button and nav hover background — warm gray, not cool gray. - **Focus Ring** (`{colors.focus-ring}`): Orange focus outline — consistent with brand accent. ### Borders - **Brand Border** (`{colors.border}`): Warm stone border — slightly warmer than neutral, matches the linen canvas family. ## Typography ### Font Families - **Primary Display & UI**: `ABC Diatype Plus Variable` with static fallback `ABC Diatype`, then `system-ui`. A contemporary variable grotesque with a wide optical range — elegant at display scale, readable at caption scale. - **Secondary / Editor UI**: `IBM Plex Sans` appears in UI contexts tied to the product layer (editor, shell, pricing tables). Signals the technical layer beneath the marketing surface. - **Variable Axes**: The "Plus Variable" designation provides weight and possibly optical-size axes. The weight range in use: 400 (regular) through 700 (bold) with 500 and 600 appearing at mid-sizes. ### Hierarchy The complete type scale is in the `typography:` token block above. Use those tokens directly via `{typography.display-hero}`, `{typography.body}`, etc. | Token | Use | |---|---| | `display-hero` | Hero headlines — 68px, -4px tracking, maximum brand impact | | `display` | Section feature headlines — 48px, -2.88px | | `heading-section` | Mid-page section titles — 42px | | `heading-sub` | Card titles, feature sub-sections — 26px | | `body-large` | Feature descriptions, introductory copy — 20px weight 500 | | `body` | Reading text and UI copy — 16px | | `nav-link` | Navigation and interactive labels — 14px weight 500 | | `button-ui` | Button copy — 14px weight 400 | | `label-caps` | Uppercase section eyebrows — 13px weight 500, +0.52px tracking | | `caption` | Metadata, small labels, fine print — 12px | | `mono-ui` | Product UI, pricing tables, editor interface — IBM Plex Sans 14px | ### Principles - **Tracking scales with size**: at display sizes the negative tracking is extreme (around -6% of font size); at 14px UI it approaches zero. This is the defining typographic signature. - **Direction reversal at caption scale**: `{typography.label-caps}` uses *positive* letter-spacing (+0.52px) with uppercase transform — deliberate contrast to the display compression. - **Weight economy**: 400 for editorial, 500 for UI emphasis, 600–700 only for large display contexts. The variable axis is used subtly, not expressively. - **Two-voice system**: ABC Diatype speaks the brand; IBM Plex Sans speaks the product. The transition between them marks the boundary between marketing and application. ## Layout ### Spacing System The complete scale is in the `spacing:` token block above. Base unit: 8px. Replit uses generous vertical rhythm — sections breathe with `{spacing.3xl}` (48px) to `{spacing.5xl}` (80px) gaps, while component internals use `{spacing.md}` (12px) to `{spacing.xl}` (24px). ### Grid & Container - Max content width: approximately 1280px - Hero: single centered column, prompt bar centered at around 600px max-width - Feature sections: alternating full-width and 2–3 column grids - Navigation: full-width sticky bar, left-aligned logo, right-aligned CTAs ### Whitespace Philosophy - The off-white canvas absorbs space gracefully — generous padding doesn't feel wasteful because the warm background reads as material, not empty. - The hero prompt field floats in significant vertical space below the headline, making the input feel like an invitation rather than a form. - Card groups use consistent gap spacing with `{rounded.2xl}` corners that signal generous, friendly containment. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Body text, inline elements | | Ring (Level 1) | 1px solid `{colors.border}` | Cards, inputs, nav borders | | Soft Card (Level 2) | `rgba(0,0,0,0.08) 0px 2px 8px 0px` | Dropdown menus, floating panels | | Elevated (Level 3) | `rgba(0,0,0,0.12) 0px 8px 32px 0px` | Modals, deep dropdowns | | Focus Ring | 2px solid `{colors.focus-ring}` | Keyboard focus on interactive elements | **Shadow Philosophy**: Replit uses conventional `box-shadow` depth — warm but not branded. Shadows are functional, not decorative: thin 1px borders define most containment, with soft elevation shadows appearing only for floating layers like dropdowns and the nav mega-menu. The warm canvas means even mid-opacity black shadows feel less cold than they would on pure white. No inner shadows or multi-layer stacks — the system is clean and direct. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Reserved | | `xs` | 2px | Small badges and tags | | `sm` | 6px | Nav links, utility buttons | | `md` | 8px | Standard buttons, small cards | | `lg` | 16px | Section containers | | `xl` | 20px | Main input fields, hero prompt bar | | `2xl` | 28px | Feature cards, product showcase panels | | `pill` | 9999px | Primary CTAs, badge pills | The radius system is biased toward friendliness — rounded corners are generous across the board, with the hero input and feature cards using values that approach circular. The pill shape on primary buttons makes CTAs feel conversational, reinforcing the AI assistant product persona. ## Components The complete component spec is in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than restating values. ### Buttons - **`button-primary`** — Full orange pill. The brand's only saturated surface. Reserved for primary CTAs like "Create account" and the hero submit arrow. - **`button-secondary`** — Off-white surface with stone border, pill shape. Used for secondary actions and navigation CTAs. - **`button-ghost`** — Subtle nav button with mild hover tint. All navigation items use this pattern. ### Cards - **`card`** — White raised surface, 28px radius, stone border. Clean and architectural — the warm radius prevents clinical coldness. - **`card-dark`** — Near-black surface for product demos and feature showcases. The dark/light contrast is a major visual motif across the page. ### Inputs - **`input-hero`** — The large centered prompt bar. 20px radius, white surface, warm border. The orange submit button inside it is the only primary color appearing embedded in an input. - **`input`** — Standard form input with 8px radius and focus ring in `{colors.focus-ring}`. ### Badges - **`badge`** — Neutral warm-gray pill, used for example prompts ("3D maze game", "Sales pipeline tracker") and filter chips. - **`badge-agent`** — Orange fill pill with a counter number. Appears in the nav as the "Agent 4" indicator — the only place the brand orange appears at component scale in the nav. ### Navigation - **`nav-bar`** — Sticky, warm off-white, 1px warm stone border on bottom. Left-aligned logo + dropdown nav items. Right side: tertiary links ("Contact sales", "Log in"), then `button-secondary` for "Create account". ## Do's and Don'ts ### Do - Use `{colors.primary}` exclusively for the primary CTA, logo mark, and focus states — its power comes from scarcity - Apply `{rounded.pill}` to primary action buttons and badge-style pills; `{rounded.xl}` for inputs; `{rounded.2xl}` for cards - Use `{colors.background}` as the canvas — never substitute pure `#ffffff` on light-mode marketing surfaces - Use negative letter-spacing consistently: proportional to font size (roughly -6% at display, tapering to zero at body) - Use `{typography.label-caps}` with uppercase and positive letter-spacing for section eyebrows — its positive tracking creates deliberate tension against display compression - Use `{colors.surface-dark}` for product demo areas and editor contexts — the dark/light contrast is structurally important to the page - Transition interactive elements at 0.12s–0.2s `ease` — this duration registers as crisp but not jarring - Reference `{colors.border}` (warm stone) for all border treatments — avoid cool gray alternatives that would break the warmth ### Don't - Don't use `{colors.primary}` on background fills except primary CTAs and the logo — one surface per page at most - Don't substitute cool grays for neutral states — the palette is warm throughout (`{colors.ink-muted}` has a blue tint, but borders and surfaces stay warm) - Don't use tight or zero radius on cards — `{rounded.md}` (8px) is the minimum for non-button containment - Don't use positive letter-spacing on display or heading text — only `{typography.label-caps}` inverts the tracking direction - Don't mix ABC Diatype Plus Variable with serif fallbacks — the warmth comes from the grotesque, not from editorial contrast - Don't apply shadows heavier than Level 3 — the system uses elevation sparingly; deep shadows would look out of place on the warm canvas - Don't place the orange CTA on dark surfaces — `{colors.primary}` is calibrated for the warm light-mode canvas and can read poorly on `{colors.surface-dark}` without adjustment - Don't use bright semantic colors (success/error/info) decoratively — they are functional-only in a near-neutral palette --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <480px | Single column, collapsed nav, hero text scales down | | Mobile | 480–768px | Standard mobile stack, hamburger menu | | Tablet | 768–1024px | 2-column feature grids, expanded padding | | Desktop | 1024–1280px | Full layout, standard desktop width | | Large Desktop | >1280px | Centered content, generous side margins | ### Touch Targets - Pill buttons have generous padding (10px vertical, 20px+ horizontal), exceeding 44px touch target minimum - Nav links use 8px vertical padding with adequate horizontal spacing - The hero input bar is generously sized (56px+ height) for easy mobile tapping - Badge filter chips have 4px vertical / 12px horizontal padding — comfortable for mobile filtering ### Collapsing Strategy - Navigation: full horizontal dropdown nav collapses to hamburger mobile menu - Hero headline: scales from 68px at desktop to approximately 36px on mobile, maintaining negative tracking proportionally - Feature cards: 3-column grid → 2-column → single column with full-width treatment - Dark/light product panels: maintain vertical stacking rather than side-by-side on mobile - Logo marquee (trust bar): scrolls horizontally on all sizes via keyframe animation - Footer: multi-column → stacked single column ### Image Behavior - Product screenshots maintain border treatment at all breakpoints - Dark showcase panels are full-width on mobile without side gutters - Illustration and UI preview images scale fluidly within their card containers --- ## Agent Prompt Guide ### Quick Color Reference - Background: Warm off-white `{colors.background}` - Body text: `{colors.ink-secondary}` - Headline text: `{colors.ink}` - Brand accent / CTA: `{colors.primary}` - Muted / secondary text: `{colors.ink-muted}` - Card / input surface: `{colors.surface-raised}` - Border: `{colors.border}` - Dark surface (product): `{colors.surface-dark}` ### Example Component Prompts - "Create a hero section on `{colors.background}` background. Headline: ABC Diatype Plus Variable 68px weight 400 line-height 1.0 letter-spacing -4px, color `{colors.ink}`. Sub-line: 20px weight 500 line-height 1.4 color `{colors.ink-secondary}`. Below it: a large prompt input (white background, 1px solid `{colors.border}`, 20px border-radius, 16px 20px padding) with an orange pill submit button (`{colors.primary}`, `{rounded.pill}`, 10px 20px padding) inside right." - "Design a card component: white (`{colors.surface-raised}`) background, 28px border-radius, 1px solid `{colors.border}`. Pad 24px. Card title: ABC Diatype 26px weight 400 letter-spacing -0.78px color `{colors.ink}`. Body copy: 16px weight 400 line-height 1.5 color `{colors.ink-secondary}`. Subtle box-shadow: `rgba(0,0,0,0.08) 0px 2px 8px 0px`." - "Build a primary CTA button: background `{colors.primary}`, text `{colors.on-primary}`, 14px ABC Diatype weight 400, `{rounded.pill}` border-radius, 10px 20px padding. Hover: background `{colors.primary-hover}`. Transition: `background-color 0.12s ease-out`." - "Create a navigation bar: sticky, background `{colors.background}`, border-bottom 1px solid `{colors.border}`. Left: Replit wordmark logo. Center-left: nav links at 14px ABC Diatype Plus Variable weight 500 letter-spacing -0.28px color `{colors.ink-secondary}`, hover background `{colors.surface-hover}` 6px radius. Right: 'Log in' ghost link, then 'Create account' outlined pill button (border `{colors.border}`, `{rounded.pill}`, 10px 20px padding)." - "Design a badge system. Neutral badge: background `{colors.surface-hover}`, text `{colors.ink-secondary}`, 12px ABC Diatype weight 400, `{rounded.pill}`, 4px 12px padding. Agent/accent badge: background `{colors.primary}`, text `{colors.on-primary}`, same sizing. Use neutral badges for example prompts and filters; accent badge only for AI agent status indicators." - "Create a section eyebrow + headline pair. Eyebrow: ABC Diatype Plus Variable 13px weight 500 letter-spacing +0.52px uppercase, color `{colors.ink-muted}`. Headline below it: ABC Diatype Plus Variable 42px weight 400 line-height 1.0 letter-spacing -1.68px, color `{colors.ink}`. This tracking contrast (positive eyebrow, deeply negative headline) is Replit's signature typographic rhythm." ### Iteration Guide 1. Start with `{colors.background}` — the warm linen off-white is the canvas everything else calibrates to. Pure white breaks the warmth immediately. 2. Use `{colors.primary}` on exactly one primary CTA per view. Its power is total scarcity. 3. Letter-spacing scales proportionally with font size: -4px at 68px, -2.88px at 48px, -0.48px at 16px, near-zero at 14px. Always negative except `{typography.label-caps}`. 4. Shadow depth is functional only: 1px borders for containment, `rgba(0,0,0,0.08)` for cards, `rgba(0,0,0,0.12)` for elevated panels. No decorative shadows. 5. Radius hierarchy: inputs at 20px, cards at 28px, primary buttons as pills, utility buttons at 6–8px. 6. Dark/light contrast is structural: every feature page section pairs a light marketing panel with a dark `{colors.surface-dark}` product preview. 7. IBM Plex Sans at 14px marks the transition from brand voice to product voice — use it in pricing tables, editor UI, and technical output displays. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Replit. Brand names and trademarks belong to their respective owners.