Norbielink Design System

Foundations

The visual and structural primitives — color, type, spacing, shape, and elevation that underpin every surface in Norbielink products.

6 foundations

Dark mode

Design principles

layers

Hierarchy through elevation

Use shadow and surface tint to create depth. Higher elevation = more prominent.

rounded_corner

Consistent shape language

Border-radius tokens keep corners consistent — never mix ad-hoc radii values.

space_bar

Spacing on a 4-point grid

All spacing values are multiples of 4px. Use tokens, not arbitrary numbers.

All foundations

Norbielink Logo Logo mark, wordmark, safe area rules, and approved color variants.

Color Full palette — teal brand scale, neutral grays, semantic colors, and dark mode tokens.

The quick brown

fox jumps over the

lazy dog. 0123456789

Typography Inter type scale — display, heading, body, and label roles with token-based sizing.

Elevation 5 shadow levels that communicate layering and depth across all surfaces.

Shape Border-radius tokens from xs to full — building a consistent corner language.

Spacing A 4px-based spacing scale with 12 named tokens for consistent rhythm.