Lyra Story · Design System · v0.1

Components. Re-themed, not refactored.

Every piece that lives in the studio sidebar, the storyboard editor, the vault dashboard, the donor flow. Same warm-graphite background, same violet primary, same desaturated mint for money — so the studio and the vault feel like one product.

Color tokens

12 tokens · oklch
SurfacesWarm graphite. Layered from deepest (page) to highest (popover).
bg
#0c0a09
bg-1
#14110f
bg-2
#1a1614
bg-3
#221d1a
line
14% warm
fg
#f5efe6
Violet · primarySingle chromatic note. Use sparingly — the only color that earns its weight.
violet
oklch(.62 .22 285)
violet-2
oklch(.55 .22 285)
violet-soft
oklch(.32 .12 285)
violet-ink
oklch(.92 .04 285)
Mint · moneyDesaturated. For balances, donations, common pool growth. Bank statement, not trading app.
mint
oklch(.82 .08 175)
mint-2
oklch(.70 .09 175)
mint-ink
oklch(.95 .03 175)
warn
oklch(.78 .12 70)
err
oklch(.65 .18 25)

Typography

Fraunces · Inter · JetBrains Mono
Display · 72/0.94
Direct your AI shoot.
H1 · Fraunces 48
The studio + the vault for AI filmmakers.
H2 · Fraunces 36
Get paid for the work you're making now.
Body lg · Inter 17
Every Lyra Story creator gets a vault auto-created at signup. Patrons send any amount. You see the balance in real time.
Body · Inter 14
Drag in dozens of brainstormed Midjourney exports per shot. Promote four (or nine) to keyframes when you're ready.
Mono · JetBrains 12
scene_03/beat_02/storyboard.compose · v3 · 2026-05-12
Numeric · tabular
$487,213.40
Eyebrow · 11/0.16em
The Studio

Radii & shadow

conservative · 4 → 16
Radii
4
6
8
10
16
Shadow

Buttons

primary · ghost · sm · lg
PrimaryViolet fill. One per surface, max.
GhostBorder only. Secondary actions, pairs with primary.
Disabled

Inputs

text · textarea · select · search
Text
Must be a valid email.
Search
TextareaSelection notes, prompts — monospace.
Currency input
$
Select

Toggles, checkboxes, radio

Switch
Checkbox
Radio

Segmented & tabs

Segmented
Tabs

Badges & chips

Status badge
DraftComposingLiveCooldownFailed
Storage badge
Browser-localSDK-linkedS3 backup · 2m ago
Prompt version
v1autov2autov3edit
Reputation (Bankr)
VVerifiedTTrusted· tier IIEEstablished· tier III

Tooltips & toasts

Tooltip
1.8× · backing $3,280 retained
Toast — success
Donation received · $50.00 from m.tanaka
"keep going" · 2s ago
Slot A2 promoted to keyframe
prompt regenerated · v3
Sync daemon disconnected
retrying in 5s · check @lyra-mcp/sync

Slot tile

storyboard editor · 2×2 / 3×3
StatesEmpty (dashed), filled (with score), and the 2×2 composition.
A1drop or generate
A1
0.92
A2
0.88
2×2 compositionAuto-composed grid for Seedance prompt.
A1
0.92
A2
0.88
B1
0.84
B2
0.91

Storyboard card

project view mini-grid
Card
Beat 02 · Threshold
Composed
47 candidates · 4 promoted · v3
Beat 03 · Crossing
Empty
0 candidates · scaffold to begin

Score panel

4-dimension rubric · selection note required
Rubric

cand_104 · A2

scored 14m ago · by elena
Spec fidelity
0.88
Tonal fit
0.92
Narrative
0.74
Generative
0.81
Silhouette reads at 24px. Color matches B1 background. Promote.

tree.yml preview

file is the truth
Code block
beat_02/tree.yml38 lines
# lyra-story v0.9
scene: "03_arrival"
beat: "02_threshold"
grid: 2x2
slots:
- id: A1 scores: { spec: 0.92, tonal: 0.88 }
- id: A2 parent: cand_104

Vault balance card

creator's primary surface
Currency amountTabular numerals. Fraunces for display sizes.
$4,827.40$250.00$50.00
Balance card
E
elena.lyra
vault · 0x7a3c…f29b
Live
$4,827.40
$312.00 this week · 8 donations

Backing meter

Community backing
Community Backing$3,280 / $4,827
68% retained · next tier at 75%

Multiplier display

Pool multiplier
1.5×Tier I1.8×Tier II2.0×Tier III
Onboarding ladder
1Vault created
2Bio added
3Portfolio upload
4Pool review

Transaction row

Activity list
Recent activitylast 7 days
m.tanaka
"keep going" · 2h ago
+ $50.00
Withdraw → bank
3d ago
− $1,200.00
Common Pool grant
request #214 approved · 6d ago
+ $2,400.00

Pool request status

Status pills
SubmittedUnder review · 2 of 3ApprovedCooldown · 8d remainingRejected
Request card
REQUEST #214
arrival_short · post-production grant
Approved
Requested
$2,400.00
Multiplier
1.8×
Linked storyboards
14 beats

Empty states

No projects

No projects yet

Scaffold a scene to get started. Your project lives as tree.yml in a folder you pick.

No donations

No donations yet

Share your vault link. Every donation lands instantly — no approval, no fee.

Loading skeletons

Vault balance
Storyboard card

Dialog

Confirm withdraw
Withdraw to bank

You're about to withdraw $1,200.00 to …••3284. Funds typically land in one business day. This reduces your community backing.

After withdrawal
$3,627.40
New multiplier
1.6×