Design System

Style Guide

BAUHAUS × Fibonacci Spacing × Golden Ratio Typography × Tailwind CSS v4

Color Palette

Bauhaus: Schwarz, Weiß, Rot, Blau, Gelb

Background

#0C0C0C

--color-bg

Surface

#161616

--color-surface

Border

#242424

--color-border

Text

#F2F2F2

--color-text

Text Muted

#808080

--color-text-muted

Rot (Red)

#E63030

--color-rot

Blau (Blue)

#1A56FF

--color-blau

Gelb (Yellow)

#FFD300

--color-gelb

Typography Scale

Golden Ratio φ=1.618 | Base: 16px | Font: Bebas Neue / Space Grotesk / Space Mono

3XL Display

178px

Bauhaus

2XL Display

110px

Bauhaus

XL Display

68px

Bauhaus

LG Display

42px

Bauhaus

MD Heading

26px

Bauhaus

Base Body

16px

Bauhaus

SM Small

13px

Bauhaus

XS Label

10px

Bauhaus

Spacing Tokens

Fibonacci Sequence ×4px | F(n): 1,1,2,3,5,8,13,21,34...

--spacing-fib-1F(1)=4px

--spacing-fib-2F(2)=8px

--spacing-fib-3F(3)=12px

--spacing-fib-4F(5)=20px

--spacing-fib-5F(8)=32px

--spacing-fib-6F(13)=52px

--spacing-fib-7F(21)=84px

--spacing-fib-8F(34)=136px

UI Components

Minimal Bauhaus UI kit

Buttons