Espresso, evolved.

# Fellow 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://fellowproducts.com/

> A precision-driven espresso machine built to deliver professional-level performance at home.

## Colors

| Token | Value | Use for |
| --- | --- | --- |
| `background` | #ffffff | Page background |
| `surface` | #e5e7eb | Cards, panels and inputs |
| `text` | #1e1e1f | Body text and headings |
| `text-muted` | #525253 | Secondary text, captions |
| `border` | #e4e4e6 | Dividers and outlines |
| `primary` | #1e1e1f | Main buttons, links and key actions |
| `on-primary` | #ffffff | Text and icons on primary |
| `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, 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 16.7:1; text on primary is 16.7:1.

## Typography

- Headings: **Fellow Solar**, from the brand's own font files (license required).
- Body: **Sohne**, from the brand's own font files (license required).

| Style | Size | Line height | Weight |
| --- | --- | --- | --- |
| display | 61px | 1.05 | 500 |
| h1 | 49px | 1.1 | 500 |
| h2 | 39px | 1.15 | 500 |
| h3 | 31px | 1.2 | 500 |
| h4 | 25px | 1.25 | 500 |
| 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

### Playful
Keep it light, with an emoji now and then, but never pushy or salesy.
- We say: "Free US shipping on orders $75+ Shop Now🚀"
- Not: "Free US shipping is offered on orders of $75 or more. Please proceed to shop now at your earliest convenience."

### Confident
State what the product does in short, clear sentences without hedging or filler.
- We say: "Espresso, evolved."
- Not: "We are pleased to present a significant evolution in the world of espresso for home use."

### Curious
Share the find and why it matters, as if you just discovered it yourself.
- We say: "Fellow Drops — rare coffee finds, hand-picked weekly☕️"
- Not: "Fellow Drops presents rare coffee finds, which are hand-picked on a weekly basis for your consideration."


## 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
/* Fellow design system, made with Identitas */
:root {
  /* Color roles */
  --color-background: #ffffff;
  --color-surface: #e5e7eb;
  --color-text: #1e1e1f;
  --color-text-muted: #525253;
  --color-border: #e4e4e6;
  --color-primary: #1e1e1f;
  --color-on-primary: #ffffff;
  --color-success: #16a34a; /* suggested */
  --color-warning: #d97706; /* suggested */
  --color-danger: #dc2626; /* suggested */

  /* Primary scale */
  --primary-50: #f5f5f6;
  --primary-100: #e8e8e8;
  --primary-200: #d1d1d2;
  --primary-300: #b4b4b5;
  --primary-400: #959596;
  --primary-500: #7a7a7b;
  --primary-600: #636364;
  --primary-700: #4d4d4e;
  --primary-800: #383839;
  --primary-900: #1e1e1f;
  --primary-950: #161616;

  /* Neutral scale */
  --neutral-50: #fafafb;
  --neutral-100: #f3f3f5;
  --neutral-200: #e4e4e6;
  --neutral-300: #d4d4d5;
  --neutral-400: #a1a1a3;
  --neutral-500: #717173;
  --neutral-600: #525253;
  --neutral-700: #404041;
  --neutral-800: #262627;
  --neutral-900: #161617;
  --neutral-950: #09090a;

  /* Type */
  --font-heading: "Fellow Solar", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Sohne", 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(30 30 31 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(30 30 31 / 0.10), 0 2px 4px rgb(30 30 31 / 0.06);
  --shadow-lg: 0 18px 40px -12px rgb(30 30 31 / 0.20), 0 4px 10px rgb(30 30 31 / 0.06);
}
```