Design System / Foundations

Monopole Design Language

A living style guide for the Monopole family of sites. Swiss grid precision, neomorphic tactility — order and intentionality, presented as the system itself.

01

Colors

Seven tokens form the neomorphic palette. Surface and shadow pairs create depth; brand indigo is the only chromatic accent.

Neomorph Surface
#e8e8e8
System Dark
#1a1a2e
Brand Indigo
#6366f1
Raised Surface
#ffffff
Shadow Light
#d1d1d1
Shadow Dark
#b8b8b8
Token Gray
#8b8b8b
Surface Gradient
e8 → ff
02

Typography

Manrope across display and body for systematic harmony. Source Code Pro reserved for tokens, values, and code.

Display Manrope · 600 · clamp(1.5, 3vw, 2.2)
North-seeking poles align the field.
Heading Manrope · 600 · 1.5rem
Hypothetical particle, observable system.
Body Manrope · 400 · 0.95rem / 1.7
A magnetic monopole is a hypothetical elementary particle that is an isolated magnet with only one magnetic pole — a north pole without a south, or vice versa. The Monopole Design Language treats every interface as a single coherent field: each component carries a directionality, each surface a polarity.
Code Source Code Pro · 400 · 0.85rem
--brand-indigo: #6366f1;
--surface: #e8e8e8;
--radius-md: 12px;
Aa
Aa
Aa
Aa
Aa
Aa
03

Spacing

An 8-point modular scale. Compose layouts by stacking 4, 8, 16, 24, 32, 48, 64.

4 · 0.25rem · xs
8 · 0.5rem · sm
16 · 1rem · md
24 · 1.5rem · lg
32 · 2rem · xl
48 · 3rem · 2xl
64 · 4rem · 3xl
04

Components

Every interactive surface uses the same neomorphic shadow formula. Raised at rest, inset when pressed.

Buttons
Toggles
Input
search
$
Slider
Shadow blur 12 px
Card · Raised
Field strength
Updated 2 min ago
Tactile surfaces communicate that an element belongs to the active field — pressable means actionable.
Segmented
monopole
05

Tokens

CSS custom properties exported from @monopole/tokens. Copy by tapping any line.

tokens.css 
/* Surface */
--surface: #e8e8e8;
--surface-raised: #ffffff;
/* Shadow */
--shadow-light: #d1d1d1;
--shadow-dark: #b8b8b8;
/* Text */
--text: #1a1a2e;
--text-muted: #8b8b8b;
/* Brand */
--brand-indigo: #6366f1;
/* Geometry */
--radius-md: 12px;
--shadow-neo: 6px 6px 12px #b8b8b8, -6px -6px 12px #ffffff;
copied
06

Icons

A 24×24 stroke set on neomorphic tile surfaces. 1.5px stroke, rounded joins.

field
layout
grid
axis
trend
search
settings
monopole