Plane — design system & UI screens

Productivity · 1 screen · 13 sections · https://plane.so/

Light hero over a dense project-tracker product UI with sidebar, work items and cycles.

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

Decoded design system

Plane's decoded design system: background #F7F7F8, text #1D1F20, accent #006399, link #006399, primary #006399; type scale h1 58px / h2 44px / body 16px; 8px spacing base; 8px base radius. The single interactive/action color is #090B0C — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#F7F7F8`
surface	`#E9EAEB`
border	`#D6D6D7`
text	`#1D1F20`
text_muted	`#6F7172`
primary	`#006399`
accent	`#006399`
link	`#006399`
button_bg	`#090B0C`
button_text	`#FFFFFF`

Using these colors

Action color #090B0C — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, link are all #006399 — one role, not several (the action color).
accent #006399 — accent for emphasis — keep it rare on the page.

Typography

Heading: Satoshi
Body: Inter
h1: 58px
h2: 44px
body: 16px

Spacing

base unit: 8px
scale: 2px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 32px

Radii

base: 8px
button: 8px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 300ms
easings: cubic-bezier(0.4, 0, 0.2, 1)
animated properties: color, background-color, border-color, outline-color

Native design tokens

Token	Value
`--alpha-white-0`	`lab(100% 0 0/0)`
`--alpha-white-100`	`lab(100% 0 0/.05)`
`--alpha-white-200`	`lab(100% 0 0/.1)`
`--alpha-white-300`	`lab(100% 0 0/.15)`
`--alpha-white-400`	`lab(100% 0 0/.2)`
`--alpha-white-500`	`lab(100% 0 0/.3)`
`--alpha-white-600`	`lab(100% 0 0/.4)`
`--alpha-white-700`	`lab(100% 0 0/.5)`
`--alpha-white-800`	`lab(100% 0 0/.6)`
`--alpha-white-900`	`lab(100% 0 0/.7)`

…and 110 more measured on the page.

Button states (measured)

primary hover: background lab(11.5955 -0.604004 -0.857303)
primary focus: background lab(34.7974 -1.3694 -1.94997)

Layout (measured)

container max-width: 1260px
nav: 58px
common grid: 3 columns

Motion choreography (measured)

Scroll reveal: 2 elements rest at opacity 0, animate in over 0.3s cubic-bezier(0.4, 0, 0.2, 1).

Responsive (measured)

breakpoints: 640px · 768px · 1024px · 1280px · 1536px
mobile (390px): hero 36px · nav hamburger

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

Screens

Project and knowledge management for teams and agents