Design System v1.0

Style Guide

Typography

The type system utilizes Helvetica Neue for an architectural, mid-century modern aesthetic focused on clarity and impact.

H1 (Title Bold)

The quick brown fox.

H2 (Subtitle Bold)

Jumps over the lazy dog.

H3 (Subtitle Medium)

Design is thinking made visual.

H4 (Subtitle Medium)

Form follows function.

P1 (Bodytext Regular)

Typography is the craft of endowing human language with a durable visual form. A good designer knows that the content is the priority, but the presentation defines the perception.

P2 (Byline Regular)

A designer knows he has achieved perfection not when there is nothing left to add.

P3 (Byline Light)

But when there is nothing left to take away.

Colours

A strictly monochromatic palette using tonal shifts to create depth and structural hierarchy without traditional lines.

Primary Black #0A0A0B
White #FFFFFF
Scale 100 Scale 0

Buttons

Interactive elements use a 6px border radius (0.375rem) and 16px font size for a refined, modern feel.

Primary
Secondary
Icon Only

Interface Samples

Editorial Card

Architectural Precision

A focus on monochromatic depth and substantial whitespace creates a museum-like experience.

The Monolith Design Language

This system moves away from typical SaaS designs. We prioritize asymmetric layouts and intentional typographic hierarchy to lead the eye through information naturally.

120+ Components
0px Border Width
100% Focus
Made on
Tilda