Disco Capital
Design System

Color usage

• Marks are monochrome by default. Default is white on the dark app background.
• Use --green-500 only for celebratory contexts (post-investment confetti, splash on first launch).
• Never recolor outside the brand palette. No reds, oranges, or rainbow gradients on the marks.
• On the rare light background, use --bg-app (#0D0E11) as the foreground.

Clear space & minimum sizes

• Clear space. Maintain a margin equal to half the ball's diameter on all sides. No text, line, or edge inside that buffer.
• Minimum sizes. Ball mark: 16px square. Horizontal lockup: 88px wide. Stacked lockup: 64px square. Slogan lockup: 240px wide.
• Below these thresholds the type and slogan become illegible — fall back to the ball mark.

Production note

For final exports (App Store icon, OG image, print), outline the type in Illustrator before exporting so the lockups don't depend on the Satoshi font being available. Source .svg files live at ~/Desktop/DISCO - CoWork/Design System/logos/.

Do's & don'ts

Backgrounds

Hero — neon green

Accents

Sector / category coding

Eight hues, evenly spread around the wheel. Every pair is at least 25° apart so each sector is unmistakable on a dark surface. Lock these mappings — don't improvise per screen.

Stacked chart sequence

When a chart needs more than two colors, walk this sequence top-to-bottom.

Color do's & don'ts

Metric display pattern

The most-repeated layout in the app. Use it everywhere a value needs context.

Three-metric strip (Hyper Charts)

Inherited verbatim from Hyper Charts XL widgets. A row of three metrics above a chart.

Element glow palette

Canonical recipe

box-shadow:
  0 0 8px  rgba(R,G,B,0.40),
  0 0 20px rgba(R,G,B,0.20),
  0 0 40px rgba(R,G,B,0.10);

Ambient card glow (featured)

Glow do's & don'ts

Inactive state

Active state — hot-pink fill + glow (uniform across all tabs)

Bottom-nav demo (one tab active)

Active token

all tabs (active) → --hot-pink-500   (#FF3B7A)
glow recipe       → drop-shadow 4px / 10px / 20px @ 40% / 20% / 10% alpha
inactive          → #FFFFFF @ 0.85 opacity, no filter

Uniform hot-pink keeps the active affordance instantly recognizable across every screen. The brand color becomes the "you are here" signal — no per-tab learning required.

Implementation notes

• Single source. SVGs use fill="currentColor" so the icon color is driven entirely by parent CSS — no duplicate active/inactive markup.
• Glow recipe. Active state uses three layered drop-shadow() filters at 40% / 20% / 10% alpha — same canonical recipe as element glow.
• Transitions. 200ms ease on filter and color; tap feels responsive without flickering.
• One active at a time. Only the current screen's nav icon glows. Others stay white. Mirrors the "at most one featured card per screen" glow discipline.

Do's & don'ts

Buttons

Inputs

Chips, badges, sectors

Segmented control

Progress bars

Tab bar (iOS)

Six tabs, matching the production app. Active tab uses hot-pink.500 with element glow — uniform across all tabs; inactive uses text.tertiary.

Toast / banner

Widget header anatomy

[Title] ───────────────── [✦]
[$Metric] [↑Delta]
[Compared to ... last X]
─────────────────────────────
[Chart fills remaining space]

Widget size tiers

Small tiles for inline metrics, the Large card for full analytics surfaces. The Large carries the three-metric strip and a footer table.

The eleven chart types

Wallet hero card

Dance Floor card (round in progress)

Inline company link (Greenroom)

Holding list card

Anatomy

States

Tokens

header.label.idle      → --green-500          ("All Categories")
header.label.active    → --green-500          ("9 Filters Active")
header.separator       → --text-tertiary     "·" between label and count
header.count           → --text-secondary    mono, 13px, 500 weight ("23 Rounds")
chip.bg.idle           → transparent
chip.text.idle         → --text-secondary
chip.border.idle       → --border-card
chip.bg.active         → --green-500          (#00E87B)
chip.text.active       → #062612            (high-contrast on green)
chip.glow.active       → 0 0 12px rgba(0,232,123,0.18)
group-label            → --text-tertiary     mono, 10px, uppercase, 1.2px tracking
clear-all.idle         → --text-tertiary     ghost button
clear-all.hover        → --red-500          destructive accent on hover

Behavior rules

• Multi-select within each group. Picking "Series A" doesn't deselect "Series B". Users can mix freely across all three groups.
• No mutual exclusion. No filter blocks any other.
• No cap. User can select every chip if they want.
• Persistence. Selected filters survive when the user navigates away from the screen and comes back. Wipe only on Clear All or session reset.
• Live header label. "{N} Filters Active" updates in real time. When N=0, label reverts to "All Categories".
• Live header count. "{N} Rounds" suffix in the header always reflects the current filtered result count. Updates as filters are added or removed. When no filters are active, this shows the unfiltered total. Group labels stay purely descriptive — counts live ONLY in the header.
• Two-way deselect. Removing a chip from the summary bar (× button) ALSO un-fills it in the dropdown. Same chip, two views.
• Clear All button is visible in the summary bar whenever ≥1 filter is selected. One tap removes everything; header reverts to "All Categories"; summary bar disappears.
• Collapse independent of selections. User can collapse the dropdown without losing selections. The summary bar stays visible if there are any active filters.

Do's & don'ts

Glow-pulse (featured cards, live indicators)