fintechv1.0.0·dark

Vault

Vault — Dark Premium Fintech

fintechdarkemeraldpremiumcrypto

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

vault · rendered from tokens

Color

brand.primary

oklch(0.7 0.15 162)

brand.secondary

oklch(0.72 0.1 200)

brand.onBrand

oklch(0.18 0.02 162)

text.primary

oklch(0.96 0.005 165)

text.muted

oklch(0.72 0.012 165)

text.link

oklch(0.7 0.15 162)

surface.base

oklch(0.18 0.012 165)

surface.raised

oklch(0.225 0.014 165)

surface.sunken

oklch(0.145 0.01 165)

border.default

oklch(0.32 0.014 165)

state.success

oklch(0.74 0.15 155)

state.danger

oklch(0.68 0.2 25)

state.warning

oklch(0.8 0.15 80)

state.info

oklch(0.74 0.13 230)

Typography

3xlThe quick brown fox

2xlThe quick brown fox

xlThe quick brown fox

lgThe quick brown fox

baseThe quick brown fox

smThe quick brown fox

Components

Buttons

Inputs

Fintech

Selection

Notifications

AutoManual

Feedback

successdangerwarninginfo

Tokens validatedAll contrast checks pass WCAG AA.

Data

AMRKJD+5

2,847+12%

Storage64%

Navigation

OverviewTokensActivity

Home/Library/Item

123

Cards

Confetti

A bright, joyful design language with playful motion.

Pro

$12/ mo

Unlimited exports

Private systems

Priority support

Aria Moss

Owner

success

Ravi Kohli

Editor

info

Lena Park

Viewer

warning

Radius, shadow & spacing

full

Use this system

Three ways to drop Vault into your workflow.

Save the file for your tool — your agent then generates UI in Vault, automatically.

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/vault.mdc

Project rule — applied to every generation.

WsWindsurf

.windsurfrules

Repo root — Cascade reads it automatically.

GCGitHub Copilot

.github/copilot-instructions.md

Repo-wide custom instructions for Copilot.

The system

Brand & Voice

Vault is for money that lives on screens at midnight. Near-black surfaces make emerald gains glow; the mood is high-end, technical, and a little nocturnal. Restraint everywhere except the single luminous accent.

Layout & Grid

Deep color.surface.base canvas with raised cards for balances and charts. Spacing is generous so charts breathe; monospace handles every figure.

Components

Buttons

Primary actions use the emerald color.brand.primary with dark onBrand text. Ghost buttons rely on color.border.default.

Charts & Cards

Cards float on shadow.md; gains and losses pair color.state.success and color.state.danger with arrows and signs.

Accessibility

Light text and muted text both pass WCAG AA against the dark surfaces. The accent is bright enough to read as a link, and motion stays under 200ms.

Tokens

Color (14)

Tokens

breakpoint

iconography

motion

radius

shadow

spacing

typography

zIndex

Export

One source of truth, five formats — copy or download any of them.

design.md97 lines

1---

2$schema: https://designmd.in/schema/v1.json

3id: vault

4name: Vault

5title: Vault — Dark Premium Fintech

6version: 1.0.0

7category: fintech

8tags: [fintech, dark, emerald, premium, crypto]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [dark]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.7 0.15 162)", type: color }

17 secondary: { value: "oklch(0.72 0.1 200)", type: color }

18 onBrand: { value: "oklch(0.18 0.02 162)", type: color }

19 text:

20 primary: { value: "oklch(0.96 0.005 165)", type: color }

21 muted: { value: "oklch(0.72 0.012 165)", type: color }

22 link: { value: "{color.brand.primary}", type: color }

23 surface:

24 base: { value: "oklch(0.18 0.012 165)", type: color }

25 raised: { value: "oklch(0.225 0.014 165)", type: color }

26 sunken: { value: "oklch(0.145 0.01 165)", type: color }

27 border:

28 default: { value: "oklch(0.32 0.014 165)", type: color }

29 state:

30 success: { value: "oklch(0.74 0.15 155)", type: color }

31 danger: { value: "oklch(0.68 0.2 25)", type: color }

32 warning: { value: "oklch(0.8 0.15 80)", type: color }

33 info: { value: "oklch(0.74 0.13 230)", type: color }

34 typography:

35 family:

36 sans: { value: "Geist, system-ui, sans-serif", type: fontFamily }

37 mono: { value: "Geist Mono, ui-monospace, monospace", type: fontFamily }

38 scale:

39 sm: { value: "0.875rem", type: dimension }

40 base: { value: "1rem", type: dimension }

41 lg: { value: "1.25rem", type: dimension }

42 xl: { value: "1.6rem", type: dimension }

43 "2xl": { value: "2.15rem", type: dimension }

44 "3xl": { value: "3rem", type: dimension }

45 weight:

46 regular: { value: 400, type: fontWeight }

47 bold: { value: 600, type: fontWeight }

48 leading:

49 tight: { value: 1.15, type: number }

50 normal: { value: 1.5, type: number }

51 spacing:

52 base: { value: "0.25rem", type: dimension }

53 radius:

54 sm: { value: "0.375rem", type: dimension }

55 md: { value: "0.625rem", type: dimension }

56 lg: { value: "1rem", type: dimension }

57 full: { value: "9999px", type: dimension }

58 shadow:

59 sm: { value: "0 1px 2px oklch(0 0 0 / 0.4)", type: shadow }

60 md: { value: "0 8px 24px oklch(0 0 0 / 0.5)", type: shadow }

61 motion:

62 duration:

63 base: { value: "200ms", type: duration }

64 easing:

65 standard: { value: "cubic-bezier(0.2, 0, 0, 1)", type: cubicBezier }

66 breakpoint:

67 md: { value: "768px", type: dimension }

68 iconography:

69 style: { value: "1.5px stroke, sharp, luminous on dark", type: descriptor }

70 zIndex:

71 dropdown: { value: 1000, type: number }

72 modal: { value: 1300, type: number }

73---

75# Vault Design System

77## Brand & Voice

78Vault is for money that lives on screens at midnight. Near-black surfaces make

79emerald gains glow; the mood is high-end, technical, and a little nocturnal.

80Restraint everywhere except the single luminous accent.

82## Layout & Grid

83Deep `color.surface.base` canvas with raised cards for balances and charts.

84Spacing is generous so charts breathe; monospace handles every figure.

86## Components

87### Buttons

88Primary actions use the emerald `color.brand.primary` with dark `onBrand` text.

89Ghost buttons rely on `color.border.default`.

91### Charts & Cards

92Cards float on `shadow.md`; gains and losses pair `color.state.success` and

93`color.state.danger` with arrows and signs.

95## Accessibility

96Light text and muted text both pass WCAG AA against the dark surfaces. The

97accent is bright enough to read as a link, and motion stays under 200ms.

Related systems

View →

Button

Granite

98AAA

Granite — Solid Institutional Fintech

fintechfintechslate

View →

Button

Ledger

98AA

Ledger — Trustworthy Fintech

fintechfintechtrust

View →

Button

Mint

98AA

Mint — Fresh Modern Fintech

fintechfintechmint