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

# Devin · Design System

> A quiet canvas for serious engineering work

**Theme:** light · **Industry:** ai · **Source:** https://devin.ai/ · **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._

Devin’s homepage pairs a restrained light palette and editorial typography with detailed product-interface imagery. A long, modular page explains the agent’s workflow, integrations, security, and updates through alternating product showcases and concise content blocks.

## North star

Keep the page calm and editorial, using crisp dark type and real product UI as the primary source of visual detail.

## Overview

The page uses a near-white canvas (#f8f8f8) throughout, letting dark text and product screenshots provide most of the contrast. White surfaces and very light gray hairlines distinguish interface cards without breaking the calm, continuous background. Black pill-shaped CTAs form the strongest interface accent; blue, green, orange, and purple appear sparingly in links, product UI, and a model-spectrum gradient rather than as broad brand blocks. Display and heading typography uses nbInternationalPro with a light, compact editorial feel, while Inter handles body copy and denser product details. The hero is left-aligned and pairs a concise proposition with a large layered product demonstration. Below, alternating feature showcases, a four-step workflow, integrations, release notes, security points, and a centered CTA create a clear narrative. Generous whitespace separates these modules, while compact labels and screenshots preserve technical specificity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Canvas | `#f8f8f8` | `--color-soft-canvas` | surface | Primary page background and continuous section canvas. |
| Core Ink | `#191919` | `--color-core-ink` | brand | Headlines, body copy, navigation, and outlined CTA text. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Product cards, interface panels, and text on dark controls. |
| Quiet Divider | `#e9e9e9` | `--color-quiet-divider` | neutral | Fine separators around cards, links, badges, and controls. |
| Muted Graphite | `#7b7b7b` | `--color-muted-graphite` | neutral | Secondary explanatory copy and subdued labels. |
| Signal Blue | `#317cff` | `--color-signal-blue` | accent | Occasional links and product-interface emphasis; keep it sparse. |
| Gradient Gray | `#979797` | `--color-gradient-gray` | neutral | Measured gradient-associated text color; not a defining page surface. |
| Footer Gray | `#9f9f9f` | `--color-footer-gray` | neutral | Low-emphasis footer and supporting text. |
| Model Green | `#00a558` | `--color-model-green` | accent | Model-spectrum gradient and small product status details. |
| Model Orange | `#f58e3a` | `--color-model-orange` | accent | Middle stop in the model-spectrum gradient and tiny UI details. |
| Model Violet | `#956cde` | `--color-model-violet` | accent | End stop in the model-spectrum gradient and occasional product UI detail. |
| CTA Black | `#000000` | `--color-cta-black` | brand | Filled primary Get started buttons and isolated high-contrast UI text. |
| Soft Gradient Gray | `#8e8e8e` | `--color-soft-gradient-gray` | neutral | Gradient-related text tone; not a primary page color. |
| Deep Ink | `#131313` | `--color-deep-ink` | neutral | Minor dark text captured within product or interface details. |
| Deep Interface Blue | `#032f62` | `--color-deep-interface-blue` | semantic | Small blue-toned detail within product imagery, not a broad brand surface. |
| Pale Panel | `#efefef` | `--color-pale-panel` | surface | Subtle card and interface-panel variation. |

### Semantic aliases

`--color-canvas` → `#f8f8f8` (Soft Canvas) · `--color-surface` → `#ffffff` (Clean White) · `--color-text` → `#191919` (Core Ink) · `--color-text-muted` → `#7b7b7b` (Muted Graphite) · `--color-text-subtle` → `#9f9f9f` (Footer Gray) · `--color-border` → `#e9e9e9` (Quiet Divider) · `--color-accent` → `#317cff` (Signal Blue) · `--color-accent-2` → `#00a558` (Model Green) · `--color-accent-3` → `#f58e3a` (Model Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#191919` | `#f8f8f8` | 16.56:1 | AAA |
| `#191919` | `#ffffff` | 17.58:1 | AAA |
| `#7b7b7b` | `#f8f8f8` | 3.99:1 | AA-large |
| `#7b7b7b` | `#ffffff` | 4.23:1 | AA-large |
| `#9f9f9f` | `#f8f8f8` | 2.49:1 | fail |
| `#9f9f9f` | `#ffffff` | 2.65:1 | fail |
| `#317cff` | `#f8f8f8` | 3.62:1 | AA-large |
| `#317cff` | `#ffffff` | 3.85:1 | AA-large |

### Gradients

- `linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)), linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4))`
- `linear-gradient(to right in oklab, rgb(0, 165, 88) 0%, rgb(245, 142, 58) 50%, rgb(149, 108, 222) 100%)`
- `linear-gradient(88.438deg, rgba(0, 0, 0, 0.4) 0.148%, rgba(0, 0, 0, 0.8) 32.521%, rgba(0, 0, 0, 0.4) 99.852%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| inter | `--font-body` | webfont | 400, 500, 600 | Body copy, feature headings, captions, badges, and product-interface text. | Inter |
| nbInternationalPro | `--font-display` | webfont | 400 | Display and section headings, navigation, links, and button labels. | DM Sans |
| SFMono-Regular | `--font-mono` | system | 400 | Code-like labels and snippets inside product representations. | Roboto Mono |
| lato | `--font-lato` | webfont | 500, 800, 700 | Minor supporting interface text where present. | Lato |
| SF Pro | `--font-sf-pro` | system | 400, 510, 590 | System-rendered interface details and embedded product UI. | Inter |

- **inter:** Use measured regular body text and semibold feature headings; keep tracking slightly tight and case natural.
- **nbInternationalPro:** Use regular weights for a clean editorial voice; headings use tight tracking and natural sentence case.
- **SFMono-Regular:** Reserve for compact technical details; maintain a clear monospaced rhythm.
- **lato:** A small secondary presence; use sparingly and retain its measured medium-to-bold emphasis.
- **SF Pro:** Keep to product-like supporting details; avoid making it the main marketing typeface.

### 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.03em | — | nbInternationalPro | Oversized hero or prominent campaign-style headline. |
| h1 | 40px | 400 | 1.04 | -0.03em | — | nbInternationalPro | Primary hero headline. |
| h2 | 32px | 400 | 1.2 | -0.02em | — | nbInternationalPro | Major section headings across the long page. |
| h3 | 22px | 600 | 1.27 | -0.015em | — | inter | Feature-card and secondary subsection headings. |
| h4 | 20px | 400 | 1.2 | -0.01em | — | nbInternationalPro | Compact supporting headings and UI subheads. |
| body | 14px | 400 | 1.43 | -0.005em | — | inter | Explanatory paragraphs and descriptive copy. |
| caption | 13px | 400 | 1.38 | -0.005em | — | inter | Small labels, metadata, and image captions. |
| button | 16px | 400 | 1.5 | 0 | — | nbInternationalPro | Primary and secondary CTA labels. |
| nav | 14px | 400 | 1.4 | 0 | — | nbInternationalPro | Header navigation labels. |
| link | 16px | 400 | 1.4 | 0 | — | nbInternationalPro | Text links and product-resource actions. |
| code | 12px | 400 | 1.5 | 0.01em | — | SFMono-Regular | Technical snippets embedded in product UI. |

OpenType features in use: `"cv09", "cv10", "ss01"`, `"cv10", "ss01"`, `"ss01", "ss02"`, `"cv09", "cv10", "dlig", "ss01"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 20, 36, 60 px.
- Section rhythm 60px · element gap 4px · card padding — · max content width 1246px.

Use a centered content frame capped at the measured 1246px maximum width, with left-aligned content and a comfortable, open density. The header stays compact; the hero gives text and product demonstration room to breathe. Follow with varied two- and three-column showcases, then a sequence of alternating image-and-copy workflow blocks. The integrations and security sections use compact columns, while release notes pair a heading with a list. Preserve the measured 60px section rhythm and 4px base spacing logic; keep the final CTA centered above a quiet multi-column footer.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `3px` · badge `6px` · nav `9999px` · xs `3px` · sm `4px` · md `6px` · lg `8px` · xl `10px` · 2xl `12px` · pill `9999px`
- Shadow `xl` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Shadow `hairline` (card, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 10px 15px -3px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.06) 0px 8.943px 13.415px -2.683px`
- Shadow `md-3` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 13.443px 10.082px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The overall treatment is nearly flat: light canvas, fine pale borders, and subtle shadows separate interface cards from the page. Layer product panels selectively to suggest working screens and review cards. Reserve stronger depth for the hero’s overlapping mockups, and avoid heavy shadows or large decorative outlines.

## Imagery

Use product-interface screenshots and realistic software mockups as the dominant visual material, not decorative photography. Frame browser, desktop, and mobile views in layered white panels, with gentle overlap and occasional soft, atmospheric color visible within the mockups. Keep screenshots crisp, legible, and large enough to communicate workflow details. Supporting icons remain thin and understated; avoid turning interface imagery into full-bleed colorful backgrounds.

## Components

### Pill CTA

Use a black, fully rounded Get started button with white nbInternationalPro text; pair it with a light, fine-bordered Book a demo action.

### Header navigation

Keep the Devin mark and compact text links on one line, with utility actions and a filled CTA aligned at the far end.

### Hero product showcase

Pair a left-aligned headline and muted supporting copy with overlapping browser, PR, and desktop product-interface panels.

### Feature showcase cards

Use broad screenshot-led modules with concise headings and supporting copy, shifting between multi-column and alternating split layouts.

### Workflow steps

Present numbered stages with short descriptions, text links, and large product screenshots that alternate sides.

### Release list

Show dated product updates as compact rows with separators, a category label, and a small featured thumbnail.

### Footer link columns

Close with the Devin wordmark and subdued Company, Legal, and Connect link groups.

### Measured component styles

- **Primary button** (“Get started”): background #000000 · text #ffffff · radius 3.35544e+07px · padding 0px 20px · 400 16px nbInternationalPro
- **Secondary button** (“Book a demo”): transparent background · text #191919 · border 1px solid #e5e5e5 · radius 3.35544e+07px · padding 0px 20px · 400 16px nbInternationalPro
- **Link** (“Triage bugs as they land”): transparent background · text #191919 · radius 0px · padding 0px 16px · 400 16px nbInternationalPro
- **Card** (“New session Automations Security Review ”): background #fcfcfc · text #191919 · radius 12px · padding 0px · 400 14px inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“View PR”): background #363636 · text #ffffff · border 1px solid #ebebeb · radius 6px · padding 0px 12px · 500 13px inter
- **Navigation item** (“Product Solutions Resources Customers Pr”): transparent background · text #191919 · radius 0px · padding 0px · 400 16px nbInternationalPro

## Do

- Use #f8f8f8 as the dominant page canvas.
- Set core marketing headings in nbInternationalPro.
- Keep explanatory copy muted and compact.
- Use #000000 for the primary filled CTA.
- Let product screenshots carry the visual detail.
- Separate modules with whitespace and fine rules.

## Don't

- Do not introduce saturated full-width color bands.
- Do not use gradient as the page-wide background.
- Do not add decorative photography unrelated to software.
- Do not make every section a uniform card grid.
- Do not overuse shadows around simple content.
- Do not promote screenshot-only colors into the core palette.

## Agent prompt

Build a new Devin-style page with a quiet, light canvas in Soft Canvas (#f8f8f8), Core Ink (#191919) typography, white interface surfaces (#ffffff), and delicate Quiet Divider (#e9e9e9) rules. Use nbInternationalPro-like display headings and Inter-like readable body copy. Keep the header compact, the hero left-aligned, and the primary action a black (#000000) pill with white text. Organize content into spacious editorial modules rather than a uniform card grid: alternate explanatory copy with realistic product-interface screenshots, then use concise integration, update, and security blocks. Reserve Signal Blue (#317cff) and the green-orange-violet spectrum for small links or product details. Keep shadows restrained, edges subtly rounded, and product UI crisp and layered. End with a centered CTA and subdued multi-column footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact top navigation above a left-aligned headline and copy; layered product UI fills the lower hero. | Primary and secondary CTA, Product demonstration | Pill buttons, Overlapping interface panels, Muted supporting copy |
| 2 | feature-grid | Three-column feature area with a pair of broad showcases followed by three smaller product examples. | Feature discovery, Capability comparison | Screenshot-led cards, Short headings, Compact descriptions |
| 3 | feature-split | Alternating split block with explanatory copy and a large product screenshot. | Explore feature link, Workflow explanation | Numbered step, Image and copy split |
| 4 | feature-split | Single split showcase with product image and copy arranged opposite the preceding step. | Explore product link, Workflow continuation | Numbered step, Large interface screenshot |
| 5 | feature-split | Alternating image-and-copy workflow block. | One-click assignment, Explore feature link | Numbered step, Review interface panel |
| 6 | feature-split | Final alternating workflow split with screenshot, concise copy, and one text link. | Scheduled workflows, Trigger-based automation | Numbered step, Screenshot panel |
| 7 | integrations | Four-column set of integrations and task labels under a two-line heading. | Integration discovery, Task-to-tool mapping | Simple line icons, Short linked labels |
| 8 | content-feed | Two-column section: heading and featured media at left, dated update rows at right. | Browse updates, Open article | Date labels, Hairline-separated rows, Category metadata |
| 9 | feature-grid | Three-column security overview with concise claims and understated icons. | Scan security controls, Enterprise trust cues | Thin line icons, Short list items |
| 10 | cta | Centered two-line headline with paired pill actions and generous surrounding whitespace. | Start using Devin, Book a demo | Large centered text, Black primary button, Light secondary button |
| 11 | footer | Open footer with brand at left and three compact link columns aligned across the content frame. | Company navigation, Legal resources, Social links | Muted small text, Column headings, Minimal brand mark |

## Source CSS custom properties (selected)

```css
--color-dt-text: rgb(25 25 25);
--color-dt-text-secondary: rgb(25 25 25 / .56);
--color-dt-text-tertiary: rgb(25 25 25 / .4);
--color-dt-text-muted: rgb(25 25 25 / .4);
--color-dt-text-disabled: rgb(25 25 25 / .4);
--color-dt-text-inverse: rgb(255 255 255);
--color-dt-text-inverse-adaptive: rgb(255 255 255);
--color-dt-primary: rgb(49 124 255);
--color-dt-primary-tint: rgb(51 125 244 / .1);
--color-dt-blue: rgb(51 125 244);
--color-dt-purple: rgb(149 108 222);
--color-dt-green: rgb(0 165 88);
--color-dt-orange: rgb(245 142 58);
--color-dt-bg: rgb(252 252 252);
--color-dt-wash: rgb(248 248 248);
--color-dt-white: rgb(255 255 255);
--color-dt-black: rgb(25 25 25);
--color-dt-tint: rgb(0 0 0 / .04);
--color-dt-tint-faint: rgb(0 0 0 / .02);
--color-dt-tint-strong: rgb(0 0 0 / .08);
--color-dt-tint-soft: rgb(0 0 0 / .06);
--color-dt-tint-accent: rgb(49 124 255 / .08);
--color-dt-divider: rgb(0 0 0 / .08);
--color-dt-border: rgb(0 0 0 / .08);
--color-dt-border-secondary: rgb(0 0 0 / .06);
--color-dt-border-subtle: rgb(0 0 0 / .06);
--color-text-primary: rgb(25 25 25);
--color-text-secondary: rgb(25 25 25 / .56);
--color-text-inverse: rgb(255 255 255);
--color-background: rgb(252 252 252);
--color-surface: rgb(255 255 255);
--color-button: rgb(54 54 54);
--color-accent: rgb(49 124 255);
--color-border: rgb(0 0 0 / .06);
--font-base-multiplier: 1;
--tint-secondary: 0 0 0 / .06;
--text-primary: 25 25 25;
--text-secondary: 25 25 25 / .56;
--border-secondary: 0 0 0 / .06;
--text-disabled: 25 25 25 / .4;
```

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