Continue — design system & UI screens
Continue is an AI coding agent and developer tool that was acquired by Cursor. This announcement screen communicates the news to the community with reassurances about mission, data, and subscriptions. The layout uses a split design: left-aligned text content with headline, explanation, and collapsible FAQ section; right side features an abstract, generative purple and blue data visualization.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/continue.
Decoded design system
Continue's decoded design system: background #FFFFFF, text #020817, accent #020817, link #020817, primary #F9B4B4; type scale h1 36px / h2 14px / body 12px; 4px spacing base; 6px base radius. The single interactive/action color is #020817 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #EFF0F1 |
| border | #D9D9DC |
| text | #020817 |
| text_muted | #62656F |
| primary | #F9B4B4 |
| accent | #020817 |
| link | #020817 |
| secondary | #FDECEC |
Using these colors
- Action color
#020817— the single interactive color; only on things you click or must notice, never large fills. accent,linkare all#020817— one role, not several (the action color).- accent
#020817— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - primary
#F9B4B4— a brand color — but the call-to-action uses #020817, not this. - secondary
#FDECEC— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: IBM Plex Sans
- Body: IBM Plex Sans
- Mono: IBM Plex Mono
- h1: 36px
- h2: 14px
- body: 12px
Spacing
- base unit: 4px
- scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px
Radii
- base: 6px
- button: 6px
Motion
Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).
- durations: 150ms · 200ms
- easings:
cubic-bezier(0.4, 0, 0.2, 1) - animated properties: color, background-color, border-color, text-decoration-color
Native design tokens
| Token | Value |
|---|---|
--gray-050 | #fafafa |
--gray-100 | #f4f4f5 |
--gray-200 | #e4e4e7 |
--gray-300 | #d4d4d8 |
--gray-400 | #a1a1aa |
--gray-500 | #71717a |
--gray-600 | #52525b |
--gray-700 | #3f3f46 |
--gray-800 | #27272a |
--gray-900 | #18181b |
…and 110 more measured on the page.
Layout (measured)
- nav: 21px
Overlay recipe (measured)
dialog panel: rgba(0, 0, 0, 0) · radius 0px
Responsive (measured)
- breakpoints: 768px
- mobile (390px): hero 30px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →