Dashbook — Dash.fi Brand & Design System

What's in the library

Mirror of the canonical tokens, type styles, and components. Ships in 8 Figma pages matching the dashbook IA.

Variable collections

Base palette (13 primitives, single mode) · Product semantic (14 tokens, Light + Dark) · Marketing aliases (10 tokens, single mode).

Text styles

Heading display · Page label · Section header · Data value · Body lg / Body / Body sm · Caption.

Components

10 canonical with full variant trees (Button, Badge, Card, Input, Alert, Tabs, Select, Dialog, Switch, Checkbox) and 50 secondary as stubs with import paths.

Pages

Cover · Brand · Foundations · Components · Patterns · Resources · Press & Partners · Changelog.

Subscribe to the library

Internal-only. Library team subscription via Figma. Reach out to design for access.

Figma library file private · staged

Subscribe under "Resources" in your Figma team to inherit components, variables, and styles.

Tier 1 — base palette

13 brand primitives. Every hex in the system originates here. Maps to Figma collection 'dash/palette' (single mode).

css

// Tier 1 — base palette (13 primitives)
--dash-cobalt:        #354CEF
--dash-cobalt-deep:   #2A3ECC
--dash-periwinkle:    #B6C1F2
--dash-mist:          #E7E7F0
--dash-cream:         #EBEDE4
--dash-white:         #FFFFFF
--dash-yellow:        #EBFF00
--dash-yellow-glow:   rgba(235, 255, 0, 0.5)
--dash-jade:          #2B605C
--dash-jade-deep:     #123B39
--dash-ink:           #25261D
--dash-graphite:      #505148
--dash-graphite-soft: #80817A

Tier 2 — product semantic

Component-facing tokens with Light + Dark modes. Maps to Figma collection 'product/semantic' (modes: Light · Dark).

css

// Tier 2 — product semantic (light + dark)
--bg / --bg-muted / --fg / --fg-muted
--border / --input-border
--primary / --primary-fg
--brand / --brand-fg
--destructive (orange #FF4000 in lib, mono in portal)
--ring
--card / --popover

Code Connect

Every shipped Figma component links to a @dashfi/svelte import via Code Connect. Engineers select a Figma instance and the import shows up in the inspector.

Canonical 10 ship Code Connect at publication. The other 50 are documented in the handoff but Code Connect lands incrementally as the team subscribes consumer-by-consumer.
Code Connect template format: { Component } from '@dashfi/svelte/ui/{slug}'.
Variant props on Figma instances map 1:1 to component props (variant, size, disabled, etc.).

Reference docs

Two complementary files. The HANDOFF goes to a designer authoring the file; the INTEGRATION RULES go to an engineer using figma-desktop MCP to generate code from designs. Neither was migrated into core — the links point at where they still live.

FIGMA_HANDOFF.md not ported

Step-by-step instructions for a designer authoring the Figma library file. 721 lines, executable top-to-bottom. Still only in the pre-core repo — not migrated.

FIGMA_INTEGRATION_RULES.md not ported

Rules doc for engineers using the figma-desktop MCP to generate dashbook-compatible code from Figma designs. Still only in the pre-core repo — not migrated.

Open questions

From the handoff §9. Pending design / leadership input before final commit.

PP Supply Mono weight 500? The license includes 200 + 400 only. The body section-header style (currently 500 weight) renders synthetic bold without it. Decision needed on whether to license 500 or accept the synthetic bold.
Orange as 14th primitive? #FF4000 currently lives as a semantic destructive token in Tier 2. Promote it to Tier 1 (--dash-orange) to expose it as a marketing surface color?
Press kit ZIP composition — which logo + app-icon variants ship in the press-only bundle (vs the configurable per-user download)?
Editorial / News tab — adopt the Atlassian pattern of a dedicated editorial surface, or fold it under Changelog?