# Neiden design system

> Neiden design system measured from neiden.framer.media: Cal Sans font, 10 color hex codes, type scale, spacing and a free DESIGN.md. Measured November 5, 2026.

Canonical page: https://sitepeel.dev/design-md/neiden.framer.media/

Neiden’s website (neiden.framer.media) uses the Cal Sans font on a white background. Measured by Sitepeel on November 5, 2026.

## What font does Neiden use?

Neiden uses Cal Sans (weight 400) and DM Sans (weights 400, 600 and 700) on neiden.framer.media. Page titles are 299.5px at weight 400 and body text is 14px. Measured on November 5, 2026.

- Cal Sans (weights 400)
- DM Sans (weights 400, 600, 700)

## Neiden colors: palette and hex codes

Neiden’s main colors are #FFFFFF (white) for the background and #000000 (near black) for text. Measured on November 5, 2026.

- #FFFFFF: white
- #000000: near black
- #191919: charcoal
- #F2F2F2: mist

## What is Neiden built with?

Neiden’s website (neiden.framer.media) is built with Framer, React, Lenis, Motion and Google Fonts. Measured on November 5, 2026.

- Site builder & CMS: Framer
- JavaScript framework: React 18.2.0
- Animation & 3D: Lenis 1.1.9, Motion
- Analytics: Meta Pixel 2.9.435
- Fonts & icons: Google Fonts

## Questions and answers

### What font does Neiden use?

Neiden’s website uses Cal Sans (weight 400) and DM Sans (weights 400, 600 and 700). Page titles are 299.5px at weight 400 and body text is 14px. Measured on November 5, 2026.

### What are the Neiden colors and hex codes?

On neiden.framer.media: #FFFFFF (white) for the background and #000000 (near black) for text. The color palette above lists all 10 colors with their hex codes and where each one is used.

### What is the Neiden design system?

The design system on this page is neiden.framer.media’s, as measured on November 5, 2026: Cal Sans type and square corners, written down as a DESIGN.md. It is not Neiden’s own documentation.

### What is Neiden built with?

Neiden’s website (neiden.framer.media) is built with Framer, React, Lenis, Motion and Google Fonts. The full tech stack Sitepeel found: Framer, React, Lenis, Meta Pixel, Motion and Google Fonts. Measured on November 5, 2026.

### What is the Neiden DESIGN.md?

A plain-text file with Neiden’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Neiden’s official design system?

No. Sitepeel measured it from neiden.framer.media’s public page on November 5, 2026. It is an independent analysis, not made or approved by Neiden.

### Can I use Neiden’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Neiden’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/neiden.framer.media/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Neiden.

## The DESIGN.md file

