Design System

Swiss

Clean grids.
Maximum clarity.
No decoration.

01

Color

A minimal palette focused on black, white, and a single accent color.

Black #000000
White #FFFFFF
Red #FF0000
Gray #E5E5E5

02

Typography

Inter. Clean, functional, optimized for screens. No serifs, no nonsense.

Display

96px / Bold / -2%

Aa

H1

48px / Bold / -2%

Heading One

H2

40px / Bold / -2%

Heading Two

H3

24px / Bold / -1%

Heading Three

Body

16px / Regular / 0%

The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type.

Small

14px / Regular / 0%

Captions and secondary information use a smaller size.

03

Spacing

A mathematical scale based on 4px increments. Consistent rhythm across all elements.

4px
xs
8px
sm
16px
md
24px
lg
32px
xl
48px
2xl
64px
3xl
96px
4xl

04

Buttons

Simple, rectangular, no rounded corners. Form follows function.

05

Forms

Underline inputs emphasize content over chrome. Clean and direct.

06

Cards

Content containers with minimal borders. Numbers add visual hierarchy.

01

Grid System

12-column grid provides flexible, consistent layouts across all screen sizes.

02

Typography

A clear hierarchy using weight and size, not color or decoration.

03

Whitespace

Generous spacing lets content breathe and improves readability.

07

Data Table

Clean rows, clear headers, minimal lines. Information first.

Component Status Version Size
Button Ready 1.0.0 2.4kb
Input Ready 1.0.0 1.8kb
Card Beta 0.9.0 3.2kb
Modal Planned

08

Badges

Status indicators. Rectangular, uppercase, compact.

Default Active Important

09

Principles

Objectivity

Design should present information clearly without subjective interpretation or unnecessary embellishment.

Reduction

Remove everything that doesn't serve a purpose. What remains gains power through clarity.