design.md
Back to directory
fintech · bold · warm · playful

Limepress Fintech.

Lime-bright fintech with weight-900 display at 0.85 line-height — billboard-density typography, dark-green-on-lime pill CTAs, ring-shadow depth.

01 · Preview

The kitchen sink.

Limepress.app
ProductPricingDocsAbout
Sign inGet started
fintech · bold · warm

Build with Limepress Fintech.

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
#0E0F0C
secondary
#454745
tertiary
#9FE870
neutral
#E8EBE6
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
10px
md
16px
lg
30px
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 · Pro tokens

The states behind the resting style.

ArchetypeEditorial

Tokens describe the resting state. A real product needs every interaction state. Hover, focus, active, disabled, loading — all derived from the system's resting tokens.

Button

resting → state delta
resting
hover
focus
active
disabled
loading
selected

Input

resting → state delta
resting
hover
focus
disabled
error

Card

resting → state delta
Account
sam@studio.com
resting
Account
sam@studio.com
hover
Account
sam@studio.com
selected

Tab

resting → state delta
Overview
resting
Overview
hover
Overview
focus
Overview
selected
03 · The file

DESIGN.md

markdown
1---
2name: "Limepress Fintech"
3description: "Lime-bright fintech with weight-900 display at 0.85 line-height — billboard-density typography, dark-green-on-lime pill CTAs, ring-shadow depth."
4tags: [fintech, bold, warm, playful]
5colors:
6  primary:   "#0e0f0c"
7  secondary: "#454745"
8  tertiary:  "#9fe870"
9  neutral:   "#e8ebe6"
10  surface:   "#ffffff"
11typography:
12  display: "Archivo Black"
13  body:    Inter
14  mono:    "JetBrains Mono"
15  scale:
16    hero: "5.5rem / 0.85 / 900 / 0"
17    h1:   "4rem / 0.85 / 900 / 0"
18    h2:   "2.5rem / 0.85 / 900 / 0"
19    body: "1.125rem / 1.44 / 600 / 0.18px"
20radius:
21  sm: 10px
22  md: 16px
23  lg: 30px
24  pill: 9999px
25shadows:
26  card:   "rgba(14,15,12,0.12) 0 0 0 1px"
27borders:
28  card:    "1px solid rgba(14,15,12,0.12)"
29  divider: rgba(14,15,12,0.12)
30buttons:
31  primary:
32    background: #9fe870
33    color: #163300
34    border: none
35    shape: pill
36    padding: 12px 24px
37    font: 600
38    hover: scale
39  secondary:
40    background: rgba(22,51,0,0.08)
41    color: #0e0f0c
42    border: none
43    shape: pill
44    padding: 10px 20px
45    font: 600
46    hover: scale
47  outline:
48    background: #ffffff
49    color: #0e0f0c
50    border: none
51    shape: pill
52    padding: 10px 20px
53    font: 600
54    shadow: rgba(14,15,12,0.12) 0 0 0 1px
55    hover: scale
56  ghost:
57    background: rgba(211,242,192,0.4)
58    color: #0e0f0c
59    border: none
60    shape: pill
61    padding: 10px 16px
62    font: 600
63charts:
64  variant: bars
65  stroke_width: 3
66  fill_opacity: 0.2
67  gridlines: false
68  bar_radius: "6px 6px 0 0"
69  bar_gap: 12px
70  highlight: single
71  dot_marker: false
72fonts_url: "https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap"
73dependencies: ["lucide-react"]
74---
75 
76# Limepress Fintech
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 **Limepress Fintech** 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** — pill shape, bg `#9fe870`, text `#163300`, padding `12px 24px`, weight `600`.
114- **Secondary** — pill shape, bg `rgba(22,51,0,0.08)`, text `#0e0f0c`, padding `10px 20px`, weight `600`.
115- **Outline** — pill shape, bg `#ffffff`, text `#0e0f0c`, padding `10px 20px`, weight `600`, shadow `rgba(14,15,12,0.12) 0 0 0 1px`.
116- **Ghost** — pill shape, bg `rgba(211,242,192,0.4)`, text `#0e0f0c`, padding `10px 16px`, weight `600`.
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 rgba(14,15,12,0.12)`
126- Shadow: `rgba(14,15,12,0.12) 0 0 0 1px`
127- Radius: `radius.lg` (`30px`)
128- Internal padding: `20px` for compact cards, `24–28px` for content cards.
129 
130#### Charts
131 
132- Bar/line variant: `bars`
133- Bar radius: `6px 6px 0 0`
134- No gridlines — let the bars/lines carry the data.
135- Highlight strategy: `single` — emphasize a single bar/point per chart.
136 
137#### Typography pairings
138 
139- **Display (`Archivo Black`)** — h1, h2, hero headlines, brand wordmarks.
140- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.
141- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.
142 
143### 4 · Hard constraints
144 
145Never do any of the following without explicit instruction from the user:
146 
147- Introduce a new color, font, radius, or shadow that isn't declared above.
148- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).
149- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.
150- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.
151- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.
152 
153### 5 · Before you finish — verify
154 
155Run through this checklist for every screen you produce:
156 
157- [ ] Every color used appears in the Colors table above.
158- [ ] Headlines use the display font; body copy uses the body font.
159- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).
160- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.
161- [ ] Cards and dividers use the declared border + shadow tokens.
162- [ ] No values were invented; if you needed something missing, you stopped and asked.
163 
164---
165 
166## 1. Atmosphere
167 
168Limepress Fintech is the visual translation of "money without borders" — a bold, confident fintech surface that throws out corporate-blue convention in favor of a single, electric **lime-green** (`#9fe870`) accent paired with warm near-black (`#0e0f0c`). The page is a calm warm white, but the typography turns up the volume: display headlines run at weight **900** with a remarkable **0.85 line-height**, so the letters nearly stack on top of each other. The result reads like a protest sign — urgent, physical, impossible to ignore.
169 
170The accent strategy is disciplined: lime green is reserved for primary CTAs, with **dark forest green** (`#163300`) as the contrasting button text. This nature-pairing feels alive and optimistic, completely unlike the saturated blues of legacy banking. Hover behavior is physical, not chromatic — buttons grow with `scale(1.05)` and compress to `scale(0.95)` on press. The button literally responds to your cursor like a tactile object.
171 
172The body voice is Inter at weight **600** by default — confident, never light. Combined with OpenType `"calt"` (contextual alternates) on every text element, the whole system reads as one continuous, deliberate voice.
173 
174**Signature moves**
175- Display weight 900 at 0.85 line-height — the densest type stack in the catalog
176- Lime Green (`#9fe870`) on `#163300` — nature-inspired CTA combo
177- Inter weight 600 as body default — never 400
178- Scale(1.05) on hover, scale(0.95) on active — physical button motion
179- OpenType `"calt"` enabled globally
180- Pill buttons (9999px) and big rounded cards (30–40px)
181- **Ring shadow** (`0 0 0 1px`) as the entire elevation system — no soft blur
182 
183## 2. Palette
184 
185### Primary
186- **Near Black** `#0e0f0c` — text, dark sections (warm green undertone)
187- **Limepress Green** `#9fe870` — primary CTA, brand identity
188- **Dark Green** `#163300` — button label on green
189- **Light Mint** `#e2f6d5` — soft surface, badge
190- **Pastel Green** `#cdffad` — interactive hover accent
191 
192### Semantic
193- Positive `#054d28` · Danger `#d03238` · Warning `#ffd11a`
194- Background Cyan `rgba(56,200,255,0.10)` · Bright Orange `#ffc091`
195 
196### Neutral
197- Warm Dark `#454745` · Gray `#868685` · Light Surface `#e8ebe6`
198 
199## 3. Typography
200 
201| Role | Font | Size | Weight | Leading | Tracking |
202|------|------|------|--------|---------|----------|
203| Display Mega | Display | 126px | 900 | 0.85 | 0 |
204| Display Hero | Display | 96px | 900 | 0.85 | 0 |
205| Section | Display | 64px | 900 | 0.85 | 0 |
206| Sub-heading | Display | 40px | 900 | 0.85 | 0 |
207| Card title | Body | 26px | 600 | 1.23 | -0.39px |
208| Feature | Body | 22px | 600 | 1.25 | -0.4px |
209| Body | Body | 18px | 400 | 1.44 | +0.18px |
210| Body Semibold | Body | 18px | 600 | 1.44 | -0.108px |
211| Button | Body | 18–22px | 600 | 1.00–1.44 | -0.108px |
212| Caption | Body | 14px | 400–600 | 1.50–1.86 | -0.084 to -0.108px |
213 
214**Weight 900 is the identity.** Letters overlap vertically. Body weight is 600 (not 400) — confidence reads in every paragraph.
215 
216## 4. Buttons
217 
218### Primary Pill
219```css
220background: #9fe870;
221color: #163300;
222padding: 12px 24px;
223border-radius: 9999px;
224```
225Hover: `scale(1.05)`. Active: `scale(0.95)`.
226 
227### Secondary Pill
228- Background `rgba(22,51,0,0.08)`, text `#0e0f0c`
229- 9999px radius, same scale animation
230 
231## 5. Cards
232- Background `#ffffff`
233- Radius: 16/30/40px
234- Border: `1px solid rgba(14,15,12,0.12)` or `1px solid #9fe870`
235- Shadow: `rgba(14,15,12,0.12) 0 0 0 1px` ring
236 
237## 6. Charts
238**Chunky lime bars with single-bar highlight, no gridlines** — flat, billboard-style. Line charts at 3px stroke with 20% lime fill: a confident, hand-drawn feel rather than a data-grid.
239 
240## 7. Spacing
241- Base: 8px
242- Scale: `1, 2, 3, 4, 5, 8, 10, 11, 12, 16, 18, 19, 20, 22, 24`
243 
244## 8. Depth & elevation
245 
246| Level | Treatment | Use |
247|-------|-----------|-----|
248| 0 | Flat | Default |
249| 1 | `rgba(14,15,12,0.12) 0 0 0 1px` | Card border |
250| 2 | `rgb(134,134,133) 0 0 0 1px inset` | Input focus |
251 
252**Ring shadow is the entire shadow system.** No blur shadows anywhere.
253 
254## 9. Do's & don'ts
255 
256✅ **Do**
257- Use weight 900 on display — the extreme weight IS the brand
258- Hold display line-height at 0.85 — never relax it
259- Lime CTAs only — `#9fe870` background, `#163300` text
260- Apply scale(1.05) hover and scale(0.95) active
261- Use Inter weight 600 as body default
262 
263❌ **Don't**
264- Use lighter weights for display — only 900
265- Use lime as a large background — CTAs and small accents only
266- Skip the scale animation on buttons
267- Use blur shadows — ring shadows only
268 
269---
270 
271## Tokens
272 
273> Generated from the same source the live preview renders from.
274> Treat the values below as the contract — never substitute approximations.
275 
276### Colors
277 
278| Role      | Value |
279|-----------|-------|
280| primary   | `#0e0f0c` |
281| secondary | `#454745` |
282| tertiary  | `#9fe870` |
283| neutral   | `#e8ebe6` |
284| surface   | `#ffffff` |
285 
286### Typography
287 
288- **Display:** Archivo Black
289- **Body:** Inter
290- **Mono:** JetBrains Mono
291 
292| Role | size / leading / weight / tracking |
293|------|------------------------------------|
294| Hero | 5.5rem / 0.85 / 900 / 0 |
295| H1   | 4rem / 0.85 / 900 / 0 |
296| H2   | 2.5rem / 0.85 / 900 / 0 |
297| Body | 1.125rem / 1.44 / 600 / 0.18px |
298 
299### Radius
300 
301- sm: `10px`
302- md: `16px`
303- lg: `30px`
304- pill: `9999px`
305 
306### Shadows
307 
308- **card:** `rgba(14,15,12,0.12) 0 0 0 1px`
309 
310### Borders
311 
312- **card:** `1px solid rgba(14,15,12,0.12)`
313- **divider:** `rgba(14,15,12,0.12)`
314 
315### Buttons
316 
317Four variants, each fully tokenized. The preview renders from these exact values.
318 
319#### Primary
320 
321| Property | Value |
322|----------|-------|
323| shape | `pill` |
324| background | `#9fe870` |
325| color | `#163300` |
326| border | `none` |
327| padding | `12px 24px` |
328| fontWeight | `600` |
329| hoverHint | `scale` |
330 
331#### Secondary
332 
333| Property | Value |
334|----------|-------|
335| shape | `pill` |
336| background | `rgba(22,51,0,0.08)` |
337| color | `#0e0f0c` |
338| border | `none` |
339| padding | `10px 20px` |
340| fontWeight | `600` |
341| hoverHint | `scale` |
342 
343#### Outline
344 
345| Property | Value |
346|----------|-------|
347| shape | `pill` |
348| background | `#ffffff` |
349| color | `#0e0f0c` |
350| border | `none` |
351| padding | `10px 20px` |
352| fontWeight | `600` |
353| shadow | `rgba(14,15,12,0.12) 0 0 0 1px` |
354| hoverHint | `scale` |
355 
356#### Ghost
357 
358| Property | Value |
359|----------|-------|
360| shape | `pill` |
361| background | `rgba(211,242,192,0.4)` |
362| color | `#0e0f0c` |
363| border | `none` |
364| padding | `10px 16px` |
365| fontWeight | `600` |
366 
367### Charts
368 
369| Property | Value |
370|----------|-------|
371| variant | `bars` |
372| strokeWidth | `3` |
373| fillOpacity | `0.2` |
374| gridlines | `false` |
375| barRadius | `6px 6px 0 0` |
376| barGap | `12px` |
377| highlight | `single` |
378| dotMarker | `false` |
379 
380---
381 
382## Pro tokens
383 
384> Production-fidelity tokens. States, density, motion, elevation,
385> content rules and a measured WCAG contract — derived from the
386> resting tokens unless explicitly authored.
387 
388### States
389 
390#### Button
391 
392- **hover** — bg: `rgba(159, 232, 112, 0.92)`, shadow: `0 4px 20px -8px rgba(159, 232, 112, 0.4)`
393- **focus** — outline: `1.5px solid #9fe870`, outline-offset: `4px`
394- **active** — transform: `translateY(1px)`, filter: `brightness(0.95)`
395- **disabled** — opacity: `0.45`
396- **loading** — opacity: `0.7`
397- **selected** — bg: `#0e0f0c`, color: `#ffffff`
398 
399#### Input
400 
401- **hover** — border: `1px solid #0e0f0c`
402- **focus** — border: `1px solid #9fe870`, shadow: `0 1px 0 0 #9fe870`
403- **disabled** — opacity: `0.45`
404- **error** — border: `1px solid #991B1B`, shadow: `0 1px 0 0 #991B1B`
405 
406#### Card
407 
408- **hover** — shadow: `0 8px 24px -12px rgba(15,23,42,0.14)`, transform: `translateY(-1px)`
409- **selected** — border: `1px solid #0e0f0c`
410 
411#### Tab
412 
413- **hover** — color: `#0e0f0c`
414- **focus** — outline: `1.5px solid #9fe870`, outline-offset: `3px`
415- **selected** — color: `#9fe870`, border: `0 0 2px 0 solid #9fe870`
416 
417### Density
418 
419| Mode | padding × | row × | body | radius × | Use for |
420|------|-----------|-------|------|----------|---------|
421| compact | 0.72 | 0.78 | 0.8125rem | 0.85 | Information-dense — tables, IDEs, dashboards |
422| comfortable | 1 | 1 | 0.9375rem | — | Default — most product UI |
423| spacious | 1.35 | 1.3 | 1rem | 1.15 | Editorial — marketing, long-form, settings |
424 
425### Motion
426 
427**Signature — Page turn.** Deliberate, measured motion — like turning a magazine page. Never jerky, never overdone.
428 
429```css
430transition: all 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
431```
432 
433| Token | Value |
434|-------|-------|
435| duration.instant | `80ms` |
436| duration.fast | `180ms` |
437| duration.base | `320ms` |
438| duration.slow | `500ms` |
439| easing.standard | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` |
440| easing.decelerate | `cubic-bezier(0.0, 0, 0.2, 1)` |
441| easing.accelerate | `cubic-bezier(0.4, 0, 1, 1)` |
442| easing.spring | `cubic-bezier(0.5, 1.2, 0.6, 1)` |
443 
444### Elevation
445 
446Five-level scale, system-specific recipe.
447 
448| Level | Shadow | Recipe |
449|-------|--------|--------|
450| level0 | `none` | Hairline only — typical editorial resting state. |
451| level1 | `0 1px 2px rgba(15,23,42,0.04)` | Barely visible — list rows, dividers. |
452| level2 | `0 8px 24px -12px rgba(15,23,42,0.12)` | Pull-quote, sidebar — soft lift. |
453| level3 | `0 16px 40px -16px rgba(15,23,42,0.18)` | Cover story card — clear lift. |
454| level4 | `0 32px 80px -24px rgba(15,23,42,0.28)` | Modal — overlays the layout, with scrim. |
455 
456### Content
457 
458- **measure:** `60ch` (max line length for body prose)
459- **paragraph spacing:** `1.5em`
460- **list indent:** `1.75em`
461- **list gap:** `0.55em`
462- **link:** color `#9fe870`, underline `always`
463- **blockquote:** border `4px solid #9fe870`, padding `0.4em 0 0.4em 1.5em`
464- **code:** background `rgba(14, 15, 12, 0.06)`, color `#0e0f0c`
465 
466### Accessibility (WCAG 2.1)
467 
468**Overall:** FAIL
469 
470| Pair | Ratio | Required | Grade | Suggested fix |
471|------|-------|----------|-------|---------------|
472| Body text on surface | 19.23:1 | AA | AAA | — |
473| Body text on canvas | 15.98:1 | AA | AAA | — |
474| Muted text on surface | 9.37:1 | AA | AAA | — |
475| Accent on surface | 1.47:1 | AA-Large | FAIL | `#3f8115` → 4.81:1 (AA) |
476| Accent on canvas | 1.22:1 | AA-Large | FAIL | `#377012` → 5:1 (AA) |
477
04 · 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.
05 · Required setup

