Bookings that fill themselves.

# Ploverly 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://ploverly.app

> Ploverly takes the bookings, sends the reminders and fills the gap when someone cancels. Made for studios with one front desk, or none.

## Colors

| Token | Value | Use for |
| --- | --- | --- |
| `background` | #f6f6f1 | Page background |
| `surface` | #ffffff | Cards, panels and inputs |
| `text` | #0f1b33 | Body text and headings |
| `text-muted` | #4f5359 | Secondary text, captions |
| `border` | #e0e5ed | Dividers and outlines |
| `primary` | #0f1b33 | Main buttons, links and key actions |
| `on-primary` | #ffffff | Text and icons on primary |
| `accent` | #c8f03c | 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 15.8:1; text on primary is 17.1:1.

## Typography

- Headings: **Bricolage Grotesque**, from Google Fonts: https://fonts.google.com/specimen/Bricolage+Grotesque.
- Body: **Geist**, from Google Fonts: https://fonts.google.com/specimen/Geist.

| Style | Size | Line height | Weight |
| --- | --- | --- | --- |
| display | 61px | 1.05 | 800 |
| h1 | 49px | 1.1 | 800 |
| h2 | 39px | 1.15 | 800 |
| h3 | 31px | 1.2 | 800 |
| h4 | 25px | 1.25 | 800 |
| 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 5px, md 10px, lg 15px, xl 20px, button 9999px, 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

### Clear and friendly
Keep messages short and kind. Clients get nudged, never chased or scolded.
- We say: "A short text the evening before and an email the morning of. Clear, friendly, never pushy."
- Not: "Automated messages are dispatched by SMS the prior evening and by email the morning of the session."

### Calm and reassuring
Tell owners what got handled, not how. Reassure them that the spot is already sorted.
- We say: "When someone cancels, the next person gets the spot. You find out after it's sorted."
- Not: "Upon cancellation, the next individual is allocated the vacancy. You are informed after resolution."

### Plainspoken
Use short, concrete sentences that name the time or people gained.
- We say: "Less time on the phone. More people in the room."
- Not: "Our innovative platform substantially reduces telephone burden and maximises in-studio client attendance."


## 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
/* Ploverly design system, made with Identitas */
:root {
  /* Color roles */
  --color-background: #f6f6f1;
  --color-surface: #ffffff;
  --color-text: #0f1b33;
  --color-text-muted: #4f5359;
  --color-border: #e0e5ed;
  --color-primary: #0f1b33;
  --color-on-primary: #ffffff;
  --color-accent: #c8f03c;
  --color-success: #16a34a; /* suggested */
  --color-warning: #d97706; /* suggested */
  --color-danger: #dc2626; /* suggested */

  /* Primary scale */
  --primary-50: #f0f5ff;
  --primary-100: #dee8fb;
  --primary-200: #c5d2ea;
  --primary-300: #a6b5d1;
  --primary-400: #8596b4;
  --primary-500: #6b7b99;
  --primary-600: #55637f;
  --primary-700: #414d65;
  --primary-800: #2e384b;
  --primary-900: #1f2634;
  --primary-950: #0f1b33;

  /* Accent scale */
  --accent-50: #ebffbf;
  --accent-100: #c8f03c;
  --accent-200: #c2e06e;
  --accent-300: #a3c427;
  --accent-400: #86a300;
  --accent-500: #6d8600;
  --accent-600: #586d00;
  --accent-700: #445500;
  --accent-800: #313e00;
  --accent-900: #212b00;
  --accent-950: #131900;

  /* Neutral scale */
  --neutral-50: #f6faff;
  --neutral-100: #eff4fc;
  --neutral-200: #e0e5ed;
  --neutral-300: #d0d4dc;
  --neutral-400: #9da2a9;
  --neutral-500: #6e7279;
  --neutral-600: #4f5359;
  --neutral-700: #3c4046;
  --neutral-800: #23272c;
  --neutral-900: #13161c;
  --neutral-950: #07090e;

  /* Type */
  --font-heading: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Geist", 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: 5px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-xl: 20px;
  --radius-button: 9999px;
  --radius-full: 9999px;

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