---
title: "Replit design system"
variant: extended
source: https://replit.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/replit-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Replit · Design System

> Warm, spacious design with a vivid builder’s spark.

**Theme:** light · **Industry:** ai · **Source:** https://replit.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Replit pairs a quiet, warm-neutral canvas with bold orange actions and a spacious product-led layout. Rounded feature panels, template previews, and restrained typography make the AI app-building experience feel approachable and tangible.

## North star

Keep the canvas warm and quiet, then use orange sparingly to make the product’s next action unmistakable.

## Overview

The page is grounded in a warm cream canvas (#faf6f1), with pale neutral section bands giving the template gallery a subtle change of pace. Saturated Replit orange (#ff3c00) is reserved for primary actions and small identity cues, while salmon accents appear in feature panels, testimonial shapes, and product artwork. Replit Diatype carries nearly all interface text: headings are compact and tightly tracked, with a light, confident display feel; body copy stays small and readable. The mono face is limited to uppercase eyebrow labels. A centered, generous hero gives the prompt composer room to lead, while subsequent sections alternate between balanced card grids, curated template imagery, and broad testimonial compositions. Cards have generous rounding and mostly flat surfaces; thin gray borders define controls without making the page feel technical or dense. Product screenshots and illustrations bring color and texture without displacing the calm canvas.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#faf6f1` | `--color-warm-canvas` | brand | Dominant page background and the continuous canvas behind most sections. |
| Replit Flame | `#ff3c00` | `--color-replit-flame` | accent | Primary account and start actions, logo marks, and selected accent details. |
| Soft Ink | `#312e2e` | `--color-soft-ink` | neutral | Main heading and body text, card copy, and prominent links. |
| Pure Surface | `#ffffff` | `--color-pure-surface` | surface | Testimonial and pricing card surfaces against the warm canvas. |
| Control Line | `#d7d7d5` | `--color-control-line` | semantic | Subtle borders and outlines around controls and card elements. |
| Footer Slate | `#4b5563` | `--color-footer-slate` | neutral | Muted footer text and low-emphasis supporting copy. |
| Warm Gray | `#6f6c6a` | `--color-warm-gray` | neutral | Secondary descriptions and subdued text on light backgrounds. |
| Deep Charcoal | `#1a1a1a` | `--color-deep-charcoal` | neutral | Occasional high-contrast text and minor interface details. |
| Soft Salmon | `#ffb199` | `--color-soft-salmon` | accent | Feature and testimonial panel fills, plus warm visual accents. |
| Coral Glow | `#ff764c` | `--color-coral-glow` | accent | Gradient and decorative color within warm feature-panel treatments. |
| Graphite Gray | `#4b4d53` | `--color-graphite-gray` | neutral | Secondary dark text details in interface content. |
| Nav Graphite | `#37383c` | `--color-nav-graphite` | neutral | Top navigation labels and other compact interface text. |
| Forest Shadow | `#293025` | `--color-forest-shadow` | semantic | Dark gradient and image-overlay tones within product visuals, not a core page color. |
| Deep Moss | `#20251e` | `--color-deep-moss` | semantic | Dark product-image gradient detail; use only within illustrative or photographic panels. |
| Olive Shade | `#252b22` | `--color-olive-shade` | semantic | Dark gradient detail in product artwork, not a general interface surface. |
| Footer Hairline | `#e3dedb` | `--color-footer-hairline` | semantic | Subtle footer divider line. |

### Semantic aliases

`--color-canvas` → `#faf6f1` (Warm Canvas) · `--color-surface` → `#ffffff` (Pure Surface) · `--color-surface-2` → `#ffb199` (Soft Salmon) · `--color-text` → `#312e2e` (Soft Ink) · `--color-text-muted` → `#4b5563` (Footer Slate) · `--color-text-subtle` → `#6f6c6a` (Warm Gray) · `--color-border` → `#d7d7d5` (Control Line) · `--color-accent` → `#ff3c00` (Replit Flame) · `--color-accent-2` → `#ff764c` (Coral Glow) · `--color-accent-3` → `#ffb199` (Soft Salmon) · `--color-on-accent` → `#ffffff` (Pure Surface)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#312e2e` | `#faf6f1` | 12.5:1 | AAA |
| `#312e2e` | `#ffffff` | 13.45:1 | AAA |
| `#312e2e` | `#ffb199` | 7.69:1 | AAA |
| `#4b5563` | `#faf6f1` | 7.02:1 | AAA |
| `#4b5563` | `#ffffff` | 7.56:1 | AAA |
| `#4b5563` | `#ffb199` | 4.32:1 | AA-large |
| `#6f6c6a` | `#faf6f1` | 4.84:1 | AA |
| `#6f6c6a` | `#ffffff` | 5.21:1 | AA |
| `#6f6c6a` | `#ffb199` | 2.98:1 | fail |
| `#ff3c00` | `#faf6f1` | 3.31:1 | AA-large |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(243, 242, 238) 74%)`
- `linear-gradient(100deg, rgba(29, 34, 27, 0.8) 0%, rgba(29, 34, 27, 0.45) 50%, rgba(29, 34, 27, 0.2) 100%)`
- `radial-gradient(100% 150% at 0% 50%, rgb(255, 118, 76) 0%, rgb(255, 118, 76) 72%, rgba(255, 118, 76, 0.82) 84%, rgba(255, 118, 76, 0.58) 94%, rgba(255, 118, 76, 0.42) 100%)`
- `radial-gradient(108% 60% at 0% 50%, rgb(255, 118, 76) 0%, rgb(255, 118, 76) 45%, rgba(255, 118, 76, 0.85) 65%, rgba(255, 118, 76, 0.65) 82%, rgba(255, 118, 76, 0.45) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Replit Diatype | `--font-body` | webfont | 400, 460, 600, 500, 450, 700 | Primary interface typeface for navigation, headings, body copy, links, buttons, and cards. | Inter |
| Replit Diatype Mono | `--font-mono` | webfont | 500 | Small uppercase eyebrow labels and compact technical-style captions. | IBM Plex Mono |

- **Replit Diatype:** Use regular weights for display and headings, medium for navigation and links; headings use tight negative tracking, with sentence case.
- **Replit Diatype Mono:** Use a restrained monospace treatment for uppercase, letter-spaced labels; keep it distinct from body copy.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1 | -0.06em | — | Replit Diatype | Large centered homepage hero heading. |
| h1 | 36px | 400 | 1 | -0.03em | — | Replit Diatype | Primary section and page-level headings. |
| h2 | 32px | 400 | 1 | -0.04em | capitalize | Replit Diatype | Feature, template, platform, and pricing section headings. |
| h3 | 26px | 400 | 1.2 | -0.03em | — | Replit Diatype | Card and feature titles. |
| h4 | 20px | 460 | 1.4 | 0 | — | Replit Diatype | Smaller card headings and emphasized supporting labels. |
| body | 14px | 400 | 1.71 | 0 | — | Replit Diatype | Descriptions, testimonials, and standard interface copy. |
| caption | 12px | 400 | 1.4 | -0.02em | — | Replit Diatype | Compact helper text and secondary annotations. |
| button | 14px | 450 | normal | 0 | — | Replit Diatype | Primary and secondary action labels. |
| nav | 14px | 460 | 1.43 | 0 | — | Replit Diatype | Top-level navigation and footer navigation labels. |
| link | 14px | 500 | normal | -0.02em | — | Replit Diatype | Inline documentation and supporting text links. |
| eyebrow | 13px | 500 | normal | 0.12em | uppercase | Replit Diatype Mono | Uppercase labels above feature content. |
| code | 13px | 500 | normal | 0.12em | uppercase | Replit Diatype Mono | Mono-styled technical or compact uppercase label treatment. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 2, 4, 8, 10, 11, 12, 16, 17, 24, 32, 40, 48, 80 px.
- Section rhythm 32px · element gap 8px · card padding 48px · max content width 650px.

A restrained, centered composition opens with a large amount of breathing room around the builder prompt. The measured content max width is 650px, while later showcase and gallery sections expand into multi-column grids. The page alternates a warm canvas with a softly tinted gallery band, then returns to the canvas for platform cards, testimonials, pricing, and CTA. Headings are centered for hero and selected showcase blocks; template, pricing, and footer content align to the start. Overall density is compact within cards but spacious between major content groups.

## Shape & elevation

- Radius: button `8px` · input `6px` · card `24px` · badge `8px` · nav `6px` · xs `6px` · sm `7px` · md `8px` · lg `12px` · xl `16px` · 2xl `20px` · pill `9999px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(219, 217, 211) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 1px 2px 0px`
- Motion: standard transition `0.12s ease-out` on interactive elements.

The design is mostly flat: white and tinted cards sit directly on the canvas, with rounded corners providing the main separation. Thin neutral borders define inputs and compact controls. The measured button shadow is an almost imperceptible inset outline with a faint drop shadow; avoid heavy elevation or dramatic layered effects.

## Imagery

Template thumbnails are presented as a curated gallery of varied web and app designs, including editorial, dark-interface, and poster-like examples. Product feature cards combine interface previews, diagrams, and abstract orange artwork; the platform section uses illustrative icons and simple schematics. Testimonials add cropped portrait photography. Keep visuals contained within rounded panels and avoid letting their varied colors overwhelm the warm page canvas.

## Components

### Prompt composer

A wide, softly outlined rounded input in the hero, with a plus affordance and circular orange submit control.

### Primary action

Use Replit orange #ff3c00 with white text, compact padding, and the measured 8px button radius; rounded pill variants appear for Start.

### Template card

A dense gallery tile featuring a visual preview; arrange tiles in an orderly multi-column grid with rounded corners.

### Feature panel

Large rounded blocks combine a short label, concise title, supporting copy, and interface or abstract product imagery.

### Pricing card

White surface with a rounded container, concise plan name and price, and supporting detail grouped into a clear hierarchy.

### Testimonial panel

A broad white quote card paired with warm salmon decorative shapes and cropped portrait imagery.

### Footer columns

A compact brand and description area sits beside grouped navigation lists, separated from the copyright row by a subtle hairline.

### Measured component styles

- **Primary button** (“Create account”): background #ff3c00 · text #ffffff · border 1px solid · radius 8px · padding 8px 12px · 500 14px Replit Diatype
- **Secondary button** (“Beginner running tracker”): background #efeeec · text #212225 · radius 6px · padding 0px 8px · 400 13.3333px Replit Diatype · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(219, 217, 211) 0px 0px 0px 1px inset, rgba
- **Link** (“Read the documentation”): transparent background · text #312e2e · radius 0px · padding 0px · 500 14px Replit Diatype
- **Input**: transparent background · text #18191b · radius 6px · padding 6px 6px 0px 6px · 400 14px Replit Diatype
- **Card** (““ By integrating with Lakebase and Datab”): background #ffffff · text #312e2e · radius 60px · padding 48px · 400 14px Replit Diatype
- **Badge** (“Save $120”): background #ffe1d6 · text #ff3c00 · radius 8px · padding 4px 10px · 400 13px Replit Diatype
- **Navigation item** (“Products Solutions Pricing Enterprise Re”): transparent background · text #37383c · radius 0px · padding 0px · 400 14px Replit Diatype

## Do

- Use #faf6f1 as the dominant page canvas.
- Reserve #ff3c00 for primary actions and distinctive brand cues.
- Give the hero prompt and headline generous surrounding whitespace.
- Use rounded cards to group product previews and supporting content.
- Switch to a soft neutral band to distinguish gallery content.
- Keep headings tightly tracked and body copy visually calm.

## Don't

- Do not turn the page into a dark interface.
- Do not use orange as a full-page background.
- Do not add heavy shadows or thick card outlines.
- Do not crowd the hero with extra competing content.
- Do not apply monospace styling to regular body copy.
- Do not treat colors sampled from product imagery as core UI colors.

## Agent prompt

Build a new Replit-style page with a calm, product-led visual hierarchy. Use Warm Canvas (#faf6f1) as the main background and Soft Ink (#312e2e) for primary text; reserve Replit Flame (#ff3c00) for the main CTA and small brand accents. Use Replit Diatype or a close sans-serif substitute, with tightly tracked, regular-weight headings and restrained supporting copy. Open with a spacious, centered product interaction, then organize content into rounded feature panels, a visual gallery, and clear follow-on sections. Use white and pale neutral surfaces, thin borders, and very subtle elevation. Keep any brighter coral treatments inside feature artwork or testimonial panels. Maintain generous section breathing room and simple, readable navigation; do not add unmeasured decorative UI or heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and prompt composer with example prompts below. | Prompt input, Product-mode selector, Example prompts | Warm canvas, Large centered headline, Outlined composer, Orange submit action |
| 2 | feature-grid | Centered introduction above a two-column feature-card arrangement. | Feature discovery, Free-mode comparison, Documentation link | Rounded feature panels, Salmon accents, Product interface previews |
| 3 | gallery | Start-aligned title and category controls above a four-column template gallery. | Category filtering, Template browsing, Browse-all action | Soft neutral section band, Thumbnail grid, Rounded image tiles |
| 4 | feature-grid | Centered heading above four side-by-side capability cards. | Capability overview, Feature navigation | Four-card row, White and coral surfaces, Diagram and icon artwork |
| 5 | testimonials | Wide testimonial composition with quote content, portrait images, and decorative side panels. | Customer quote, Previous and next testimonial | White quote surface, Salmon rounded shapes, Cropped portraits |
| 6 | pricing | Start-aligned pricing introduction with billing controls and plan cards below. | Monthly or yearly billing, Plan comparison | White rounded cards, Compact plan details, Subtle controls |
| 7 | cta | Centered closing message and primary action in a broad, open section. | Conversion CTA, Free-start reassurance | Centered heading, Orange primary button, Minimal supporting copy |
| 8 | footer | Brand description and social links beside grouped navigation columns. | Footer navigation, Social links, Legal links | Multi-column link groups, Subtle divider, Compact muted copy |

## Source CSS custom properties (selected)

```css
--border-radius-1: 1px;
--border-radius-2: 2px;
--border-radius-4: 4px;
--border-radius-6: 6px;
--border-radius-8: 8px;
--border-radius-12: 12px;
--border-radius-16: 16px;
--border-radius-default: 6px;
--border-radius-container: 8px;
--border-radius-dialog: 16px;
--border-radius-round: 1028px;
--space-1: 1px;
--space-2: 2px;
--space-4: 4px;
--space-6: 6px;
--space-8: 8px;
--space-12: 12px;
--space-16: 16px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-56: 56px;
--space-64: 64px;
--space-80: 80px;
--space-96: 96px;
--space-128: 128px;
--space-256: 256px;
--space-default: 8px;
--overlay-color-subtle: color-mix(in srgb, currentColor 10%, transparent);
--overlay-color-regular: color-mix(in srgb, currentColor 20%, transparent);
--overlay-color-strong: color-mix(in srgb, currentColor 30%, transparent);
--overlay-color-default: color-mix(in srgb, currentColor 20%, transparent);
--shadow-0: 0px 4px 8px 0px #02020312;
--shadow-1: 0px 4px 8px 0px #02020329;
--shadow-2: 0px 8px 16px 0px #02020352;
--shadow-3: 0px 16px 32px 0px #0202037a;
--shadow-control: 0px 1px 2px #00000005;
--shadow-control-overlay-border: 0px 1px 2px #00000005, 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
--shadow-flat: 0px 1px 2px #00000008;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/replit-com