# Colour system (`colors.md`)

## Primary ramp (`criazo.*`)

|`Level`|HEX|Purpose suggestions|
|---|---|---|
|50–200|pastel aqua tints|Subtle washes, tinted chips|
|300–400|lighter mid-tones|Pills backgrounds, badges|
|500 **`#00b7b2`**|baseline brand|Solid CTAs, highlights|
|600–900|deep teal spectrum|Inverted text accents, illustrative gradients|

Marketing Tailwind CDN extends also define shorthand tokens:

```
criazo-primary = #00b7b2
criazo-hover   = #00a09c
criazo-light   = #79b7b6
accent         = #00b7b2
success        = #30d158
```

## Neutral ramp (`neutral.*`)

Anchored palette from Apple-inspired neutrals (see layout). Frequently used combos:

| Class | HEX | Scenario |
|---|---|---|
|`neutral-50/100`|fafafa/f5f5f7|section backgrounds|
|`neutral-200–300`|borders/dividers|
|`neutral-500–600`|body copy|

## Supporting hues

Operational states on dashboard cards rely on saturated Tailwind colors (`blue-*`, `orange-*`, etc.) strictly for qualitative meaning (Submitted, Hot).

Comparison sections pair **red destructive iconography vs green affirmative** cues.

## Gradient usage — audited

Primary documented gradient snippet (contact hero):

```
linear-gradient(to bottom, #ecf4f5 0%, #ffffff 100%)
```

Hero mesh backgrounds on homepage reference dedicated CSS classes embedded in Blade—mirror rather than reinvent.

## Guidance

### Do

- Maintain teal dominance for clickable primaries on light backgrounds.
- Pair dark typography (`slate` / `neutral-900`) on white for maximum clarity.

### Don’t

- Introduce violet/orange gradients for primary CTAs (breaks brand recognition).
- Use pure black (`#000`) fills for large uninterrupted regions—prefer `neutral-900` / imagery.