Product shots for Product Hunt.

# Nocta Pro 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://nocta.pro/

> Create stunning Product Shots.

## Colors

| Token | Value | Use for |
| --- | --- | --- |
| `background` | #fcfcfb | Page background |
| `surface` | #e4e3df | Cards, panels and inputs |
| `text` | #161413 | Body text and headings |
| `text-muted` | #545251 | Secondary text, captions |
| `border` | #e7e4e2 | Dividers and outlines |
| `primary` | #161413 | 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 17.9:1; text on primary is 18.4:1.

## Typography

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

| Style | Size | Line height | Weight |
| --- | --- | --- | --- |
| display | 61px | 1.05 | 600 |
| h1 | 49px | 1.1 | 600 |
| h2 | 39px | 1.15 | 600 |
| h3 | 31px | 1.2 | 600 |
| h4 | 25px | 1.25 | 600 |
| 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 4px, md 8px, lg 12px, xl 16px, button 8px, 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

### Quick
Get to the finished image fast, and keep every sentence short and to the point.
- We say: "From a raw screenshot to a finished shot in under a minute."
- Not: "Our cutting-edge platform transforms a raw screenshot into a finished shot in under a minute."

### Honest
Say exactly what the editor does, with no hype and no promises it does not keep.
- We say: "Your screenshot is never redrawn or retouched. What you see in the editor is what you download."
- Not: "Rest assured, your precious screenshot is never redrawn or retouched, and the editor shows what you download."

### Confident
Write as if the launch already looks great, with calm certainty and no hedging.
- We say: "Make your launch look the part."
- Not: "We are thrilled to help you elevate your launch so it truly exceeds expectations and impresses everyone."


## 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
/* Nocta Pro design system, made with Identitas */
:root {
  /* Color roles */
  --color-background: #fcfcfb;
  --color-surface: #e4e3df;
  --color-text: #161413;
  --color-text-muted: #545251;
  --color-border: #e7e4e2;
  --color-primary: #161413;
  --color-on-primary: #ffffff;
  --color-success: #16a34a; /* suggested */
  --color-warning: #d97706; /* suggested */
  --color-danger: #dc2626; /* suggested */

  /* Primary scale */
  --primary-50: #f6f5f4;
  --primary-100: #e9e7e6;
  --primary-200: #d2d0cf;
  --primary-300: #b6b3b2;
  --primary-400: #979493;
  --primary-500: #7c7a78;
  --primary-600: #656361;
  --primary-700: #4f4c4b;
  --primary-800: #393737;
  --primary-900: #272625;
  --primary-950: #161413;

  /* Neutral scale */
  --neutral-50: #fcf9f8;
  --neutral-100: #f6f3f1;
  --neutral-200: #e7e4e2;
  --neutral-300: #d6d3d2;
  --neutral-400: #a4a19f;
  --neutral-500: #737170;
  --neutral-600: #545251;
  --neutral-700: #413f3e;
  --neutral-800: #282625;
  --neutral-900: #181615;
  --neutral-950: #0a0908;

  /* Type */
  --font-heading: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Satoshi", 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: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-button: 8px;
  --radius-full: 9999px;

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