DESIGN.md — MagnifiLegacy format

### Color — Brand & Neutrals

#### Grayscale (14-step)

| Token | Hex | Usage |

| ------------ | --------- | -------------------------------- |

| gray-0 | #ffffff | Primary canvas (light sections) |

| gray-25 | #fcfdfd | Near-white surface lift |

| gray-50 | #fafafa | Subtle background tint |

| gray-100 | #f5f5f5 | Section backgrounds |

| gray-200 | #f0f0f0 | Card backgrounds, subtle borders |

| gray-300 | #dedede | Default borders |

| gray-400 | #c2c2c2 | Disabled text, dividers |

| gray-500 | #979797 | Tertiary text, strong borders |

| gray-600 | #818181 | Secondary text |

| gray-700 | #606060 | Body text on white |

| gray-800 | #3c3c3c | Strong text |

| gray-900 | #000000 | Primary text & dark canvas |

| gray-950 | #030f12 | Deepest black for layered dark |

#### YellowGold (signature accent)

| Token | Hex | Usage |

| ------------------ | --------- | ------------------------------------ |

| yellowgold-0 | #f9f5e3 | Lightest cream highlight |

| yellowgold-50 | #f5eed0 | Soft cream |

| yellowgold-100 | #f0e6b9 | Pale gold |

| yellowgold-200 | #eadea1 | Light gold |

| yellowgold-300 | #e5d58a | Medium-light gold |

| yellowgold-400 | #e0cd72 | Signature gold — primary accent |

| yellowgold-500 | #bbab5f | Mid gold |

| yellowgold-600 | #95894c | Deep gold |

| yellowgold-700 | #706739 | Bronze-gold |

| yellowgold-800 | #4b4426 | Dark gold |

| yellowgold-900 | #2d2917 | Deepest gold |

| yellowgold-1000 | #a28a62 | Premium brand bronze |

#### Bronze (warm tertiary)

| Token | Hex |

| ------------- | --------- |

| bronze-0 | #f3ede4 |

| bronze-50 | #ebe1d1 |

| bronze-100 | #e1d3bb |

| bronze-200 | #d6c4a4 |

| bronze-300 | #ccb58d |

| bronze-400 | #c2a676 |

| bronze-500 | #a28a62 |

| bronze-600 | #816f4f |

| bronze-700 | #61533b |

| bronze-800 | #413727 |

| bronze-900 | #272118 |

#### Premium Gradient Tokens

```css

--color-premium-from: #e0cd72; / yellowgold-400 /

--color-premium-to: #b39145; / deeper gold /

--color-premium-hover: #b39145;

--color-premium-active: #b39145;

--color-premium-ring: #e0cd72;

--color-premium-foreground: #000000; / black text on gold /

--color-premium-foreground-hover: #ffffff;

```

The Premium linear-gradient from #e0cd72 → #b39145 is the brand's hero element — used on the upgrade CTAs and the gold-tier visual band.

### Color — Data, Status & Accent

| Token | Hex | Usage |

| ------------ | --------- | ------------------------------------ |

| sand-200 | #eeeae4 | Warm neutral background |

| blue-500 | #4a68e8 | Data/chart accent (cooler) |

| blue-600 | #6482fa | Brighter data blue |

| yellow-500 | #ffd747 | Highlight chip / featured |

| yellow-600 | #fab064 | Warm warning amber |

| green-500 | #8ee89c | Positive return / gain |

| green-600 | #8deb88 | Brighter gain indicator |

| success-100| #e6fce1 | Success surface |

| success-300| #8bf285 | Success accent |

| error-100 | #ffcdc2 | Error surface |

| error-200 | #ffa38f | Error accent |

| error-600 | #d43613 | Error text |

| error-700 | #bd2e0e | Error hover |

| border-error | #ff5935 | Error input border |

### Color — Semantic Aliases

