# Smoky Teal Signal UI Style Guide

This palette is based on the following four colours and their approximate visual weights:

- `#7A676F` — **71.28%** — dominant smoky mauve / neutral foundation
- `#10B3BB` — **23.59%** — teal action and emphasis
- `#E51A22` — **3.77%** — strong signal / alert accent
- `#FFFEFE` — **0.76%** — clean light highlight

The system is designed to feel calm, structured and modern, while still providing clear focus and alert states.

---

## 1. Core design logic

Use the colours in this order of importance:

1. **Smoky mauve** for the emotional base and most of the personality
2. **Teal** for primary actions and selected states
3. **Red** only for alerts, destructive actions and very small accents
4. **White / off-white** for highlight surfaces and clean breathing room

This keeps the design ADHD-friendly by avoiding too many competing high-energy colours.

---

## 2. Light mode tokens

| Token | Value | Purpose |
|---|---:|---|
| `--page` | `#F6F2F4` | Main page background |
| `--page-accent` | `#ECE5E8` | Background depth |
| `--surface` | `#FFFEFE` | Cards and dialogs |
| `--surface-alt` | `#F2ECEF` | Inputs and secondary sections |
| `--surface-strong` | `#E1D7DC` | Selected surfaces |
| `--text` | `#2F2529` | Main text |
| `--muted` | `#6E5C63` | Secondary text |
| `--border` | `#D4C8CD` | Borders and dividers |
| `--primary` | `#10B3BB` | Main primary action |
| `--primary-hover` | `#0B99A0` | Primary hover |
| `--secondary` | `#E4DCE0` | Neutral secondary action |
| `--secondary-hover` | `#D8CDD2` | Secondary hover |

---

## 3. Dark mode tokens

| Token | Value | Purpose |
|---|---:|---|
| `--page` | `#0F0C0D` | Main background |
| `--page-accent` | `#171214` | Dark depth |
| `--surface` | `#1B1618` | Main card surface |
| `--surface-alt` | `#272023` | Inputs and support areas |
| `--surface-strong` | `#383034` | Selected areas |
| `--text` | `#FFFDFD` | Main text |
| `--muted` | `#CBBEC4` | Secondary text |
| `--border` | `#51464B` | Borders |
| `--primary` | `#22C2CA` | Main teal action |
| `--primary-hover` | `#10B3BB` | Hover teal |
| `--secondary` | `#433A3E` | Neutral secondary action |
| `--secondary-hover` | `#584D52` | Secondary hover |

---

## 4. Supporting colours

| Role | Light | Dark | Use |
|---|---:|---:|---|
| Smoky accent | `#7A676F` | `#9B8A91` | visual identity and soft structure |
| Teal support | `#10B3BB` | `#22C2CA` | action and focused guidance |
| Signal red | `#E51A22` | `#F06066` | alerts and destructive action |
| Success | `#5B827F` | `#8CB1AE` | confirmation and positive states |

---

## 5. Colour usage rules

### Use smoky mauve for:
- large backgrounds
- structural surfaces
- chips, panels and neutral framing
- establishing mood

### Use teal for:
- primary buttons
- active links
- selected controls
- focused components
- positive forward motion

### Use red only for:
- danger
- errors
- critical status
- highly limited emphasis

Do **not** use red as a second primary colour.

### Use white / off-white for:
- cards
- breathing room
- clean contrast
- clarity inside dense layouts

---

## 6. ADHD-friendly guidance

- Let the mauve foundation do most of the visual work.
- Use teal to show the next important action.
- Keep red scarce so it remains meaningful.
- Avoid placing teal and red together unless the component truly needs both.
- Prefer calm spacing and clear layout over extra decoration.
- Keep one visual priority per region.

---

## 7. Typography

Fonts are loaded through the Google Fonts CSS API:

```css
@import url(
  "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Lexend:wght@400;500;600;700&display=swap"
);
```

Use:

- **Lexend** for headings, labels, buttons and subheadings
- **Atkinson Hyperlegible** for paragraph text and longer reading

Recommended sizes:

- body: `18px`
- labels: `16–17px`
- buttons: `16–18px`
- subheadings: `15–17px`
- card heading: `20–24px`

---

## 8. Typography sample card

```html
<article class="sample-card">
  <p class="sample-card__eyebrow">Typography sample</p>
  <h3>A calm but high-clarity card heading</h3>
  <p class="sample-card__subheading">
    A concise subheading demonstrates Lexend with the smoky neutral and teal palette.
  </p>
  <p class="sample-card__body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</article>
```

---

## 9. Final rule

If the interface starts to feel noisy, reduce red first and then simplify teal accents. The smoky neutral base should remain the calm dominant layer.