apply-mantel-styles

What this skill does

# Rules For Applying Mantel Brand Styles

When creating visual diagrams or frontend components, you can apply the following style guidelines to ensure consistency with the Mantel brand identity.

## Colour Scheme

- You should aim to use the following primary colours from the Mantel brand palette.
- You _may_ also use tints and shades of these colours as needed, but avoid introducing non-brand colours.

### Palette

| Name       | Hex       | RGB                  |
|------------|-----------|----------------------|
| Ocean      | `#1E5E82` | rgb(30, 94, 130)     |
| Flamingo   | `#D86E89` | rgb(216, 110, 137)   |
| Deep Ocean | `#002A41` | rgb(0, 42, 65)       |
| Sky Blue   | `#81CCEA` | rgb(129, 204, 234)   |
| Cloud      | `#EEF9FD` | rgb(238, 249, 253)   |

### Extended Palette — Brand Ramps (50 lightest → 900 darkest)

Use these tokens for tints, shades, hover states, borders, and surfaces without introducing non-brand colours. Prefer the core step (bold) for each brand colour; reach for neighbouring steps when you need contrast adjustment.

**Ocean** — core `500`

```text
 50  #E8F2F8      500  #1E5E82   ← core
100  #C5DCEA      600  #174E6E
200  #9DC3D8      700  #103D57
300  #6AA5C3      800  #0A2D40
400  #3D89AF      900  #042031
```

**Flamingo** — core `500`

```text
 50  #FAEEF2      500  #D86E89   ← core
100  #F4D1DA      600  #C25079
200  #EDB0BE      700  #9E3456
300  #E690A2      800  #7A1E3D
400  #DE7F92      900  #550E28
```

