Encore — design system & UI screens

Dev Tools · 1 screen · 2 sections · https://encore.dev/

Clean light dev-tool landing; a bold headline beside a TypeScript encore.ts code panel and terminal, a CI-workflow flow diagram, and a 'Loved by 200+ engineering teams' award-badge row.

Open in Mozaika →

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/encore.

Decoded design system

Encore's decoded design system: background #EEEEE1, text #111111, accent #FFB84A, link #FFB84A, primary #6D89FF; type scale h1 64px / h2 48px / body 20px; 10px spacing base; 0px base radius. The single interactive/action color is #111111 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#EEEEE1`
surface	`#E0E0D4`
border	`#CCCCC1`
text	`#111111`
text_muted	`#646460`
primary	`#6D89FF`
accent	`#FFB84A`
link	`#FFB84A`
secondary	`#B3D77E`
button_bg	`#111111`
button_text	`#EEEEE1`

Using these colors

Action color #111111 — the single interactive color; only on things you click or must notice, never large fills.
accent, link are all #FFB84A — one role, not several (the action color).
accent #FFB84A — accent for emphasis — keep it rare on the page.
primary #6D89FF — a brand color — but the call-to-action uses #111111, not this.
secondary #B3D77E — 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: SFMono-Regular
Body: SFMono-Regular
Mono: SFMono-Regular
h1: 64px
h2: 48px
body: 20px

Spacing

base unit: 10px
scale: 5px, 10px, 15px, 20px, 30px, 40px, 60px, 80px

Radii

base: 0px
button: 0px

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →