# Color & Type System — "Bubblegum Arcade"

A loud, candy-store palette built on bubblegum pink and grape purple, with a single zesty lime accent for pure sugar-rush moments.

## Color Tokens

| Role                  | Token          | Hex       | Application                                                                 |
| --------------------- | -------------- | --------- | --------------------------------------------------------------------------- |
| Primary · Grape       | `--grape`      | `#3D1E5C` | Headlines, body text, primary dark surfaces, footer text on light           |
| Primary · Grape Deep  | `--grape-deep` | `#23103A` | Deepest surfaces — footer, dark sections, button hover states               |
| Surface · Blush       | `--blush`      | `#FFE8F2` | Default page background — soft cotton-candy pink, never pure white          |
| Surface · Blush 2     | `--blush-2`    | `#FFD4E5` | Secondary surfaces — cards, section transitions, testimonial bg             |
| Line                  | `--line`       | `#F5B8D2` | Dividers, table borders, card borders, FAQ item borders                     |
| Mute                  | `--mute`       | `#8A5A7A` | Secondary text, eyebrows, smallprint, captions                              |
| Secondary · Bubblegum | `--bubblegum`  | `#FF4FA3` | Hot pink for primary buttons, card borders, icon fills                      |
| Accent · Lime Pop     | `--lime`       | `#D4FF3D` | Sparingly — CTA buttons on dark, KPI highlights, smallprint accents on dark |

## Section-Level Application

| Section              | Background                                                             | Body text               | Heading   | Notes                                                                              |
| -------------------- | ---------------------------------------------------------------------- | ----------------------- | --------- | ---------------------------------------------------------------------------------- |
| Hero                 | **Gradient** `--blush` → `--blush-2` → `--bubblegum` (135°, see below) | `--grape`               | `--grape` | Eyebrow in `--mute`; eyebrow pill in `--bubblegum` at 0.10 alpha                   |
| Boxes (feature grid) | `--blush`                                                              | `--grape`               | `--grape` | See **Card Rule**                                                                  |
| Pricing              | `--blush-2`                                                            | `--grape`               | `--grape` | Featured tier card on `--grape` with `--blush` text; CTA in `--lime`               |
| Testimonial          | `--blush-2`                                                            | `--grape`               | `--grape` | Quote in `--grape`, author name `--grape`, author role `--mute`                    |
| Trusted by           | `--blush`                                                              | `--mute`                | `--grape` | Logos render in `--grape`                                                          |
| CTA                  | `--grape`                                                              | `--blush`               | `--blush` | Primary button `--lime` bg / `--grape` text; eyebrow `--blush` at 70%              |
| FAQ                  | `--blush`                                                              | `--grape`               | `--grape` | Item border `--line`; expanded answer in `--grape` at default weight               |
| Steps                | `--blush-2`                                                            | `--grape`               | `--grape` | Eyebrow `--mute`; subtitle-strong `--bubblegum`                                    |
| Comparison           | `--blush`                                                              | `--grape`               | `--grape` | Subtitle-strong `--bubblegum`                                                      |
| Alternate            | `--blush`                                                              | `--grape`               | `--grape` | Subtitle-strong `--bubblegum`                                                      |
| Custom               | `--blush`                                                              | `--grape`               | `--grape` | Subtitle-strong `--bubblegum`                                                      |
| Collection page      | `--blush`                                                              | `--grape`               | `--grape` | Smallprint `--mute`                                                                |
| Feed                 | `--blush`                                                              | `--grape`               | `--grape` | Smallprint `--mute`                                                                |
| Navigation           | `--blush`                                                              | `--grape`               | —         | Matches body background                                                            |
| Footer               | `--grape-deep`                                                         | `--blush` (60% opacity) | `--blush` | Group titles uppercase mono in `--lime`; links `--blush` 60%, hover `--blush` 100% |

## Hero Gradient

Set on the hero's first background layer:

- `--lr-hero-background-a-image`: `linear-gradient(135deg, #FFE8F2 0%, #FFD4E5 55%, #FF4FA3 100%)`
- `--lr-hero-background-a-color`: `#FFE8F2` (fallback)

The gradient runs from blush in the top-left to bubblegum in the bottom-right. Hero text stays in `--grape` for contrast — keep the headline left-aligned so it sits over the lighter end of the gradient.

## Card Rule

All card items — boxes, pricing tiers, testimonial items — share one surface treatment:

- **Background:** `--blush-2`
- **Border:** `2px solid --bubblegum`
- **Padding:** `2rem`

The only exception is the pricing **Featured** tier, which inverts to `--grape` background with `--blush` text and a `--lime` CTA button.

## Buttons

| Variant       | Background    | Text      | Border        | Hover bg    |
| ------------- | ------------- | --------- | ------------- | ----------- |
| Primary       | `--bubblegum` | `--blush` | `--bubblegum` | `--grape`   |
| Secondary     | transparent   | `--grape` | `--line` 1px  | `--blush-2` |
| CTA (on dark) | `--lime`      | `--grape` | `--lime`      | `--blush`   |

## Eyebrow Pills

- Background: `--bubblegum` at alpha `0.10`
- Text color: `--mute`
- Font: mono, uppercase, +10% tracking

Section-scoped pills (hero, cta, testimonial, etc.) follow the same tint — always low-alpha bubblegum, never solid.

## Font Stack

| Role               | Family            | Source                  | Application                                               |
| ------------------ | ----------------- | ----------------------- | --------------------------------------------------------- |
| Display (4xl–xl)   | **Caprasimo**     | Google Fonts            | Headlines, section titles, hero text — chunky retro serif |
| Body (base, lg–sm) | **Space Grotesk** | Google Fonts (variable) | Body copy, buttons, navigation                            |
| Mono (xs)          | **DM Mono**       | Google Fonts            | Eyebrows, smallprint, footer group titles                 |

## Accent Discipline

- `--lime` only appears against `--grape` or `--grape-deep` — never on blush surfaces (it disappears).
- `--bubblegum` is the workhorse: primary buttons, card borders, subtitle-strong emphasis. It can repeat across the page.
- Card borders are intentionally thick (`2px`) — this is the playful signature.
- The hero gradient is the only multi-color background on the page; all other sections stay flat.