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: Manrope
13  body:    Manrope
14  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: 4px
22  md: 5px
23  lg: 8px
24  pill: 9999px
25shadows:
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: #635BFF
34    color: #FFFFFF
35    border: none
36    shape: rounded
37    padding: 10px 16px
38    font: 500
39    shadow: rgba(99,91,255,0.20) 0 4px 12px -2px, rgba(99,91,255,0.30) 0 0 0 1px
40  secondary:
41    background: #FFFFFF
42    color: #0A2540
43    border: 1px solid #E3E8EE
44    shape: rounded
45    padding: 10px 16px
46    font: 500
47    shadow: rgba(0,0,0,0.04) 0 1px 2px
48  outline:
49    background: transparent
50    color: #635BFF
51    border: 1px solid #635BFF
52    shape: rounded
53    padding: 10px 16px
54    font: 500
55  ghost:
56    background: transparent
57    color: #425466
58    border: none
59    shape: rounded
60    padding: 10px 12px
61    font: 500
62    hover: underline
63charts:
64  variant: bars
65  stroke_width: 2
66  fill_opacity: 0.18
67  gridlines: true
68  bar_radius: "4px 4px 0 0"
69  bar_gap: 10px
70  highlight: single
71  dot_marker: true
72fonts_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 Pay
77 
78## AI Build Instructions
79 
80> **Read this section before writing any code.** The rules below
81> are non-negotiable. Every value used in the UI must come from this
82> file's frontmatter — never substitute, approximate, or invent new
83> colors, fonts, radii, or shadows. If a value is missing, ask the
84> user before adding one.
85 
86### 1 · Your role
87 
88You are building UI for a project that has adopted **Iris Pay** as its
89design system. Treat `DESIGN.md` as the single source of truth.
90Your job is to translate the user's product requirements into
91components and pages that look like they were designed by the same
92person who authored this file.
93 
94### 2 · Token compliance
95 
96- Pull every color, font family, radius, shadow, and spacing value
97  from the frontmatter at the top of this file.
98- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never
99  hard-code hex values that bypass the system.
100- When a token can be expressed as a CSS variable, declare it once
101  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 recipes
106 
107Use these recipes verbatim when building the corresponding component.
108 
109#### Buttons
110 
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 tertiary
120actions in toolbars. **Ghost** for inline links and table actions.
121 
122#### Cards
123 
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#### Charts
131 
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 pairings
137 
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 constraints
143 
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 — verify
153 
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. Atmosphere
166 
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 luxury
175- Negative tracking at display: -1.4px at 56px, progressively relaxed below
176- 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-grade
178- Conservative border-radius (4–8px) — nothing pill-shaped, nothing harsh
179- Ruby (`#ea2261`) and magenta (`#f96bee`) for decorative gradients only — never CTAs
180 
181## 2. Palette
182 
183### Primary
184- **Iris Violet** `#533afd` — primary CTA, links, interactive accent
185- **Deep Navy** `#061b31` — headings, strong labels
186- **Pure White** `#ffffff` — page, card surfaces
187 
188### Brand Dark
189- **Brand Indigo** `#1c1e54` — immersive dark sections, footer
190- **Dark Navy** `#0d253d` — darkest neutral, blue-tinted near-black
191 
192### Accent (decorative only)
193- Ruby `#ea2261` — gradients, icon highlights
194- Magenta `#f96bee` — gradient stops, decorative pops
195- Magenta Light `#ffd7ef` — tinted surface for accent badges
196 
197### Interactive
198- Hover `#4434d4` — darker violet for primary hover
199- Light `#b9b9f9` — soft lavender for selected states
200- Mid `#665efd` — input range/highlight
201 
202### Neutral
203- Label `#273951`
204- Body `#64748d`
205- Border `#e5edf5`
206- Success `#15be53` (text `#108c3d`)
207 
208## 3. Typography
209 
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. Buttons
225 
226### Primary Iris
227```css
228background: #533afd;
229color: #ffffff;
230padding: 8px 16px;
231border-radius: 4px;
232```
233Hover: `#4434d4`.
234 
235### Outline
236- Transparent background, `#533afd` text
237- `1px solid #b9b9f9`, 4px radius
238- Hover: `rgba(83,58,253,0.05)` tint
239 
240### Disabled / Muted
241- Transparent, `rgba(16,16,16,0.3)` text
242- `1px solid rgb(212,222,233)`
243 
244## 5. Cards
245 
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. Charts
253 
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. Spacing
257 
258- Base: 8px
259- Scale: `1, 2, 4, 6, 8, 10, 11, 12, 14, 16, 18, 20` — dense at the small end for precision data UI
260 
261## 8. Depth & elevation
262 
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'ts
274 
275✅ **Do**
276- Use weight 300 for all display and body — lightness is the brand voice
277- Apply blue-tinted shadows on every elevated element
278- Use deep navy (`#061b31`) for headings — never `#000000`
279- Keep radius between 4–8px — nothing pill-shaped on cards/buttons
280- Use violet (`#533afd`) for CTAs only
281 
282❌ **Don't**
283- Use weight 600+ on display — it betrays the brand voice
284- Use neutral gray shadows — always tint with blue
285- Use ruby or magenta on buttons — they're decorative-only
286- Apply pill radius (>12px) on buttons or cards
287- Use pure black (`#000`) on text
288 
289---
290 
291## Tokens
292 
293> Generated from the same source the live preview renders from.
294> Treat the values below as the contract — never substitute approximations.
295 
296### Colors
297 
298| Role      | Value |
299|-----------|-------|
300| primary   | `#061b31` |
301| secondary | `#64748d` |
302| tertiary  | `#533afd` |
303| neutral   | `#ffffff` |
304| surface   | `#ffffff` |
305 
306### Typography
307 
308- **Display:** Manrope
309- **Body:** Manrope
310- **Mono:** JetBrains Mono
311 
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### Radius
320 
321- sm: `4px`
322- md: `5px`
323- lg: `8px`
324- pill: `9999px`
325 
326### Shadows
327 
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### Borders
332 
333- **card:** `1px solid #e5edf5`
334- **divider:** `#e5edf5`
335 
336### Buttons
337 
338Four variants, each fully tokenized. The preview renders from these exact values.
339 
340#### Primary
341 
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#### Secondary
353 
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#### Outline
365 
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#### Ghost
376 
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### Charts
388 
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 
400---
401 
402## Pro tokens
403 
404> Production-fidelity tokens. States, density, motion, elevation,
405> content rules and a measured WCAG contract — derived from the
406> resting tokens unless explicitly authored.
407 
408### States
409 
410#### Button
411 
412- **hover** — shadow: `0 4px 12px -2px rgba(15,23,42,0.18)`, filter: `brightness(0.97)`
413- **focus** — outline: `2px solid rgba(83, 58, 253, 0.5)`, outline-offset: `2px`
414- **active** — shadow: `0 1px 2px rgba(15,23,42,0.1)`, transform: `scale(0.98)`
415- **disabled** — opacity: `0.4`, filter: `saturate(0.5)`
416- **loading** — opacity: `0.7`
417- **selected** — bg: `#533afd`, color: `#ffffff`
418 
419#### Input
420 
421- **hover** — border: `1px solid rgba(83, 58, 253, 0.5)`
422- **focus** — border: `1.5px solid #533afd`, shadow: `0 0 0 4px rgba(83, 58, 253, 0.15)`
423- **disabled** — bg: `rgba(6, 27, 49, 0.04)`, opacity: `0.4`
424- **error** — border: `1.5px solid #DC2626`, shadow: `0 0 0 4px rgba(220,38,38,0.15)`
425 
426#### Card
427 
428- **hover** — shadow: `0 12px 28px -12px rgba(15,23,42,0.18)`, transform: `translateY(-2px)`
429- **selected** — bg: `rgba(83, 58, 253, 0.04)`, border: `1.5px solid #533afd`
430- **dragging** — shadow: `0 20px 48px -16px rgba(15,23,42,0.3)`, transform: `scale(1.02) rotate(-0.5deg)`, opacity: `0.9`
431 
432#### Tab
433 
434- **hover** — bg: `rgba(83, 58, 253, 0.06)`, color: `#533afd`
435- **focus** — outline: `2px solid rgba(83, 58, 253, 0.5)`, outline-offset: `2px`
436- **selected** — color: `#533afd`, border: `0 0 2px 0 solid #533afd`
437 
438### Density
439 
440| Mode | padding × | row × | body | radius × | Use for |
441|------|-----------|-------|------|----------|---------|
442| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
443| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
444| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
445 
446### Motion
447 
448**Signature — Quiet ease.** 240 ms ease-out for all standard transitions. Reliable, invisible — motion stays out of the way.
449 
450```css
451transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
452```
453 
454| Token | Value |
455|-------|-------|
456| duration.instant | `80ms` |
457| duration.fast | `160ms` |
458| duration.base | `240ms` |
459| duration.slow | `380ms` |
460| easing.standard | `cubic-bezier(0.4, 0, 0.2, 1)` |
461| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
462| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
463| easing.spring | `cubic-bezier(0.34, 1.4, 0.64, 1)` |
464 
465### Elevation
466 
467Five-level scale, system-specific recipe.
468 
469| Level | Shadow | Recipe |
470|-------|--------|--------|
471| level0 | `none` | Flat — hairline border separates. |
472| level1 | `0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04)` | List rows, resting cards. |
473| level2 | `0 4px 12px -2px rgba(15,23,42,0.1), 0 2px 6px rgba(15,23,42,0.06)` | Hover cards, popover. |
474| level3 | `0 12px 32px -8px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08)` | Sheets, side panels. |
475| level4 | `0 28px 64px -16px rgba(15,23,42,0.28), 0 8px 24px rgba(15,23,42,0.12)` | Modals — scrim required. |
476 
477### Content
478 
479- **measure:** `68ch` (max line length for body prose)
480- **paragraph spacing:** `1.2em`
481- **list indent:** `1.5em`
482- **list gap:** `0.5em`
483- **link:** color `#533afd`, underline `hover`
484- **blockquote:** border `3px solid rgba(83, 58, 253, 0.6)`, padding `0.5em 0 0.5em 1.25em`
485- **code:** background `rgba(6, 27, 49, 0.06)`, color `#061b31`
486 
487### Accessibility (WCAG 2.1)
488 
489**Overall:** AA
490 
491| Pair | Ratio | Required | Grade | Suggested fix |
492|------|-------|----------|-------|---------------|
493| Body text on surface | 17.37:1 | AA | AAA | — |
494| Body text on canvas | 17.37:1 | AA | AAA | — |
495| Muted text on surface | 4.75:1 | AA | AA | — |
496| Accent on surface | 6.19:1 | AA-Large | AA | — |
497| Accent on canvas | 6.19:1 | AA-Large | AA | — |
498