fintech · premium · minimal · saas · modern

Iris Pay.

Fintech-grade clarity on white. Whisper-weight 300 display headlines, deep navy ink, electric violet accents, and signature blue-tinted multi-layer shadows.

01 · Preview

The kitchen sink.

Iris.app

ProductPricingDocsAbout

Sign inGet started

fintech · premium · minimal

Build with Iris Pay.

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.

Start building →View on GitHub

Featured

Tokens that travel with your prompts.

Active users

12,840

Status

All systems operational

01 · Color

Palette

primary

#061B31

secondary

#64748D

tertiary

#533AFD

neutral

#FFFFFF

surface

#FFFFFF

02 · Typography

Type scale

display

The quick brown fox

h1

A major section heading

h2

A subsection title

body

Body copy in the system's body font.

03 · Buttons

Buttons

PrimarySecondaryOutlineGhostText link →

Disabled

04 · Inputs

Form controls

Email

iris@studio.com

Password

••••••••••••

Bio

Designing for long-form publications. Based in Kyoto.

05 · Choices

Select & toggle

Plan

Starter

Free forever

Pro

$18 / month

Team

$48 / month

Toggles

Public profile

Require two-factor

Auto-accept invites

06 · Tags & badges

Labeling

NeutralAccentSolidWith dot

NEWBETAv2.0LIVE

07 · Cards

Cards

Feature

Editorial rigor

Prose-first token file — decisions live next to their reasoning.

Learn more →

Metric

24,810

▲ +12.4% vs last week

08 · Navigation

Tabs & breadcrumb

Overview

Analytics

Members

Workspace/Projects/Heritage System

09 · Spacing

Spacing scale

Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.

1px

2px

5px

8px · base

10px

12px

14px

16px

18px

20px

21px

10 · Radius

Border radius scale

The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.

sm

4px

md

5px

lg

8px

pill

9999px

11 · Elevation

Depth & elevation

00 · Flat

Elevation 00

01 · Low

Elevation 01

02 · Medium

Elevation 02

03 · High

Elevation 03

12 · Data

Charts

Weekly revenue

$48,210

M

T

W

T

F

S

S

Active sessions

2,184

02 · The file

DESIGN.md

markdown

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

03 · How to use it

Wire it into your agent.

markdown

# 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.

04 · Required setup

Three snippets.

Google Fonts link

html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600&family=JetBrains+Mono:wght@400&display=swap" />

Install dependencies

bash

npm install lucide-react

Tailwind config

// tailwind.config.js
export 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',
      },
    },
  },
};

05 · Keep browsing

Try another system.

Solflare Bloom

A low-sun grainy gradient that runs deep ember to marigold with real fractal-noise grain. Cream surface, Inter Tight display in heavy 800, generous slabs of negative space, and the gradient burns through exactly the primary CTA, the featured tile, and the active chart bar. A warm, restrained bloom — never sunset cliché.

grainygradientwarmmodernlight

Solflare.app

ProductPricingDocsAbout

Sign inGet started