# RushFi brand — LLM file (v1 · October 2026)

Everything needed to build a RushFi page or graphic. Human version: https://rushfi.co/brand.
Source of truth in code: `app/(site)/site.css` (tokens + components), `components/site/ExhaustPrint.tsx` (texture).

## 1. Voice
- Business funding, fast. Plain words, short sentences, numbers over adjectives.
- Headlines: two beats. The second sentence is set in Rush Blue ("One application. Every lender." — "Every lender." blue).
- Never: exclamation marks, "guaranteed approval", hype about credit, emoji.

## 2. Logo
- Files: `/brand/kit/logo-color.png` (cream/white grounds), `logo-white.png` (ink, dark print, solid blue), `logo-ink.png` (light, when blue would be a second accent).
- Mark (rocket only): `/brand/kit/mark-color.png`, `mark-white.png`, `mark-ink.png`. App icon: `/brand/kit/box-logo.png`.
- Never retype "RushFi" in a live font. Clear space = 25% of mark height. Nav logo height 24px.
- Never stretch, outline, shadow, smooth, or recolour outside the variants. White versions never on light grounds.

## 3. Colour
Flat fields, hairline borders, no gradients. Blue marks the point — once per element.

| Token | Value | Use |
|---|---|---|
| cream | #FAF8F3 | page background |
| white | #FFFFFF | bands, windows, cards |
| panel | #F5F3EC | hero + guarantee panels |
| card | #FCFBF7 | button card, table header rows, window bar |
| cream-2 | #ECE9DF | soft button, backdrop panels |
| grey-band | #F2F0EA | bolder grey print ground |
| lav-ground | #EEEDFE | lavender bands, picked table rows |
| dark | #121010 | the dark print container |
| ink | #121010 | headlines, dark buttons |
| lede | #55534E | ledes and subs |
| body | #5E5C57 | 15px body copy |
| label | #8A8783 | mono labels, captions |
| ghost | #9A9791 | grey serif lede |
| hair | rgba(18,16,16,.11) | every border |
| blue (Rush Blue) | #3A33F2 | THE accent |
| exhaust | #9B88FA | rocket trail, data, accents on dark |
| porthole | #F8F5E3 | rocket windows only |
| decline | #D0603F | data only: ✕, declined |
| approved | #2F8F5B | data only: ✓, approved |

## 4. Type
- Serif: **P22 Mackinac** (licensed webfont, `/fonts/mackinac-book.woff2` + `/fonts/mackinac-medium.woff2`). Book 400 hero, Medium 500 everything else. Fallback: Source Serif 4.
- Sans: **Inter** 400 (500 only for UI emphasis). Mono: **Geist Mono** 400.

| Role | Face | Spec |
|---|---|---|
| Hero H1 | P22 Mackinac Book 400 | 50–64px · lh 1.06 · ls −0.012em |
| Section H2 | P22 Mackinac Medium 500 | 44–52px · lh 1.1 · second sentence `<em>` blue, upright |
| Card title | P22 Mackinac Medium 500 | 19–20px · lh 1.3 |
| Big figure | P22 Mackinac Medium 500 | 36–96px · ls −0.02em |
| Grey serif lede | P22 Mackinac Medium 500 | 22–25px · lh 1.28 · #9A9791 |
| Lede | Inter 400 | 16.5–18.5px · lh 1.55 · #55534E |
| Body | Inter 400 | 15px · lh 1.6 · #5E5C57 · max-width 470px |
| Button | Inter 400 | 15px · lh 1 · never bold |
| Nav | Inter 400 | 12px · rgba(18,16,16,.78) |
| Mono label | Geist Mono 400 | 10.5px · uppercase · ls .1em · #8A8783 |

## 5. Zebra print (the one texture)
- 17 organic stripes: wavy centre lines whose thickness swells and pinches and tapers to points at both ends, group rotated −18° about the centre of an 800×600 viewBox, `preserveAspectRatio="xMidYMid slice"`.
- Colourways: lavender (#EEEDFE ground, #3A33F2 at .09), lavender strong (.11), grey (#FAF8F3, #121010 at .05), grey band (#F2F0EA, #121010 at .05), dark (#121010, #FFFFFF at .07).
- Parent: `position: relative; overflow: hidden`. Print: `position: absolute; inset: 0`. Content `z-index: 1`. Text on the print sits in a white card.
- Never two zebra bands of the same colour in a row; a white band separates lavender from grey. Never above .11.
- Generate with `<ZebraPrint tone="lav" seed={n} />` (components/site/ZebraPrint.tsx) — do not hand-draw.

## 6. The rocket
- Pixel-art rocket from the logo on a 25×22 grid (`/brand/kit/grid.txt`): blue hull, two square cream windows, a tilted cream porthole with two holes, lavender exhaust breaking into loose pixels. Always points up-right.
- Files: `/brand/kit/mark-{color,white,ink}.svg` (vector, crisp) and `.png`. Rebuild with `node scripts/build-brand-kit.mjs`.
- Placed from the PNG files with `image-rendering: pixelated`. Never redrawn, smoothed, badged or shadowed.
- 56–120px on pages. Idle: 1.6s hover, 2px up-right bob. After a completed form step: one launch up-right. No motion under reduced motion.

## 7. Components (classes in site.css)
- `.s-btn.s-btn-ink` — ink pill, white text, 15px/1 Inter 400, padding 15px 24px, radius 999px.
- `.s-btn.s-btn-soft` — cream-2 pill, ink text. `.s-btn-link` — text with hairline underline.
- `.s-button-card` — hero CTA stack: card ground, hairline, radius 18px, 10px padding, ink button over soft button.
- `.s-chip` — 30px white pill, hairline, 13px lede text.
- `.s-pill-dark` — ink pill with a 22px blue circle holding "›".
- `.s-window` + `.s-winbar` — white, hairline, radius 14px, soft shadow; 34px bar on card ground with three 9px cream-2 dots and a centred Geist Mono 11.5px address (`rushfi.co/offers`).
- `.s-table` — 12.5px rows on .06 hairlines; mono uppercase header on card ground; `.pick` row = lavender ground + 3px blue inset left edge.
- `.s-dark-card` — ink ground, exhaust-coloured mono number, white serif title, 14.5px sub at 62% white. Three in a row.
- `.s-band` (+ `-white`, `-lav`, `-grey`, `-dark`) — 96px vertical padding (64px on phones), hairline bottom border.

## 8. Motion
- Motion lives in windows. Sections fade in once, never on every scroll.
- Offers loop: "Matching lenders…" with pulsing blue square dot (.85s) → each offer row slides 6px up + fades in, one every 850ms (.3s ease) → best fit gets the one blue mark + foot line → hold ~3.4s → restart.
- Blue marks what RushFi picked, never just "good". Windows never resize while animating. Reduced motion = finished frame.

## 9. Page band order (template)
Nav (sticky cream, blur) → Lavender-print hero with button card → White band → Grey/cream band → White band → Lavender-strong band (apply CTA) → Dark band (one per page max) → Footer (cream).