Cosmo Design System , Production playground

Live render of every component class shipped in cosmo-prod/packages/front/src/design-system/. Edits to those CSS files appear here on save (browser refresh).

tokens.css + components.css imported via relative path , local DS at cosmo-design/design-system/ not used.

Sync status

Drift vs local DS

Production DS at cosmo-prod/packages/front/src/design-system/ compared to local DS at cosmo-design/design-system/ as of 2026-05-07.

Token drift
Light theme: --bg-app , prod cream-50, local cream-100
Dark theme: --bg-app + --bg-panel , prod merged both to oklch(20% 0.008 75); local kept canvas at oklch(8%)
Class drift , 6 classes in production only
.auditor-identity + .auditor-identity-role + .auditor-identity-text , combined identity block
.nav-sidebar , sidebar nav scope wrapper
.qb-body + .qb-group , quota-backlog children
Brand

Logos

Canonical SVGs ship in cosmo-prod/packages/front/src/design-system/assets/. Both use fill="currentColor" so consumers color them via the parent color property , no SVG editing needed for theme variants.

Cosmo logo , product mark
Cosmo Cosmo Cosmo Cosmo
18 / 24 / 35 (native) / 56 px , constrain by height, let width auto
Sett logo , parent brand
Sett Sett Sett Sett
14 / 20 / 30 (native) / 48 px
Color treatments via currentColor
Cosmo
On --bg-app · on --ink-900 (dark) · on --accent
To recolor inline: inline the SVG markup (don't <img>) and set color on the parent. <img> embeds isolate from page CSS so they won't inherit; use <object> or inline markup for theming.
Usage , inline SVG (recommended for theming)
<span style="color: var(--ink-700);">
  <svg width="86" height="30" viewBox="0 0 86 30" ...> ...paths fill="currentColor"... </svg>
</span>
File paths
cosmo-prod/packages/front/src/design-system/assets/sett-logo.svg
cosmo-prod/packages/front/src/design-system/assets/cosmo-logo.svg
Foundations

Color

Semantic surface tokens render the structural backbone (canvas, panel, sunken, raised). Brand and status palettes drive accents and tags.

Surface tokens
--bg-appcanvas , page background
--bg-panelfloating panel / topbar
--bg-sunkennested input / hover sunken
--bg-raisedraised card / popover
--ink-700primary text
--ink-mutedsecondary text
--ink-softtertiary text
--accentbrand accent (orange)
--lineborders / dividers
Cream ramp
cream-50
cream-100
cream-200
cream-300
cream-400
cream-500
Ink ramp
ink-100
ink-300
ink-500
ink-700
ink-800
ink-900
Status ramps
green-100
green-200
green-500
green-600
green-700
amber-100
amber-200
amber-500
amber-600
amber-700
red-100
red-200
red-500
red-600
red-700
orange-100
orange-200
orange-500
orange-600
orange-700
Foundations

Typography

Three families. --font-display (Barlow) for headings + brand. --font-ui (Red Hat Text) for body. --font-mono (Rubik) for numbers + tags + IDs.

Weekly delivery board
Capacity defaults
Section heading
Body copy , Red Hat Text 14px regular. Auditor sees the next two playables they should pick up. Coin Rain on Solitaire Cash, Pop Frenzy on Bubble Cash.
Secondary body copy , 13px ink-muted for descriptions and metadata.
Mono eyebrow , uppercase 11px
PLY-001 · ORCH-2600 · 2026-04-10
Foundations

Spacing

Eight-step spacing scale anchored on 4px. Most components compose at --space-2 through --space-4.

--space-14px
--space-28px
--space-312px
--space-416px
--space-520px
--space-624px
--space-732px
--space-840px
Foundations

Elevation

Surface stack. Most chrome lives at panel; popovers and floating panels lift to raised.

--bg-sunken
--bg-panel
--bg-raised
Atoms · 01

Buttons

Six variants × three sizes. Use accent sparingly , one per view.

Variants (md)
Sizes
Disabled
Icon button (32×32 ghost)
Accent small (inline affordance)
.btn + .btn-{primary,accent,secondary,ghost,danger,link} + .btn-{sm,md,lg} · .icon-btn · .btn-accent-sm
Atoms · 02

Tags

Single component for every label, badge, and status pill. Modifiers across tone, size, shape, treatment.

Tones
Neutral Green Amber Red Blue Orange Ink Ink-mid
Sizes & shapes
Default Small T1 T2 T3 T1 Pipeline phase
Treatments
Outline Alert border ? Unknown 5V quota
With icon
Approved Stuck Building
Legacy aliases (still supported)
On track Behind At risk No start Done Delivered T1 2d R V
.tag + tone .tag--{green,amber,red,blue,orange,ink,ink-mid} · size .tag--sm · shape .tag--{square,square-lg,pill} · treatment .tag--{outline,alert,fail,cased}
Atoms · 03

Badges & chips

Specialized count + status pills that aren't part of the .tag family.

Count badge
3 12 In review
SLA chip
SLA 14:00 2h left
Status dot
Type chip (R / V)
R V R V
Game chip (with count)
Solitaire Cash 3
Bubble Cash 2
Filter pill
.badge · .count-badge · .phase-tag · .sla-chip · .status-dot · .type-chip{,-r,-v} · .bt-r · .bt-v · .game-chip · .filter-pill · .tier-badge
Atoms · 04

Inputs

Form controls share border + accent focus ring.

Assigned to playable
Past due
.field + .field-label + .field-hint · .input + .input-error · .select · .checkbox + .checkbox-row + .checkbox-label
Atoms · 05

Avatars

Initial-letter avatars for auditors and TLs.

Sizes
NB VM AB TI 3
.avatar · .entity-av + .entity-av-circle + .entity-av-circle--sm + .entity-av-sq + .entity-av-badge
Production only · Atoms · 06

Auditor identity

Combined avatar + name + role block. Production DS exclusive , not in local DS yet.

NB
Nemanja Batinic Auditor
TI
Tatiana Iudina Team Lead
.auditor-identity · .auditor-identity-text · .auditor-identity-role
Cards · 01

Playable card

Full-fat card used in detail lists and stage views. Real data from PLY-001 / PLY-003.

PLY-001 Approved
Coin Rain
T2 V
GameSolitaire Cash
AuditorNemanja Batinic
OwnerBarzel
Delivered 2026-04-10
PLY-003 Building
Pop Frenzy
T2 V
GameBubble Cash
AuditorAnastasiia Buhaichuk
OwnerGal
SLA 2026-04-12 17:00
Cards · 02

Ply card (compact)

Dense card used inside kanban lanes.

PLY-002 V
Spring Sweep
Solitaire Cash Coin Rain
PLY-003 V
Pop Frenzy
Bubble Cash Pop Frenzy
Cards · 03

Entity card

Used in directories , partner, auditor, game listings. Stat row across the bottom.

PG
Papaya Gaming
12 active orchestrations
8Solitaire Cash
3Bubble Cash
1Bingo Frenzy
NB
Nemanja Batinic
Auditor · 4 in flight
12Delivered
2In rev
94%SLA
Cards · 04

Tier card

Display tier rollup , partner count + active playables.

T1
3 partners
18 active playables
T2
7 partners
21 active playables
T3
2 partners
6 active playables
Cards · 05

Rcard

Revision card variant , used in revision lists.

Round 2 revision , timing
PLY-001 · TL: Tatiana Iudina · 2026-04-09
Client feedback , VFX punch
PLY-014 · Partner: Papaya · 2026-04-22
Data viz · 01

KPI strip

Top-of-page metric tiles with optional delta.

Delivered this week
17
+3 vs last week
In review
8
,
Behind
2
+1 vs last week
SLA compliance
94%
+2pp
.kpi-strip > .kpi > .kpi-label + .kpi-value + .kpi-delta
Data viz · 02

Progress

Linear progress with title, percent, and animated fill.

Week 19 capacity 67%
Data viz · 03

Capacity bar

Auditor / TL load , label + fraction + fill. Used in kanban headers.

Nemanja
3/4
Veljko
4/4
Anastasiia
2/4
Data viz · 04

Load bar

Compact load indicator with optional count label.

4 / 10
8 / 10
10 / 10
Data viz · 05

Distribution bar

Stacked bar showing proportion across statuses.

Data viz · 06

Segmented bar

Grouped segments with legend. Often used to visualize quota status by tier.

9
5
2
9T1 5T2 2T3
Overlays · 01

Popover

Floating menu attached to a trigger. Static demo (no live anchoring).

Filter by tier
T13
T27
T32
Reset
Pop variant (heavier head + footer)
Days off this week
Nemanja2 days
Veljko,
Anastasiia1 day
Overlays · 02

Context menu

Right-click style menu , kebab triggered.

Edit
Duplicate
Archive
Delete
Overlays · 03

Empty state

No playables this week
Nothing scheduled for week 19. Add a playable from the backlog or assign one from the queue.
Overlays · 04

Alert

Sync in progress
Pulling latest from Monday.com , 23 of 47 records.
Build complete
PLY-001 Coin Rain delivered to client.
SLA at risk
PLY-003 Pop Frenzy SLA in 2 hours and still in build.
Build failed
PLY-018 timed out on remote build farm. Retry or escalate.
Overlays · 05

Toast

Saved , PLY-001 reassigned to Veljko
Layout · 01

Topbar

Cosmo
/ Weekly
IR
Layout · 02

App topbar

3-zone topbar , start / center / end.

Cosmo
Week 19 May 4 , May 8
IR
Layout · 05

Section header

Solitaire Cash
3V quota T1
Layout · 06

Group header

Nemanja Batinic 3
Layout · 07

Floating panel

Quick add
Floating action panel anchored to a trigger button.
Layout · 08

Thin scrollbar

Scroll inside this box to see the thin scrollbar treatment.
Composed · 01

Week selector

Week 19 May 4 , May 8
Composed · 02

Team picker

Composed · 03

Kanban lane

Auditor lane with capacity row, vacation popover, and stacked playable cards.

NB Nemanja
3
PLY-001V
Coin Rain
Solitaire Cash
PLY-002V
Spring Sweep
Solitaire Cash
PLY-007R
Burst Mode
Bubble Cash
VM Veljko
4
PLY-004V
Sky Falls
Solitaire Cash
PLY-005V
Power Surge
Bingo Frenzy
AB Anastasiia
2
PLY-003V
Pop Frenzy
Bubble Cash
Composed · 04

Detail panel

Right-side detail drawer , title, type, meta, pipeline, timeline.

Version · NV
Coin Rain
PLY-001 · Solitaire Cash · Papaya Gaming
Meta
AuditorNemanja Batinic
TLTatiana Iudina
TierT2
SLA2026-04-12 14:00
Pipeline
Createdapr 7
Auditapr 9
Buildapr 10
Deliveredapr 10
Timeline
Created
2026-04-07 09:00
Assigned to Nemanja Batinic
2026-04-07 11:00
TL returned for fix
2026-04-09 09:20
TL approved
2026-04-10 09:30
Delivered to client
2026-04-10 11:15
Composed · 05

Observed detail panel

Live observation flavor of detail panel , tabs, ideas card, feedback form.

Concept · NC
Pop Frenzy
PLY-003 · Bubble Cash
Auditor submitted for TL review
2026-04-09 17:00
TL returned with note
"Pop pacing feels mushy , double the satisfaction frame on each cluster."
2026-04-10 09:20
Composed · 06

Manage quotas

Modal for editing weekly V/R quotas per game.

Manage quotas
Monthly
Solitaire Cash
V
R
Bubble Cash
V
R
Bingo Frenzy
V
R
2 unsaved
Production only · Composed · 07

Quota backlog

Backlog grouped by auditor with body + group classes (prod-only). Lane preview.

Nemanja Batinic 3
PLY-024V
Bubble Crush
Bubble Cash
PLY-026V
Frost Bite
Solitaire Cash
.qb-panel > .qb-body > .qb-group
Composed · 09

Priority slot

Auditor's priority queue placeholder slot , empty + filled.

,
Empty slot 1
PLY-001 V
Coin Rain
Solitaire Cash
PLY-007 R
Burst Mode
Bubble Cash
Composed · 10

Drag states

Visual treatments during drag operations.

Dragging
PLY-001V
Coin Rain
Drop target
PLY-002V
Spring Sweep
Drop zone active
Release to drop here