fintechv1.0.0·light

Mint

Mint — Fresh Modern Fintech

fintechmintfreshfriendlymoney

39 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

mint · rendered from tokens

Color

brand.primary

oklch(0.55 0.13 165)

brand.secondary

oklch(0.45 0.08 210)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.24 0.02 175)

text.muted

oklch(0.46 0.025 175)

text.link

oklch(0.55 0.13 165)

surface.base

oklch(0.99 0.005 165)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.965 0.01 165)

border.default

oklch(0.91 0.01 165)

state.success

oklch(0.58 0.15 150)

state.danger

oklch(0.56 0.2 25)

state.warning

oklch(0.7 0.15 75)

state.info

oklch(0.55 0.13 240)

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 Mint into your workflow.

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

.cursor/rules/mint.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

Mint makes money management feel light. A fresh green leads with optimism while a steady blue grounds the data. Friendly and clear — finance without the furrowed brow.

Layout & Grid

Card-based dashboards with big, legible balances and rounded corners. Spending categories use color plus labels; whitespace keeps it breathable.

Components

Buttons

Rounded radius.md green primaries with confident labels and a soft shadow.sm. Money-in moments use color.state.success.

Cards

Account cards on color.surface.raised with friendly radii and gentle shadow. Amounts are set in mono and aligned.

Accessibility

Primary and muted text both pass WCAG AA on every surface. Sign and status pair color with icons and labels, and focus rings stay clearly visible.

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: mint

4name: Mint

5title: Mint — Fresh Modern Fintech

6version: 1.0.0

7category: fintech

8tags: [fintech, mint, fresh, friendly, money]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.55 0.13 165)", type: color }

17 secondary: { value: "oklch(0.45 0.08 210)", type: color }

18 onBrand: { value: "oklch(0.99 0 0)", type: color }

19 text:

20 primary: { value: "oklch(0.24 0.02 175)", type: color }

21 muted: { value: "oklch(0.46 0.025 175)", type: color }

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

23 surface:

24 base: { value: "oklch(0.99 0.005 165)", type: color }

25 raised: { value: "oklch(1 0 0)", type: color }

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

27 border:

28 default: { value: "oklch(0.91 0.01 165)", type: color }

29 state:

30 success: { value: "oklch(0.58 0.15 150)", type: color }

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

32 warning: { value: "oklch(0.7 0.15 75)", type: color }

33 info: { value: "oklch(0.55 0.13 240)", type: color }

34 typography:

35 family:

36 sans: { value: "Plus Jakarta Sans, system-ui, sans-serif", type: fontFamily }

37 mono: { value: "Roboto 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: "2.9rem", type: dimension }

45 weight:

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

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

48 leading:

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

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

51 spacing:

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

53 radius:

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

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

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

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

58 shadow:

59 sm: { value: "0 1px 2px oklch(0.24 0.02 175 / 0.07)", type: shadow }

60 md: { value: "0 8px 22px oklch(0.24 0.02 175 / 0.1)", type: shadow }

61 motion:

62 duration:

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

64 easing:

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

66 breakpoint:

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

68 iconography:

69 style: { value: "2px stroke, rounded, approachable", type: descriptor }

70 zIndex:

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

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

73---

75# Mint Design System

77## Brand & Voice

78Mint makes money management feel light. A fresh green leads with optimism while

79a steady blue grounds the data. Friendly and clear — finance without the

80furrowed brow.

82## Layout & Grid

83Card-based dashboards with big, legible balances and rounded corners. Spending

84categories use color plus labels; whitespace keeps it breathable.

86## Components

87### Buttons

88Rounded `radius.md` green primaries with confident labels and a soft `shadow.sm`.

89Money-in moments use `color.state.success`.

91### Cards

92Account cards on `color.surface.raised` with friendly radii and gentle shadow.

93Amounts are set in `mono` and aligned.

95## Accessibility

96Primary and muted text both pass WCAG AA on every surface. Sign and status pair

97color with icons and labels, and focus rings stay clearly visible.

Related systems

View →

Button

Granite

98AAA

Granite — Solid Institutional Fintech

fintechfintechslate

View →

Button

Ledger

98AA

Ledger — Trustworthy Fintech

fintechfintechtrust

View →

Button

Sterling

98AA

Sterling — Trustworthy Fintech

fintechfintechnavy