Minus 1 design system

Everything you need to make something that looks and sounds like Minus 1. The brand voice, the colours, the type, the gradient, and a working set of React components live here, each documented in Storybook so you can see it before you use it. Reach for this repo when you build a page, a social post, an A4 CV, or a 16:9 slide and want it on brand without guessing.

Start here

Install once, then open Storybook:

npm install
npm run storybook        # http://localhost:6006

Storybook is the real product of this repo. The Vite app shell only exists to host the library while you develop. When you need a static copy to share or deploy, build it:

npm run build-storybook  # writes storybook-static/

Use it in your app

Install the package alongside its React 19 peers:

npm install @minus1-as/design-system react react-dom

Import the stylesheet once, near your app's entry, then reach for any component:

import '@minus1-as/design-system/styles.css';
import { Button } from '@minus1-as/design-system';

export function Example() {
  return <Button>Kom i gang</Button>;
}

That one stylesheet carries the whole cascade: tokens, hypertokens, and every component's styles, in the right layer order. If you only want the design values and none of the component styles, import @minus1-as/design-system/tokens.css instead.

The brand fonts are opt-in. Import @minus1-as/design-system/fonts.css to self-host Poppins and Montserrat, or point your own copies of the same families at the --minus1-typography-* variables and skip it.

Find your way around

Storybook opens on an introduction and splits into four sections.

Read Brand / Language & copywriting first if you write any copy: it is the shortest path to sounding like us. Brand also carries the colour, typography, logo, and graphic-element rules. Foundations shows the raw material beneath the components: the colour and type tokens, spacing, radii, borders, elevation, and states. Components is the set you build with, from typography and buttons through inputs, layout, branding, and data visualisation. Formats composes those parts into finished surfaces: the social square, the A4 resume, and the 16:9 slide.

How it fits together

The styling is layered, and each layer depends only on the one beneath it. Design values become tokens, tokens compose into hypertokens, hypertokens dress the components, and components assemble into formats. CSS custom properties carry every value, all prefixed minus1, so no component ever reaches for a raw hex or pixel. Colour does the work a shadow would do elsewhere: elevation is a change of surface and a rounded corner, never a drop shadow.

Writing for Minus 1

Two languages share this repo, and they never mix. The documentation, the story titles, and every description are English. Every example a reader sees rendered is Norwegian, written the way real Minus 1 copy is. The em dash appears in neither. npm run lint:copy holds that line and fails the moment one slips into src/ or this file.

Project layout

• src/tokens and src/hypertokens hold the two CSS variable layers.
• src/components holds the components, each beside its own stylesheet and stories.
• src/docs holds the MDX guide pages and the helpers only the docs use.
• src/formats holds the composed A4, slide, and social templates.