Three snippets.

Google Fonts link

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

Install dependencies

bash
npm install lucide-react

Tailwind config

js
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ['"Archivo Black"', 'serif'],
        sans:    ['"Inter"', 'sans-serif'],
        mono:    ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        primary:   '#0e0f0c',
        secondary: '#454745',
        accent:    '#9fe870',
        neutral:   '#e8ebe6',
        surface:   '#ffffff',
      },
      borderRadius: {
        sm: '10px',
        md: '16px',
        lg: '30px',
      },
    },
  },
};
06 · Keep browsing

Try another system.

Coinblue Exchange

Crypto-grade trust on white. Saturated brand blue, ultra-tight 1.00 line-height display, distinctive 56px radius pill CTAs, alternating white/near-black sections.

fintechsaasminimaltrustworthymodern
Coinblue.app
ProductPricingDocsAbout
Sign inGet started
fintech · saas · minimal

Build with Coinblue Exchange.

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

Duotone Press

A two-color press operation: warm bone and persimmon, nothing else. Bricolage Grotesque for display at oversized scale, Newsreader for body, sharp 0px corners, every accent and every CTA in the same persimmon. Built for editorial sites, indie magazines, and brands that want one disciplined color move and zero decoration.

editorialduotonewarmminimalbold
Duotone.app
ProductPricingDocsAbout
Sign inGet started
editorial · duotone · warm

Build with Duotone Press.

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