# 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.