```css

--color-surface-0: #ffffff;

--color-surface-50: #fafafa;

--color-surface-100: #f5f5f5;

--color-surface-200: #f0f0f0;

--color-surface-300: #dedede;

--color-surface-400: #c2c2c2;

--color-text-primary: #000000;

--color-text-secondary: #606060;

--color-text-tertiary: #979797;

--color-text-inverse: #ffffff;

--color-text-disabled: #c2c2c2;

--color-border-default: #dedede;

--color-border-subtl: #f0f0f0;

--color-border-strong: #979797;

--color-border-error: #ff5935;

```

---

### Section Rhythm

The page alternates between two canvases:

1. Black canvas (bg-black / #000000) — hero, navigation, footer, premium feature bands

2. White canvas (bg-white / #ffffff) — content sections, feature explainers, comparison strips

Section heights observed:

• Hero: 772px (full viewport feel)

• Feature section: 1043px (long-form storytelling)

• Strip sections: 143px–290px (rhythm breaks)

• Wide feature: 1046px

### Container & Padding

```css

/ Section padding patterns /

padding: 0; / Full-bleed dark sections /

padding: 32px 0; / py-8 — narrow strips /

padding: 48px 0; / py-12 — medium sections /

padding: 0 8px 96px; / px-6 pb-24 — content sections /

/ Responsive overrides /

@media (min-width: 600px) { padding-left: 8px; padding-right: 8px; }

@media (min-width: 900px) { padding-bottom: 96px; }

```

### Responsive Breakpoints (Tailwind defaults)

| Token | Min width |

| ----------- | ---------- |

| min-[600px] | 600px |

| min-[900px] | 900px |

| lg | 1024px |

| xl | 1280px |

---

| Token / Value | Usage |

| ----------------------- | ------------------------------------------ |

| 3px | Subtle pill chips |

| 4px | Tags, code blocks |

| 8px | Default cards & inputs |

| 18px 18px 0 0 | Top-rounded cards (sheet-like panels) |

| 24px | Outlined CTA buttons |

| 50px | Large feature radius |

| 100px 0 0 100px | Left-rounded search field |

| 9999px | Pill buttons, avatars |

### Chamfer / Cut Treatments

Magnifi defines custom corner-cut tokens used on premium UI panels:

```css

--chamfer: ...; / angled corner cut /

--tg-cut: ...; / top-gold cut treatment /

--tp-cut: ...; / top-premium panel cut /

--bc-cut: ...; / bottom-corner cut /

```

These give certain hero/premium sections a faceted, jewel-like silhouette — a subtle nod to luxury fintech identity.

---

• Buttons & links use standard 150–200ms ease transitions

• Hero scroll-revealed elements fade + lift on intersection

• The gold "Premium" CTA shifts to filled-dark on hover via the gradient swap

• Search-bar mode toggles (SEARCH ↔ ANALYZE) animate background fill

---

Premium. Editorial. AI-confident.

Magnifi's design language reads like a wealth-management brand that learned product design — and it shows:

1. Black anchors everything. Black hero, black nav, black footer — projects authority and seriousness.

2. Gold is the voltage. A tightly-controlled #e0cd72 → #b39145 gradient owns every "Premium" surface. Used scarcely, never as a body color.

3. Editorial uppercase eyebrows. PRODUCT, COMPANY, ENTERPRISE, PREMIUM — section labels feel printed, not coded.

4. Pill geometry. Buttons and inputs are aggressively rounded — softens the otherwise austere palette.

5. Variable display fonts. Super Sans VF + Super Serif VF give the brand a custom-tailored typographic voice that no off-the-shelf type pairing achieves.

6. Faceted chamfers. Custom --chamfer / --tp-cut corner treatments hint at luxury detailing — like a watch bezel or a credit-card edge.

7. Restrained data colors. Blue / green / yellow only appear inside charts and indicators — never as primary brand surfaces.

The system is built for an investing product that wants to be trusted with seven-figure portfolios — institutional confidence delivered through consumer-grade craft.