Design Aesthetic Reference
Pure geometric forms, primary colors, and compositions governed by mathematical precision. Rooted in Bauhaus, De Stijl, and the Swiss International Typographic Style.
Typography
Typefaces built from circles, straight lines, and uniform stroke widths
Display / Jost 900
Form Follows Function
Heading / Jost 700
Universal Visual Language
Subheading / Jost 500
Mathematical Grid Structure
Body / Work Sans 400
Clean, functional, and readable at sustained lengths. Every element earns its place through geometric justification and rational composition.
Label / Jost 500
Buttons & Interface Labels
Caption / Work Sans 400
Secondary text for annotations, metadata, and supplementary information.
Jost 900 + Work Sans 400
Authentic Bauhaus-Futura spirit with rigorous authority
Jost 700 + Work Sans 400
Clean geometric consistency for versatile layouts
Jost 700 + Jost 400
Monofamily precision for maximum geometric unity
Color Palette
Red, yellow, and blue anchored by absolute black and white
Components
Sharp-edged, grid-locked, built from fundamental shapes
Circles, squares, and triangles are the fundamental building blocks. All visual elements derive from these archetypal forms without exception.
Shapes FoundationStrict modular grids govern every element's placement and proportion. The underlying 12-column grid is the structural backbone of every composition.
Layout StructureRed, yellow, and blue command the palette in flat, unmodulated fills with maximum chromatic intensity. No gradients, no compromise.
Color BauhausHeadlines are treated as visual shapes equal in compositional weight to geometric forms and color blocks. Futura-inspired faces dominate.
Typography DisplayNegative space is an active, calculated component of the design. It creates rhythm and breathing room between geometric elements with deliberate intent.
Space RhythmAsymmetric compositions achieve visual balance through calculated weight distribution. Diagonal elements inject kinetic energy into ordered arrangements.
Balance TensionVisual Effects
Bold shapes, strict grids, and intersecting forms -- all pure CSS
CSS Grid recreates the iconic De Stijl composition with primary color cells and thick black dividers.
Layered rotating squares create dynamic geometric compositions through CSS transforms and animation.
Nested circles in primary colors create depth and focus through pure geometric layering.
Repeating linear gradients form a precise grid; primary-color shapes snap to intersections.
Angled repeating gradients create kinetic energy; solid color blocks anchor the composition.
Intersecting geometric shapes create depth and compositional energy within the flat aesthetic.
Interactive Elements
Sharp, flat, and decisive -- no rounded corners allowed
Every element must earn its place through functional and geometric justification. There is no room for ambiguity, sentimentality, or decorative excess.— The Principles of Geometric Modernism
Geometric Modernism distills design to its most elemental components -- strong shapes, primary colors, and compositions governed by mathematical precision rather than intuition or ornament.
Back to the Top