fintechv1.0.0·light

Granite

Granite — Solid Institutional Fintech

fintechslatesolidinstitutionalsecure

AAA

38 tokens

primarysecondarybaseraisedprimarydefaultsuccessdanger

Fork & edit

Live preview

granite · rendered from tokens

Color

brand.primary

oklch(0.4 0.05 250)

brand.secondary

oklch(0.52 0.1 230)

brand.onBrand

oklch(0.99 0 0)

text.primary

oklch(0.22 0.012 250)

text.muted

oklch(0.45 0.014 250)

text.link

oklch(0.52 0.1 230)

surface.base

oklch(0.98 0.003 250)

surface.raised

oklch(1 0 0)

surface.sunken

oklch(0.955 0.005 250)

border.default

oklch(0.9 0.006 250)

state.success

oklch(0.52 0.13 155)

state.danger

oklch(0.54 0.2 25)

state.warning

oklch(0.66 0.14 70)

state.info

oklch(0.52 0.12 245)

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

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

CCClaude Code

CLAUDE.md

Repo root — Claude Code reads it automatically.

CuCursor

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

Granite is built for institutions: dependable slate-blue, exact alignment, and not a wasted pixel. It reads as audited and permanent — the system you'd trust with a balance sheet.

Layout & Grid

Tight grids, dense tables, and clear document structure. Hairline borders divide sections; numerals sit in mono and line up to the cent.

Components

Buttons

Squared radius.sm slate primaries with restrained shadow. Destructive actions switch to color.state.danger with a confirmation.

Tables

Quiet zebra-free rows separated by color.border.default, with sortable headers and tabular figures.

Accessibility

Primary and muted text pass WCAG AA on every surface. Status pairs color with labels, focus rings are visible, and reading contrast favors clarity.

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.md96 lines

1---

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

3id: granite

4name: Granite

5title: Granite — Solid Institutional Fintech

6version: 1.0.0

7category: fintech

8tags: [fintech, slate, solid, institutional, secure]

9author: designmd

10license: CC-BY-4.0

11updatedAt: 2026-06-22

12colorMode: [light]

13tokens:

14 color:

15 brand:

16 primary: { value: "oklch(0.4 0.05 250)", type: color }

17 secondary: { value: "oklch(0.52 0.1 230)", type: color }

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

19 text:

20 primary: { value: "oklch(0.22 0.012 250)", type: color }

21 muted: { value: "oklch(0.45 0.014 250)", type: color }

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

23 surface:

24 base: { value: "oklch(0.98 0.003 250)", type: color }

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

26 sunken: { value: "oklch(0.955 0.005 250)", type: color }

27 border:

28 default: { value: "oklch(0.9 0.006 250)", type: color }

29 state:

30 success: { value: "oklch(0.52 0.13 155)", type: color }

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

32 warning: { value: "oklch(0.66 0.14 70)", type: color }

33 info: { value: "oklch(0.52 0.12 245)", type: color }

34 typography:

35 family:

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

37 mono: { value: "IBM Plex 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.2rem", type: dimension }

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

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

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

45 weight:

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

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

48 leading:

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

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

51 spacing:

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

53 radius:

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

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

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

57 shadow:

58 sm: { value: "0 1px 2px oklch(0.22 0.01 250 / 0.08)", type: shadow }

59 md: { value: "0 4px 12px oklch(0.22 0.01 250 / 0.1)", type: shadow }

60 motion:

61 duration:

62 base: { value: "140ms", type: duration }

63 easing:

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

65 breakpoint:

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

67 iconography:

68 style: { value: "1.5px stroke, square caps, exact", type: descriptor }

69 zIndex:

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

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

72---

74# Granite Design System

76## Brand & Voice

77Granite is built for institutions: dependable slate-blue, exact alignment, and

78not a wasted pixel. It reads as audited and permanent — the system you'd trust

79with a balance sheet.

81## Layout & Grid

82Tight grids, dense tables, and clear document structure. Hairline borders divide

83sections; numerals sit in `mono` and line up to the cent.

85## Components

86### Buttons

87Squared `radius.sm` slate primaries with restrained shadow. Destructive actions

88switch to `color.state.danger` with a confirmation.

90### Tables

91Quiet zebra-free rows separated by `color.border.default`, with sortable headers

92and tabular figures.

94## Accessibility

95Primary and muted text pass WCAG AA on every surface. Status pairs color with

96labels, focus rings are visible, and reading contrast favors clarity.

Related systems

View →

Button

Ledger

98AA

Ledger — Trustworthy Fintech

fintechfintechtrust

View →

Button

Mint

98AA

Mint — Fresh Modern Fintech

fintechfintechmint

View →

Button

Sterling

98AA

Sterling — Trustworthy Fintech

fintechfintechnavy