C
Cockpit
WorkspaceDashboardInboxMarketing decisionsStandupDaily digestMeetingsClustersBacklog
BrandsVaraUni SeoulStylish Wodrobe
ProjectProjectsPeopleBuild progress
SystemShopify provisioningCMS syncDesign systemInfra health
AB
Abhishek Jajodia (auth bypass)

Design system

ck2 · ported from Figma Make
Foundations
Language
Assembly
Surfaces
Governance
Principles

The Cockpit doctrine

A bright, inviting operations system. Minimal and editorial — energy comes from chips, avatars, and one Coral moment, never from colored panels.

TenetWhat it means
White leadsScreens are 80% white. Color is an event, not a fill.
Blue actsOne blue voice for every action — links, buttons, nav, focus, selection.
Coral excitesOne coral eye-catcher per screen, never more than twice.
One ink, no grayEvery neutral is ink at an opacity; gray is rare and structural only.
Fluid firstLayouts reflow continuously; mobile is the same components, never a redraw.
Components onlyEvery screen is assembled from this kit — bespoke one-offs are a bug.
Every state designedLoading, empty, error and overflow all look intentional.
Show it before you say itA graphic before a table, a table before prose.
Languagehow it looks
01

White leads, color punctuates.

Screens are 80% white. Color is an event, not a fill.

02

One ink, mixed by light.

Every neutral is ink at an opacity. There is no gray in this system, anywhere.

03

Blue acts, Coral excites.

Two voices only: blue for every action, coral for the one thing worth your eye.

04

Garnish is identity, never meaning.

Avatars and tags may be playful; buttons and statuses may not.

05

Hairlines, not boxes.

Separation by 1px ink-8% lines and air. Shadows exist only for things that float.

Structurehow it's built
06

Fluid first, breakpoints last.

Layouts are fluid grids that reflow continuously; nothing has a fixed width. Mobile is the same components reflowed, never a second design.

07

Components, not pages.

Every screen is assembled purely from kit components. If a page needs something new, it gets designed here first — bespoke one-offs are a bug.

08

Built for every state.

A component isn't done until loading, empty, error, overflow and absurd-data all look intentional.

09

Compact and self-evident.

Dense 44px rows, mono numbers, tabular alignment, big calm margins — and zero learning curve.

Behaviorhow it acts
10

Show it before you say it.

Every dataset earns a graphic first: a sparkline, bar, ring or dot-row before a table. Prose is the last resort.

11

Calm at rest, alive in motion.

Nothing moves until you touch it; everything responds in 140ms when you do.

12

Numbers are heroes, words are warm.

Metrics render large in mono; microcopy talks like a colleague, never like a database.