feat: add vault colour and type design tokens

[luchobonatti]

Summary

Closes #98

The components in #83 share one palette and two type families. Without a single place holding them, each stylesheet repeats the same hex values and rebranding a white-label instance means editing all of them.

Changes

• The vault's fourteen colours are defined once, named by use
• Fifteen type roles are available as composable classes
• Space Grotesk and JetBrains Mono load alongside the fonts already linked

Acceptance criteria

• The fourteen colours are defined, named by use rather than by scale
• Both type families and the sizes the prototype renders
• The prototype's three breakpoints
• Values mirror the design and are not rounded
• The two families load from Google Fonts, as the design does

Test plan

No component consumes these yet, so nothing exercises them at runtime.

Automated tests

1. npm run test — 8 passing, unchanged. This slice adds none.
2. npm run build --workspaces --if-present — passes.

Manual verification

1. npm run dev, open the app, and confirm in devtools that :root carries the --vault-* properties.
2. In the network tab, confirm one Google Fonts request covering four families.
3. Confirm the existing UI still renders in Inter, unchanged.

Breaking changes

None.

Checklist

• Self-reviewed my own diff
• Tests added or updated
• Docs updated (if applicable)
• No unrelated changes bundled in

Screenshots

None.

[Copilot]

🟡 Changes recommended

The acceptance criteria call for breakpoint tokens and 14 colors, but the diff adds no breakpoint tokens and currently defines 15 semantic color variables (including an alias).

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds centralized vault design tokens (colors + typography) to reduce repeated hex/font declarations across vault UI primitives and support rebranding from a single source.

Changes:

• Introduces :root CSS custom properties for vault color + font tokens.
• Adds a CSS module with 15 typography role classes that reference the new font tokens.
• Loads Space Grotesk + JetBrains Mono via Google Fonts and wires the token sheet into the app entrypoint.

File summaries

File	Description
app/src/styles/type.module.css	Adds typography role classes (sans + mono) intended for reuse across vault components.
app/src/styles/tokens.css	Defines vault CSS variables for semantic color roles and font families.
app/src/main.tsx	Imports the new token stylesheet so variables are available at runtime.
app/index.html	Extends the Google Fonts request to include Space Grotesk and JetBrains Mono.

Review details

• Files reviewed: 4/4 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.