Free marketing tools.

# mktbox 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://mktbox.xyz/

> Tools for marketers, founders and creators. Free to use and download, no account required.

## Colors

| Token | Value | Use for |
| --- | --- | --- |
| `background` | #f4f3ef | Page background |
| `surface` | #f1f3fc | Cards, panels and inputs |
| `text` | #141413 | Body text and headings |
| `text-muted` | #515259 | Secondary text, captions |
| `border` | #e2e4ed | Dividers and outlines |
| `primary` | #5d61d4 | 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.6:1; text on primary is 5.1:1.

## Typography

- Headings: **Schibsted Grotesk**, from Google Fonts: https://fonts.google.com/specimen/Schibsted+Grotesk.
- Body: **Schibsted Grotesk**, from Google Fonts: https://fonts.google.com/specimen/Schibsted+Grotesk.

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

### Plain-spoken
Say what the tool does in short sentences and skip the hype.
- We say: "Tools for marketers, founders and creators. Free to use and download, no account required."
- Not: "Our solutions serve marketers, founders and creators, obtainable at no charge without registration."

### Practical
Name the platforms or actions outright so readers know what happens next.
- We say: "See your link on LinkedIn, X and WhatsApp before you share it."
- Not: "Kindly endeavor to preview your link across LinkedIn, X and WhatsApp prior to its distribution."

### Casual, direct
Talk like a peer, using short commands that get straight to the task.
- We say: "Score your hook before you hit post."
- Not: "We kindly request that you evaluate the efficacy of your opening hook prior to publication."


## 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
/* mktbox design system, made with Identitas */
:root {
  /* Color roles */
  --color-background: #f4f3ef;
  --color-surface: #f1f3fc;
  --color-text: #141413;
  --color-text-muted: #515259;
  --color-border: #e2e4ed;
  --color-primary: #5d61d4;
  --color-on-primary: #ffffff;
  --color-success: #16a34a; /* suggested */
  --color-warning: #d97706; /* suggested */
  --color-danger: #dc2626; /* suggested */

  /* Primary scale */
  --primary-50: #f2f4ff;
  --primary-100: #e2e6ff;
  --primary-200: #c5cdff;
  --primary-300: #a2adff;
  --primary-400: #7e87fb;
  --primary-500: #5d61d4;
  --primary-600: #5053bf;
  --primary-700: #3d3e9c;
  --primary-800: #2c2b77;
  --primary-900: #1d1d54;
  --primary-950: #101231;

  /* Neutral scale */
  --neutral-50: #f8faff;
  --neutral-100: #f1f3fc;
  --neutral-200: #e2e4ed;
  --neutral-300: #d2d4dc;
  --neutral-400: #9fa1a9;
  --neutral-500: #707179;
  --neutral-600: #515259;
  --neutral-700: #3e3f46;
  --neutral-800: #25262c;
  --neutral-900: #15161c;
  --neutral-950: #08090e;

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