Fintech-grade clarity on white. Whisper-weight 300 display headlines, deep navy ink, electric violet accents, and signature blue-tinted multi-layer shadows.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
1---2name: "Iris Pay"3description: "Fintech-grade clarity on white. Whisper-weight 300 display headlines, deep navy ink, electric violet accents, and signature blue-tinted multi-layer shadows."4tags: [fintech, premium, minimal, saas, modern]5colors:6 primary: "#061b31"7 secondary: "#64748d"8 tertiary: "#533afd"9 neutral: "#ffffff"10 surface: "#ffffff"11typography:12 display: Manrope13 body: Manrope14 mono: "JetBrains Mono"15 scale:16 hero: "3.5rem / 1.03 / 300 / -1.4px"17 h1: "3rem / 1.15 / 300 / -0.96px"18 h2: "2rem / 1.1 / 300 / -0.64px"19 body: "1rem / 1.4 / 300 / 0"20radius:21 sm: 4px22 md: 5px23 lg: 8px24 pill: 9999px25shadows:26 card: "rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px"27 button: "rgba(50,50,93,0.18) 0px 8px 16px -6px, rgba(0,0,0,0.08) 0px 4px 8px -4px"28borders:29 card: "1px solid #e5edf5"30 divider: "#e5edf5"31buttons:32 primary:33 background: #635BFF34 color: #FFFFFF35 border: none36 shape: rounded37 padding: 10px 16px38 font: 50039 shadow: rgba(99,91,255,0.20) 0 4px 12px -2px, rgba(99,91,255,0.30) 0 0 0 1px40 secondary:41 background: #FFFFFF42 color: #0A254043 border: 1px solid #E3E8EE44 shape: rounded45 padding: 10px 16px46 font: 50047 shadow: rgba(0,0,0,0.04) 0 1px 2px48 outline:49 background: transparent50 color: #635BFF51 border: 1px solid #635BFF52 shape: rounded53 padding: 10px 16px54 font: 50055 ghost:56 background: transparent57 color: #42546658 border: none59 shape: rounded60 padding: 10px 12px61 font: 50062 hover: underline63charts:64 variant: bars65 stroke_width: 266 fill_opacity: 0.1867 gridlines: true68 bar_radius: "4px 4px 0 0"69 bar_gap: 10px70 highlight: single71 dot_marker: true72fonts_url: "https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap"73dependencies: ["lucide-react"]74---75 76# Iris Pay77 78## AI Build Instructions79 80> **Read this section before writing any code.** The rules below81> are non-negotiable. Every value used in the UI must come from this82> file's frontmatter — never substitute, approximate, or invent new83> colors, fonts, radii, or shadows. If a value is missing, ask the84> user before adding one.85 86### 1 · Your role87 88You are building UI for a project that has adopted **Iris Pay** as its89design system. Treat `DESIGN.md` as the single source of truth.90Your job is to translate the user's product requirements into91components and pages that look like they were designed by the same92person who authored this file.93 94### 2 · Token compliance95 96- Pull every color, font family, radius, shadow, and spacing value97 from the frontmatter at the top of this file.98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never99 hard-code hex values that bypass the system.100- When a token can be expressed as a CSS variable, declare it once101 in your global stylesheet and reference it everywhere downstream.102- The Google Fonts `<link>` is provided in the Typography section.103 Add it to `<head>` before any component renders.104 105### 3 · Component recipes106 107Use these recipes verbatim when building the corresponding component.108 109#### Buttons110 111Four variants are defined. Pick one — never blend variants or invent a fifth.112 113- **Primary** — rounded shape, bg `#635BFF`, text `#FFFFFF`, padding `10px 16px`, weight `500`, shadow `rgba(99,91,255,0.20) 0 4px 12px -2px, rgba(99,91,255,0.30) 0 0 0 1px`.114- **Secondary** — rounded shape, bg `#FFFFFF`, text `#0A2540`, border `1px solid #E3E8EE`, padding `10px 16px`, weight `500`, shadow `rgba(0,0,0,0.04) 0 1px 2px`.115- **Outline** — rounded shape, text `#635BFF`, border `1px solid #635BFF`, padding `10px 16px`, weight `500`.116- **Ghost** — rounded shape, text `#425466`, padding `10px 12px`, weight `500`.117 118Reach for **primary** as the single dominant CTA per screen.119**Secondary** for the supporting action. **Outline** for tertiary120actions in toolbars. **Ghost** for inline links and table actions.121 122#### Cards123 124- Background: `#ffffff`125- Border: `1px solid #e5edf5`126- Shadow: `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`127- Radius: `radius.lg` (`8px`)128- Internal padding: `20px` for compact cards, `24–28px` for content cards.129 130#### Charts131 132- Bar/line variant: `bars`133- Bar radius: `4px 4px 0 0`134- Highlight strategy: `single` — emphasize a single bar/point per chart.135 136#### Typography pairings137 138- **Display (`Manrope`)** — h1, h2, hero headlines, brand wordmarks.139- **Body (`Manrope`)** — paragraphs, labels, button text, form inputs.140- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.141 142### 4 · Hard constraints143 144Never do any of the following without explicit instruction from the user:145 146- Introduce a new color, font, radius, or shadow that isn't declared above.147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.151 152### 5 · Before you finish — verify153 154Run through this checklist for every screen you produce:155 156- [ ] Every color used appears in the Colors table above.157- [ ] Headlines use the display font; body copy uses the body font.158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.160- [ ] Cards and dividers use the declared border + shadow tokens.161- [ ] No values were invented; if you needed something missing, you stopped and asked.162 163---164 165## 1. Atmosphere166 167Iris Pay is fintech design at its most refined. A clean white canvas (`#ffffff`) anchored by deep navy headings (`#061b31`) — never pure black — and a saturated electric violet (`#533afd`) that does double duty as brand anchor and interactive accent. The impression is of a financial institution redesigned by a world-class type foundry: simultaneously technical and luxurious, precise and warm.168 169The signature typographic move is **weight 300 at display sizes**. Where most product pages shout in 600/700, Iris Pay whispers — confident enough not to need the volume. Negative tracking compresses headlines into dense, engineered blocks (-1.4px at 56px, -0.96px at 48px). Every text element should run on a geometric variable sans with stylistic alternates enabled for a contemporary, rounded letterform.170 171What truly distinguishes Iris Pay is its **shadow system**. Forget flat shadows or single-layer drops. Iris Pay uses multi-layer, blue-tinted shadows — `rgba(50,50,93,0.25)` paired with `rgba(0,0,0,0.1)` — creating depth that reads as cool, atmospheric, almost twilight. The blue-gray undertone ties shadows directly to the navy-violet palette, so even elevation feels on-brand.172 173**Signature moves**174- Geometric variable sans at weight 300 — lightness as luxury175- Negative tracking at display: -1.4px at 56px, progressively relaxed below176- Blue-tinted multi-layer shadows: `rgba(50,50,93,0.25) 0 30px 45px -30px, rgba(0,0,0,0.1) 0 18px 36px -18px`177- Deep navy (`#061b31`) headings instead of black — warm, premium, financial-grade178- Conservative border-radius (4–8px) — nothing pill-shaped, nothing harsh179- Ruby (`#ea2261`) and magenta (`#f96bee`) for decorative gradients only — never CTAs180 181## 2. Palette182 183### Primary184- **Iris Violet** `#533afd` — primary CTA, links, interactive accent185- **Deep Navy** `#061b31` — headings, strong labels186- **Pure White** `#ffffff` — page, card surfaces187 188### Brand Dark189- **Brand Indigo** `#1c1e54` — immersive dark sections, footer190- **Dark Navy** `#0d253d` — darkest neutral, blue-tinted near-black191 192### Accent (decorative only)193- Ruby `#ea2261` — gradients, icon highlights194- Magenta `#f96bee` — gradient stops, decorative pops195- Magenta Light `#ffd7ef` — tinted surface for accent badges196 197### Interactive198- Hover `#4434d4` — darker violet for primary hover199- Light `#b9b9f9` — soft lavender for selected states200- Mid `#665efd` — input range/highlight201 202### Neutral203- Label `#273951`204- Body `#64748d`205- Border `#e5edf5`206- Success `#15be53` (text `#108c3d`)207 208## 3. Typography209 210| Role | Size | Weight | Leading | Tracking |211|------|------|--------|---------|----------|212| Display Hero | 56px | 300 | 1.03 | -1.4px |213| Display | 48px | 300 | 1.15 | -0.96px |214| Section | 32px | 300 | 1.10 | -0.64px |215| Sub-heading L | 26px | 300 | 1.12 | -0.26px |216| Body L | 18px | 300 | 1.40 | normal |217| Body | 16px | 300–400 | 1.40 | normal |218| Button | 16px | 400 | 1.00 | normal |219| Caption | 13px | 400 | 1.50 | normal |220| Tabular num | 12px | 300 | 1.33 | -0.36px |221 222**Two-weight discipline.** 300 for body and headings, 400 for UI/buttons. No bold (700) in the primary face. Use `"tnum"` for any tabular financial number — never in flowing prose.223 224## 4. Buttons225 226### Primary Iris227```css228background: #533afd;229color: #ffffff;230padding: 8px 16px;231border-radius: 4px;232```233Hover: `#4434d4`.234 235### Outline236- Transparent background, `#533afd` text237- `1px solid #b9b9f9`, 4px radius238- Hover: `rgba(83,58,253,0.05)` tint239 240### Disabled / Muted241- Transparent, `rgba(16,16,16,0.3)` text242- `1px solid rgb(212,222,233)`243 244## 5. Cards245 246- Background: `#ffffff`247- Border: `1px solid #e5edf5`248- Radius: 5–8px (4px tight, 8px featured)249- Standard shadow: `rgba(50,50,93,0.25) 0 30px 45px -30px, rgba(0,0,0,0.1) 0 18px 36px -18px`250- Ambient: `rgba(23,23,23,0.08) 0 15px 35px`251 252## 6. Charts253 254Bar charts use **gridline backgrounds** and a single highlighted bar in iris violet. Line charts run thin (2px stroke) with subtle area fills. Tabular numerals everywhere. The chart card itself carries the signature blue-tinted shadow, never a flat border.255 256## 7. Spacing257 258- Base: 8px259- Scale: `1, 2, 4, 6, 8, 10, 11, 12, 14, 16, 18, 20` — dense at the small end for precision data UI260 261## 8. Depth & elevation262 263| Level | Treatment | Use |264|-------|-----------|-----|265| 0 | No shadow | Page background |266| 1 | `rgba(23,23,23,0.06) 0 3px 6px` | Subtle lift, hover |267| 2 | `rgba(23,23,23,0.08) 0 15px 35px` | Standard cards |268| 3 | Multi-layer blue tint | Featured cards, dropdowns |269| 4 | `rgba(3,3,39,0.25) 0 14px 21px -14px, rgba(0,0,0,0.1) 0 8px 17px -8px` | Modals |270 271**Chromatic depth.** Shadows aren't just dark — they're *blue*. The `rgba(50,50,93,...)` tint echoes the navy-violet palette so elevation feels brand-colored.272 273## 9. Do's & don'ts274 275✅ **Do**276- Use weight 300 for all display and body — lightness is the brand voice277- Apply blue-tinted shadows on every elevated element278- Use deep navy (`#061b31`) for headings — never `#000000`279- Keep radius between 4–8px — nothing pill-shaped on cards/buttons280- Use violet (`#533afd`) for CTAs only281 282❌ **Don't**283- Use weight 600+ on display — it betrays the brand voice284- Use neutral gray shadows — always tint with blue285- Use ruby or magenta on buttons — they're decorative-only286- Apply pill radius (>12px) on buttons or cards287- Use pure black (`#000`) on text288 289---290 291## Tokens292 293> Generated from the same source the live preview renders from.294> Treat the values below as the contract — never substitute approximations.295 296### Colors297 298| Role | Value |299|-----------|-------|300| primary | `#061b31` |301| secondary | `#64748d` |302| tertiary | `#533afd` |303| neutral | `#ffffff` |304| surface | `#ffffff` |305 306### Typography307 308- **Display:** Manrope309- **Body:** Manrope310- **Mono:** JetBrains Mono311 312| Role | size / leading / weight / tracking |313|------|------------------------------------|314| Hero | 3.5rem / 1.03 / 300 / -1.4px |315| H1 | 3rem / 1.15 / 300 / -0.96px |316| H2 | 2rem / 1.1 / 300 / -0.64px |317| Body | 1rem / 1.4 / 300 / 0 |318 319### Radius320 321- sm: `4px`322- md: `5px`323- lg: `8px`324- pill: `9999px`325 326### Shadows327 328- **card:** `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`329- **button:** `rgba(50,50,93,0.18) 0px 8px 16px -6px, rgba(0,0,0,0.08) 0px 4px 8px -4px`330 331### Borders332 333- **card:** `1px solid #e5edf5`334- **divider:** `#e5edf5`335 336### Buttons337 338Four variants, each fully tokenized. The preview renders from these exact values.339 340#### Primary341 342| Property | Value |343|----------|-------|344| shape | `rounded` |345| background | `#635BFF` |346| color | `#FFFFFF` |347| border | `none` |348| padding | `10px 16px` |349| fontWeight | `500` |350| shadow | `rgba(99,91,255,0.20) 0 4px 12px -2px, rgba(99,91,255,0.30) 0 0 0 1px` |351 352#### Secondary353 354| Property | Value |355|----------|-------|356| shape | `rounded` |357| background | `#FFFFFF` |358| color | `#0A2540` |359| border | `1px solid #E3E8EE` |360| padding | `10px 16px` |361| fontWeight | `500` |362| shadow | `rgba(0,0,0,0.04) 0 1px 2px` |363 364#### Outline365 366| Property | Value |367|----------|-------|368| shape | `rounded` |369| background | `transparent` |370| color | `#635BFF` |371| border | `1px solid #635BFF` |372| padding | `10px 16px` |373| fontWeight | `500` |374 375#### Ghost376 377| Property | Value |378|----------|-------|379| shape | `rounded` |380| background | `transparent` |381| color | `#425466` |382| border | `none` |383| padding | `10px 12px` |384| fontWeight | `500` |385| hoverHint | `underline` |386 387### Charts388 389| Property | Value |390|----------|-------|391| variant | `bars` |392| strokeWidth | `2` |393| fillOpacity | `0.18` |394| gridlines | `true` |395| barRadius | `4px 4px 0 0` |396| barGap | `10px` |397| highlight | `single` |398| dotMarker | `true` |399 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Manrope"', 'serif'], sans: ['"Manrope"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#061b31', secondary: '#64748d', accent: '#533afd', neutral: '#ffffff', surface: '#ffffff', }, borderRadius: { sm: '4px', md: '5px', lg: '8px', }, }, },};tonal-surface with a moss-green seed — warm tonal surfaces, full-rounded tonal buttons, Roboto Flex throughout. Calm and grounded.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
A soft tonal gradient that stays in one hue. Quartz-pink shading down to bone-white across the page, Manrope for UI, Fraunces for display, graphite ink, a single muted plum accent reserved for the primary CTA and the active step indicator. Built for early-stage product pages, wellness brands, and onboarding flows that need warmth without sweetness.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.