**Sky** — core `400` (Sky's brand anchor sits at 400, not 500)

```text
 50  #F0FAFD      400  #81CCEA   ← core
100  #D9F1F9      500  #59BAE2
200  #B8E5F5      600  #329DD3
300  #95D6EF      700  #1B7EAD
                  800  #0E5F85
                  900  #064260
```

**Neutral** — greys for text, borders, dividers on light surfaces

```text
 50  #F5F7F9      500  #8A99AB
100  #DDE3EA      600  #5C6A7A
200  #C5CED9      700  #3E4F5E
300  #A8B5C4      800  #293C49
400  #B2BECC      900  #161C21
```

### Anchor Tokens (fixed, not on a ramp)

| Token | Hex | Use |
|---|---|---|
| Deep Ocean | `#002A41` | Primary dark background |
| Cloud | `#EEF9FD` | Primary light / neutral background |
| Skywalker 950 | `#001421` | Near-black dark surface |
| Skywalker 900 | `#001E2F` | Deepest dark section |
| Skywalker 800 | `#042D44` | Dark surface 2 |
| Skywalker 700 | `#073B58` | Dark surface 3 |
| Skywalker 600 | `#0C4F74` | Dark surface 4 (lightest dark) |

### Semantic Status Colours

Use these for success / warning / error / attention states. Do not substitute brand colours — overloading Flamingo for errors breaks the semantic contract users rely on.

| Token | Hex | Use |
|---|---|---|
| Yoda 600 | `#07883D` | Success / positive |
| BB8 600 | `#E87400` | Warning |
| Kylo 600 | `#D91544` | Error / danger |
| Pyre 300 | `#FFD60A` | Highlight / attention |

---

## General Design Principles

### Colour Hierarchy

1. Primary Actions/Elements: Ocean (#1E5E82)
2. Secondary/Supporting: Sky Blue (#81CCEA)
3. Emphasis/Accent: Flamingo (#D86E89)
4. Foundation/Authority: Deep Ocean (#002A41)
5. Background/Neutral: Cloud (#EEF9FD)

- **Light backgrounds** use Cloud (`#EEF9FD`) or white (`#FFFFFF`).
- **Dark backgrounds** use Deep Ocean (`#002A41`). Never use pure black (`#000000`).
- **Primary text** on light backgrounds is Deep Ocean. On dark backgrounds, use white.
- **Accent elements** (borders, icons, highlights) use Ocean, Flamingo, or Sky Blue.

### Semantic Usage

- Use Ocean for primary actions, main navigation, and brand-level emphasis
- Use Sky Blue for interactive elements, information, and secondary actions
- Use Flamingo sparingly for CTAs and brand highlights (not for errors — use Kylo)
- Use Deep Ocean for text, borders, authoritative elements
- Use Cloud for backgrounds, subtle dividers, inactive states
- Use the semantic status colours (Yoda / BB8 / Kylo / Pyre) for success / warning / error / attention — never substitute brand colours for these
- Default to light / day mode colour schemes

### Consistency Rules

- Avoid mixing colour schemes from other brands
- Maintain consistent colour meanings across all diagrams in a project
- When transparency is needed, use rgba values of the brand colours
- For hover/pressed states, step one rung on the brand ramp (e.g. `ocean-500` → `ocean-600` on hover, `flamingo-500` → `flamingo-600` on press). Only fall back to percentage darken/lighten if no ramp token fits

---

## Frontend Component Styles

### Component Guidelines

#### Buttons

**Primary:**
- Background: Ocean (#1E5E82)
- Text: Cloud (#EEF9FD)
- Hover: Deep Ocean (#002A41)
- Border: none or Ocean

**Secondary:**
- Background: Sky Blue (#81CCEA)
- Text: Deep Ocean (#002A41)
- Hover: Ocean (#1E5E82) with Cloud text
- Border: Ocean (#1E5E82)

**Accent/CTA:**
- Background: Flamingo 500 (#D86E89)
- Text: White (#FFFFFF)
- Hover: Flamingo 600 (#C25079)
- Border: none

**Ghost/Outline:**
- Background: transparent
- Text: Ocean (#1E5E82)
- Hover: Cloud (#EEF9FD) background
- Border: Ocean (#1E5E82)

#### Navigation

**Header:**
- Background: Deep Ocean (#002A41)
- Text: Cloud (#EEF9FD)
- Active: Sky Blue (#81CCEA)
- Hover: Ocean (#1E5E82) background

**Sidebar:**
- Background: Cloud (#EEF9FD)
- Text: Deep Ocean (#002A41)
- Active: Ocean (#1E5E82) with Cloud text
- Hover: Sky Blue (#81CCEA) background

#### Forms

**Input Fields:**
- Background: White (#FFFFFF)
- Border: Sky Blue (#81CCEA)
- Focus Border: Ocean (#1E5E82)
- Text: Deep Ocean (#002A41)
- Placeholder: Sky Blue (#81CCEA)
- Error Border: Kylo 600 (#D91544)

**Labels:**
- Colour: Ocean (#1E5E82)
- Required Indicator: Flamingo (#D86E89)

#### Cards and Surfaces

**Standard Card:**
- Background: White (#FFFFFF)
- Border: Cloud (#EEF9FD)
- Shadow: rgba(0, 42, 65, 0.1)

**Highlighted Card:**
- Background: Cloud (#EEF9FD)
- Border: Sky Blue (#81CCEA)
- Shadow: rgba(30, 94, 130, 0.15)

#### Alerts and Messages

Use the semantic status colours — do not overload Flamingo for errors/warnings or Ocean for success.

**Error:**
- Background: Kylo 600 (#D91544) at 10% opacity
- Border: Kylo 600 (#D91544)
- Text: Deep Ocean (#002A41)
- Icon: Kylo 600 (#D91544)

**Warning:**
- Background: BB8 600 (#E87400) at 10% opacity
- Border: BB8 600 (#E87400)
- Text: Deep Ocean (#002A41)
- Icon: BB8 600 (#E87400)

**Success:**
- Background: Yoda 600 (#07883D) at 10% opacity
- Border: Yoda 600 (#07883D)
- Text: Deep Ocean (#002A41)
- Icon: Yoda 600 (#07883D)

**Info:**
- Background: Sky Blue (#81CCEA) at 10% opacity
- Border: Sky Blue (#81CCEA)
- Text: Deep Ocean (#002A41)
- Icon: Sky Blue (#81CCEA)

#### Data Visualisation (Charts)

- Primary Series: Ocean (#1E5E82)
- Secondary Series: Sky Blue (#81CCEA)
- Tertiary Series: Deep Ocean (#002A41)
- Highlight/Accent: Flamingo (#D86E89)
- Background: Cloud (#EEF9FD)
- Grid Lines: Sky Blue (#81CCEA) at 20% opacity
- Text: Deep Ocean (#002A41)

### CSS Variables

```css
:root {
   /* Core brand (anchor steps) */
   --brand-ocean: #1E5E82;        /* ocean-500 */
   --brand-flamingo: #D86E89;     /* flamingo-500 */
   --brand-sky-blue: #81CCEA;     /* sky-400 */
   --brand-deep-ocean: #002A41;
   --brand-cloud: #EEF9FD;

   /* Ocean ramp */
   --ocean-50:  #E8F2F8; --ocean-100: #C5DCEA; --ocean-200: #9DC3D8;
   --ocean-300: #6AA5C3; --ocean-400: #3D89AF; --ocean-500: #1E5E82;
   --ocean-600: #174E6E; --ocean-700: #103D57; --ocean-800: #0A2D40;
   --ocean-900: #042031;

   /* Flamingo ramp */
   --flamingo-50:  #FAEEF2; --flamingo-100: #F4D1DA; --flamingo-200: #EDB0BE;
   --flamingo-300: #E690A2; --flamingo-400: #DE7F92; --flamingo-500: #D86E89;
   --flamingo-600: #C25079; --flamingo-700: #9E3456; --flamingo-800: #7A1E3D;
   --flamingo-900: #550E28;

   /* Sky ramp */
   --sky-50:  #F0FAFD; --sky-100: #D9F1F9; --sky-200: #B8E5F5;
   --sky-300: #95D6EF; --sky-400: #81CCEA; --sky-500: #59BAE2;
   --sky-600: #329DD3; --sky-700: #1B7EAD; --sky-800: #0E5F85;
   --sky-900: #064260;

   /* Neutral greys */
   --neutral-50:  #F5F7F9; --neutral-100: #D