Minimalist design system

---
version: alpha
name: Minimalist
description: "Light interface measured from beminimalist.co: ProximaNovaRegular type, vivid orange accents, flat surfaces and 6px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#2C2C2C"
  overlay: "#00000014"
  outline: "#0000004D"
  primary: "#FB6900"
  on-primary: "#000000"
  secondary: "#54A5CD"
typography:
  headline-display:
    fontFamily: ProximaNovaRegular
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1
  headline-lg:
    fontFamily: ProximaNovaRegular
    fontSize: 30px
    fontWeight: 1000
    lineHeight: 1.1
  body-md:
    fontFamily: ProximaNovaRegular
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.71
  body-lg:
    fontFamily: ProximaNovaRegular
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.39
  body-sm:
    fontFamily: ProximaNovaRegular
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
  label-md:
    fontFamily: ProximaNovaRegular
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
  headline-lg-mobile:
    fontFamily: ProximaNovaRegular
    fontSize: 22px
    fontWeight: 1000
    lineHeight: 1.1
rounded:
  sm: 6px
  md: 10px
  lg: 20px
  xl: 41px
  full: 9999px
spacing:
  xs: 2px
  sm: 5px
  md: 10px
  lg: 25px
  xl: 46px
  gutter: 10px
components:
  button-primary:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.background}"
    typography: "{typography.label-md}"
    rounded: 0px
    padding: 14px 15px
    height: 50px
  button-secondary:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    padding: 0px
    height: 52px
  button-outline:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: 0px
    padding: 14px 46px
    height: 50px
  button-ghost:
    rounded: 0px
    padding: 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: 0px
    padding: 0px
  link:
    textColor: "{colors.on-surface}"
---

# Minimalist Design System

## Overview

Minimalist describes itself as: “We believe our products should be accessible to all, but we will never compromise on quality, ensuring only the best products reach you. Our products are priced to allow you to test and play with ingredients to build you” The interface is light, built on **White (#FFFFFF)** with **Near Black (#000000)** text, and **Vivid Orange (#FB6900)** as the main accent.

Type is set in **ProximaNovaRegular**. Headlines run large; body text is 14px. Depth comes from soft drop shadows. Corners are mostly 6px.

Measured from [beminimalist.co](https://beminimalist.co/) on October 23, 2026 at 1440×900 and 390×844 from 443 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 8 roles.

- **White (#FFFFFF):** Page background, seen 28 times. Token `background`, CSS `--chat-text-inverse`.
- **Near Black (#000000):** Primary text and headings, seen 38 times. Token `on-surface`, CSS `--purands-primary`.
- **Graphite (#2C2C2C):** Secondary text, seen 22 times. Token `on-surface-variant`.
- **Near Black 8% (#00000014):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Near Black 30% (#0000004D):** Borders and dividers, seen 29 times. Token `outline`, CSS `--color-borders-forms-primary`.
- **Vivid Orange (#FB6900):** Brand color in the header. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Cyan (#54A5CD):** Brand accent (CSS variable), seen 12 times. Token `secondary`.

## Typography

**ProximaNovaRegular** carries the whole interface. Fallback stack: `ProximaNovaRegular`. Other loaded fonts: Inter, Nunito Sans.

- **headline-display:** ProximaNovaRegular 36px at weight 500, line height 1. Page title (h1).
- **headline-lg:** ProximaNovaRegular 30px at weight 1000, line height 1.1 (22px on mobile). Section headings (h2).
- **body-md:** ProximaNovaRegular 14px at weight 400, line height 1.71. Body text.
- **body-lg:** ProximaNovaRegular 18px at weight 700, line height 1.39. Lead paragraphs.
- **body-sm:** ProximaNovaRegular 12px at weight 400, line height 1.33. Secondary and small text.
- **label-md:** ProximaNovaRegular 16px at weight 400, line height 1.4. Buttons, navigation and labels.

## Layout

Spacing does not follow a strict grid: 14% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2px, sm 5px, md 10px, lg 25px, xl 46px.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Breakpoints:** 374px, 474px, 475px, 500px, 600px, 767px, 768px, 991px, 1023px, 1024px, 1200px, 1280px, 1630px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(28, 29, 33, 0.12) 0px 0px 18px 0px, rgba(28, 29, 33, 0.06) 0px 6px 6px 0px`

## Shapes

Most elements use 6px corners. Measured radii, most used first:

- **sm (6px):** 124 elements.
- **lg (20px):** 68 elements.
- **md (10px):** 8 elements.
- **xl (41px):** 8 elements.
- **full (9999px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Add to cart”):** #000000 fill, #FFFFFF text, 16px/400, padding 14px 15px, border 1px solid #0000004D.
- **button-secondary (“1”):** #000000 fill, #000000 text, 16px/400, 50% radius, padding 0px, shadow `rgba(0, 0, 0, 0.25) 0px 4px 16px 0px`.
- **button-outline (“View all products”):** transparent fill, #000000 text, 16px/400, padding 14px 46px, border 1px solid #000000.
- **button-ghost (“Previous”):** transparent fill, #00000000 text, 0px/400, padding 0px.
- **card:** #FFFFFF fill, #000000 text, 16px/400, padding 0px.
- **link:** transparent fill, #000000 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page.
- Do keep text in 2 levels: #000000, #2C2C2C.
- Do use #FB6900 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (5px, 10px, 25px).
- Do use 6px corners on most elements; larger surfaces also use 20px, 10px and 41px.
- Don't introduce new font families beyond ProximaNovaRegular.
- Don't use #FB6900 for large backgrounds or body text.
- Don't make interface transitions slower than 0.55s.

## Motion

Interface transitions are quick: 0.175s, 0.1s, 0.25s, 0.55s.

- **Easing:** `linear`, `ease`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/beminimalist.co/), the free DESIGN.md generator.