DESIGN.md — BettermentLegacy format

### Color — Navy (Primary Brand)

| Token | Hex | Usage |

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

| navy-1000 | #000543 | Deepest brand navy — text on light |

| navy-900 | #000b50 | Heading text, primary surface |

| navy-800 | #042d70 | Strong navy — display headings |

| navy-700 | #12438f | Card / footer surfaces |

| navy-650 | #124598 | Mid navy |

| navy-600 | #1555ba | Hover state navy |

| navy-500 | #1d6ae5 | Signature link / button blue |

| navy-400 | #5696ee | Bright accent blue |

| navy-300 | #8fb5f2 | Soft accent |

| navy-200 | #9ec9ff | Highlight |

| navy-100 | #bbdcfa | Pale blue surface |

| navy-50 | #e3f8ff | Coolest blue tint background |

### Color — Yellow / Gold (Accent CTA)

| Token | Hex | Usage |

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

| gold-700 | #8f7220 | Deep gold text |

| gold-600 | #5a4a1c | Deepest brown-gold |

| gold-500 | #ffac38 | Saturated amber |

| gold-400 | #ffc729 | Signature Betterment yellow |

| gold-300 | #ffd553 | Light yellow |

| gold-250 | #ffdb4d | Brighter mid-yellow |

| gold-200 | #fee27d | Pale yellow |

| gold-150 | #fdeb99 | Lighter pale |

| gold-100 | #fdf3b4 | Very pale yellow |

| gold-75 | #fcfcd0 | Cream |

| gold-50 | #fcfcd1 | Faintest cream |

| gold-25 | #fbf6ee | Off-white warm tint |

| gold-cream | #fef8f0 | Section background cream |

| gold-paper | #f9f0e2 | Warm paper background |

### Color — Teal / Aqua (Secondary)

| Token | Hex | Usage |

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

| teal-900 | #21494e | Deep teal text |

| teal-700 | #377982 | Mid teal |

| teal-400 | #66c2cc | Bright teal accent |

| teal-100 | #bdedeb | Light teal surface |

| teal-50 | #dafcf5 | Lightest teal tint |

### Color — Coral / Orange (Energy)

| Token | Hex | Usage |

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

| coral-900 | #7d2903 | Deepest burnt orange |

| coral-800 | #b0261d | Strong red-orange |

| coral-700 | #c74106 | Burnt orange |

| coral-600 | #f9692b | Vivid coral |

| coral-500 | #fa7d29 | Bright orange |

| coral-400 | #EF6B51 | Signature coral |

| coral-300 | #ff835e | Soft coral |

| coral-100 | #fff1f0 | Pale coral tint surface |

### Color — Purple (Tertiary)

| Token | Hex | Usage |

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

| purple-900 | #361683 | Deep purple |

| purple-700 | #471ab5 | Strong purple |

| purple-500 | #703dea | Mid purple |

| purple-300 | #a281f1 | Light purple |

| purple-100 | #c3acfd | Pale purple |

### Color — Neutrals

| Token | Hex | Usage |

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

| gray-1000 | #000000 | Pure black |

| gray-950 | #1a1d20 | Near-black |

| gray-900 | #212121 | Strong text |

| gray-800 | #424242 | Body emphasis |

| gray-700 | #494A52 | Secondary text |

| gray-600 | #5c5c5c | Muted text |

| gray-500 | #757575 | Placeholder, captions |

| gray-450 | #8f8f8f | Disabled |

| gray-400 | #a0a0a0 | Border strong |

| gray-350 | #a8a8a8 | Light disabled |

| gray-300 | #c4c4c4 | Borders |

| gray-275 | #CCC | Light borders |

| gray-250 | #CED4DB | Cool gray border |

| gray-225 | #D0D0D0 | Subtle border |

| gray-200 | #D1D6DC | Cool gray divider |

| gray-150 | #dbdbdb | Light divider |

| gray-100 | #e6e6e6 | Card outline |

| gray-75 | #EBEFF3 | Cool surface |

| gray-50 | #f5f5f5 | Body background |

| gray-25 | #F8FAFC | Lightest surface |

| white | #ffffff | Card surface |

---

### Body Container

```css

body {

font-family: "GT America", "Helvetica Neue", Helvetica, Arial, sans-serif;

background-color: #f5f5f5; / gray-50 — warm soft canvas /

-webkit-font-smoothing: antialiased;

}

```

### Section Pattern

Betterment alternates between:

1. Cream/Yellow canvases (#fbf6ee, #fef8f0, #fdf3b4) — warm, magazine-like content sections

2. Navy canvases (#000543, #000b50, #12438f) — premium feature bands, hero overlays

3. Pale blue canvases (#e3f8ff, #bbdcfa) — product / portfolio sections

4. White surfaces for cards and feature grids

### Container Widths

• Standard content max-width: ~120rem (1200px)

• Editorial sections: ~96rem (960px) for comfortable reading

• Hero full-bleed: 100% with internal padding

---

| Value | Usage |

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

| 0 | Sharp, modular blocks |

| 3px | Small chips & tags |

| 6px | Buttons, cards, inputs (default) |

| .2rem–.8rem | Generic radii (2–8px) |

| 1rem | Larger card grouping (10px) |

| 6px 6px 0 0 | Top-only tabs |

| 0 0 6px 6px | Bottom-only sheets |

| 0 0 1rem 1rem | Bottom-sheet panels (10px) |

---

• Buttons translate +2px on hover with shadow collapsing 4px→2px (push-down effect)

• Section reveals fade-in on scroll

• Yellow CTA pulse on focus states

• Navigation sticky reveal as user scrolls past hero

---

Confident. Approachable. Editorial.

Betterment's design language reads like a financial publication that became an investing product:

1. Navy + Yellow as the brand axis. Deep navy #000543 for gravitas, pure sunshine #ffc729 for energy — a contrast that signals both "trustworthy bank" and "modern startup."

2. Custom GT America typography in five weights and three widths gives every section its own typographic voice — Compressed Italic for editorial flourish, Black for hero impact, Light for lead copy.

3. Cream-yellow canvases (#fbf6ee, #fef8f0) soften the navy gravitas with magazine warmth.

4. Solid offset button shadows are the unmistakable interaction signature — every CTA has a colored "stamped block" feel.

5. Fancy bullets with circled checks and gold dots replace boring lists with editorial detail.

6. Tabular numerals everywhere financial data appears — a small craftsmanship choice that pays off across the entire product.

7. Coral, teal, purple appear only inside illustrations and data visualizations — they never compete with the navy/yellow brand axis.

The result is a fintech aesthetic that feels neither cold-corporate nor crypto-bro — a calm, well-edited investment magazine that you can also use to manage your portfolio.