Slow light, poured in Porto.

# Ceralva design system

Use this file when building anything for this brand. Follow it exactly; when something is missing, pick the closest token rather than inventing new values.

Website: https://ceralva.pt

> Soy candles made by hand in small batches, with scents from the north of Portugal. Each one burns clean for around 45 hours.

## Colors

| Token | Value | Use for |
| --- | --- | --- |
| `background` | #f3ebdd | Page background |
| `surface` | #7c8466 | Cards, panels and inputs |
| `text` | #2b211c | Body text and headings |
| `text-muted` | #59504e | Secondary text, captions |
| `border` | #ece2df | Dividers and outlines |
| `primary` | #a8482a | Main buttons, links and key actions |
| `on-primary` | #ffffff | Text and icons on primary |
| `accent` | #7c8466 | Highlights and secondary emphasis |
| `success` | #16a34a | Confirmation states (suggested default) |
| `warning` | #d97706 | Caution states (suggested default) |
| `danger` | #dc2626 | Errors and destructive actions (suggested default) |

Scales: primary 50 to 950, accent 50 to 950, neutral 50 to 950 (see tokens below).

Rules:
- Use `primary` for the single most important action on a screen, not for decoration.
- Text sits on `background` or `surface` in `text`; secondary text uses `text-muted`.
- Text on background contrast is 13.3:1; text on primary is 5.8:1.

## Typography

- Headings: **Fraunces**, from Google Fonts: https://fonts.google.com/specimen/Fraunces.
- Body: **Karla**, from Google Fonts: https://fonts.google.com/specimen/Karla.

| Style | Size | Line height | Weight |
| --- | --- | --- | --- |
| display | 61px | 1.05 | 400 |
| h1 | 49px | 1.1 | 400 |
| h2 | 39px | 1.15 | 400 |
| h3 | 31px | 1.2 | 400 |
| h4 | 25px | 1.25 | 400 |
| large | 20px | 1.5 | 400 |
| body | 16px | 1.6 | 400 |
| small | 13px | 1.5 | 400 |

## Spacing, corners and shadows

- Spacing steps: 0px, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px. Use only these.
- Corners: sm 2px, md 2px, lg 3px, xl 4px, button 2px, full 9999px. Buttons use `radius-button`.
- Shadows: sm for inputs and small cards, md for menus and popovers, lg for dialogs.

## Components

- Primary button: `primary` background, `on-primary` text, `radius-button`, body font at 15px, medium weight.
- Secondary button: transparent background, 1px `border`, `text` color, same shape as primary.
- Inputs: `surface` background, 1px `border`, `radius-md`, 44px tall, focus ring in `primary`.
- Cards: `surface` background, 1px `border` or `shadow-sm`, `radius-lg`, 24px padding.

## Voice

### Unhurried
Write at a calm, slow pace so the copy feels like the candle itself.
- We say: "No rush, no shortcuts. Just good wax, good scent and a calmer evening."
- Not: "Hurry, grab one now! Good wax, good scent and a calmer evening, so act fast!"

### Hands-on
Mention the kitchen-table start and hand pouring, since personal work is central.
- We say: "Ceralva began on a kitchen table in Porto in 2021. We still pour every candle ourselves, with cotton wicks, plant wax and jars you can keep long after the last light."
- Not: "Founded 2021 at a kitchen table in Porto, we hereby pour candles with cotton wicks, plant wax and jars."

### Plainly precise
State facts like batch size and numbering directly, without extra adjectives.
- We say: "Small batches of 60, numbered on the base."
- Not: "We hereby present our esteemed small batches of sixty, each individually numbered upon the base."


## Logo

- Keep clear space around the logo at least as tall as the logo itself.
- Don't stretch, rotate, recolor or add effects to it.

## Tokens

```css
/* Ceralva design system, made with Identitas */
:root {
  /* Color roles */
  --color-background: #f3ebdd;
  --color-surface: #7c8466;
  --color-text: #2b211c;
  --color-text-muted: #59504e;
  --color-border: #ece2df;
  --color-primary: #a8482a;
  --color-on-primary: #ffffff;
  --color-accent: #7c8466;
  --color-success: #16a34a; /* suggested */
  --color-warning: #d97706; /* suggested */
  --color-danger: #dc2626; /* suggested */

  /* Primary scale */
  --primary-50: #fff2ee;
  --primary-100: #ffe0d7;
  --primary-200: #ffc0ad;
  --primary-300: #f5997d;
  --primary-400: #d97658;
  --primary-500: #bb593b;
  --primary-600: #a8482a;
  --primary-700: #803017;
  --primary-800: #60210c;
  --primary-900: #441607;
  --primary-950: #270d06;

  /* Accent scale */
  --accent-50: #f3f7e9;
  --accent-100: #e5ebd8;
  --accent-200: #ced5bd;
  --accent-300: #b1b89c;
  --accent-400: #919a7b;
  --accent-500: #7c8466;
  --accent-600: #60674b;
  --accent-700: #4a5038;
  --accent-800: #363b27;
  --accent-900: #25281a;
  --accent-950: #15170f;

  /* Neutral scale */
  --neutral-50: #fff8f4;
  --neutral-100: #fbf1ee;
  --neutral-200: #ece2df;
  --neutral-300: #dcd2cf;
  --neutral-400: #a99f9c;
  --neutral-500: #786f6d;
  --neutral-600: #59504e;
  --neutral-700: #463e3b;
  --neutral-800: #2c2522;
  --neutral-900: #1b1412;
  --neutral-950: #0e0806;

  /* Type */
  --font-heading: "Fraunces", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  --text-display: 3.8125rem; --leading-display: 1.05;
  --text-h1: 3.0625rem; --leading-h1: 1.1;
  --text-h2: 2.4375rem; --leading-h2: 1.15;
  --text-h3: 1.9375rem; --leading-h3: 1.2;
  --text-h4: 1.5625rem; --leading-h4: 1.25;
  --text-large: 1.25rem; --leading-large: 1.5;
  --text-body: 1rem; --leading-body: 1.6;
  --text-small: 0.8125rem; --leading-small: 1.5;

  /* Spacing */
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;

  /* Corners */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 3px;
  --radius-xl: 4px;
  --radius-button: 2px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(43 33 28 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(43 33 28 / 0.10), 0 2px 4px rgb(43 33 28 / 0.06);
  --shadow-lg: 0 18px 40px -12px rgb(43 33 28 / 0.20), 0 4px 10px rgb(43 33 28 / 0.06);
}
```