```markdown
---
version: alpha
name: Neiden
description: "Light monochrome interface measured from neiden.framer.media: Cal Sans type with DM Sans, tonal surfaces and square corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#191919"
  surface-container-low: "#FFFFFFE6"
  surface-container: "#F2F2F2"
  overlay: "#0000000D"
  outline: "#FFFFFF1A"
  primary: "#000000"
  on-primary: "#FFFFFF"
  error: "#F02B42"
typography:
  headline-display:
    fontFamily: Cal Sans
    fontSize: 299.5px
    fontWeight: 400
    lineHeight: 0.8
    letterSpacing: -0.05em
  headline-lg:
    fontFamily: DM Sans
    fontSize: 100px
    fontWeight: 600
    lineHeight: 0.8
    letterSpacing: -0.08em
  headline-md:
    fontFamily: DM Sans
    fontSize: 70px
    fontWeight: 600
    lineHeight: 0.9
    letterSpacing: -0.06em
  headline-sm:
    fontFamily: DM Sans
    fontSize: 50px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.05em
  title-lg:
    fontFamily: DM Sans
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.07em
  body-md:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.04em
  body-lg:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.05em
  label-lg:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.04em
  label-md:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.04em
  label-sm:
    fontFamily: DM Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
  headline-lg-mobile:
    fontFamily: DM Sans
    fontSize: 60px
    fontWeight: 600
    lineHeight: 0.8
    letterSpacing: -0.08em
  headline-md-mobile:
    fontFamily: DM Sans
    fontSize: 60px
    fontWeight: 600
    lineHeight: 0.9
    letterSpacing: -0.06em
rounded:
  none: 0px
spacing:
  sm: 5px
  md: 10px
  xl: 40px
  gutter: 10px
  section: 150px
  margin: 40px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.none}"
    padding: 0px
    height: 60px
  button-primary-hover:
    backgroundColor: "#EE2B41"
  input-field:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.none}"
    padding: 0px
  link:
    textColor: "{colors.primary}"
---

# Neiden Design System

## Overview

Neiden describes itself as: “Neiden is a Nordic design studio exploring identity, systems, and digital experiences through clarity and experimentation.” The interface is light, built on **White (#FFFFFF)** with **Near Black (#000000)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Cal Sans** and **DM Sans**. Headlines run large with tight negative tracking; body text is 14px. The surface language is flat. Corners are square.

Measured from [neiden.framer.media](https://neiden.framer.media/) on November 5, 2026 at 1440×900 and 390×844 from 313 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 10 roles.

- **White (#FFFFFF):** Page background, seen 2 times. Token `background`.
- **Near Black (#000000):** Primary text and headings, seen 24 times. Token `on-surface`.
- **Charcoal (#191919):** Secondary text, seen 2 times. Token `on-surface-variant`.
- **White 90% (#FFFFFFE6):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Mist (#F2F2F2):** Cards and panels, seen 1 time. Token `surface-container`.
- **Near Black 5% (#0000000D):** Translucent fill for cards and controls, seen 5 times. Token `overlay`.
- **White 10% (#FFFFFF1A):** Borders and dividers, seen 1 time. Token `outline`.
- **Near Black (#000000):** Primary buttons and calls to action, seen 28 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Vivid Red (#F02B42):** Errors and destructive states, seen 26 times. Token `error`.

## Typography

**Cal Sans** and **DM Sans** share the interface. Fallback stack: `Cal Sans, Cal Sans Placeholder, sans-serif`. Other loaded fonts: Patung Regular, Inter.

- **headline-display:** Cal Sans 299.5px at weight 400, line height 0.8, tracking -0.05em. Page title (h1).
- **headline-lg:** DM Sans 100px at weight 600, line height 0.8, tracking -0.08em (60px on mobile). Section headings (h2).
- **headline-md:** DM Sans 70px at weight 600, line height 0.9, tracking -0.06em (60px on mobile). Sub-section headings.
- **headline-sm:** DM Sans 50px at weight 600, line height 1, tracking -0.05em. Card and feature titles.
- **title-lg:** DM Sans 20px at weight 700, line height 1.1, tracking -0.07em. Small titles.
- **body-md:** DM Sans 14px at weight 400, line height 1.5, tracking -0.04em. Body text.
- **body-lg:** DM Sans 16px at weight 400, line height 1.4, tracking -0.05em. Lead paragraphs.
- **label-lg:** DM Sans 16px at weight 600, line height 1.4, tracking -0.04em. Large buttons and tabs.
- **label-md:** DM Sans 14px at weight 600, line height 1, tracking -0.04em. Buttons, navigation and labels.
- **label-sm:** DM Sans 12px at weight 600, line height 1, tracking -0.02em. Small labels and badges.

## Layout

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

- **Scale:** sm 5px, md 10px, xl 40px.
- **Sections:** 150px vertical padding between major sections.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Page margin:** 40px on each side of full-width sections.
- **Breakpoints:** 809px, 809.98px, 810px, 1199px, 1199.98px, 1200px, 1619px, 1619.98px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from tonal surface steps (#FFFFFFE6 → #F2F2F2) and #FFFFFF1A borders.

## Shapes

Corners are square. Measured radii, most used first:

- **none (0px):** measured.

## Components

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

- **button-primary (“START A PROJECT”):** #000000 fill, #FFFFFF text, 12px/400, padding 0px.
- **button-primary-hover:** background #EE2B41, text #FFFFFF on hover.
- **input-field (“Email@adress.com”):** transparent fill, #000000 text, 16px/600, padding 0px.
- **link:** transparent fill, #000000 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page and lift surfaces in small steps: #FFFFFFE6, #F2F2F2.
- Do keep text in 2 levels: #000000, #191919.
- Do let contrast carry emphasis; primary actions use #000000 on #FFFFFF.
- Do set headlines in Cal Sans with tight tracking (-0.05em).
- Do reuse the measured spacing steps (5px, 10px).
- Don't add drop shadows for depth; use tonal surfaces.
- Don't introduce new font families beyond Cal Sans and DM Sans.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.4s.

## Motion

Interface transitions are quick: 0.4s.

- **Easing:** `cubic-bezier(0.44, 0, 0.56, 1)`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/neiden.framer.media/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```