Skip to content
Library

Fourmula. Headline display type as cover, orange as the editor's highlight pen.

  • AI
  • Light theme
  • 11 colors
  • 2 typefaces

Fourmula is an editorial product-photography studio rendered in code: vast white pages, near-black display type at extreme sizes, and a single disciplined orange accent that reads like editorial highlight pen rather than brand chrome. The system is almost monochromatic — three near-grays carry the entire interface, and color appears only as semantic punctuation inside headlines and gradients. Surfaces are flat and borderless, relying on hairline gray dividers and generous whitespace to separate regions instead of shadow or elevation. Typography is the dominant design move: SF Pro Display at weights 400–500, tracked tight at large sizes, producing headlines that feel like magazine cover titles rather than SaaS hero copy. Components are quiet and minimal — a thin outlined button, a small tag badge, flat cards with generous padding, and a single rounded image corner. The result is a site that treats its product imagery as the spectacle while the chrome recedes.

Screenshot of AI Product Generation
Captured from fourmula.ai on October 11, 2026

Fourmula design system

Fourmula

Brand4

  • Supporting palette color for small decorative accents when the core palette needs contrast.

  • Gradient stop — blue-violet entry point in the tri-color brand gradient (blue → violet → orange) used for special accent surfaces

  • Gradient stop — deep red entry in the four-color brand gradient variant

  • Gradient stop — cool blue bridge into orange in the dual-tone gradient

Neutrals7

  • Primary text, borders, icon strokes — near-black carries all body and heading copy

  • Dominant border color across the entire interface, card outlines, dividers

  • Secondary borders, muted icon fills, tertiary structural lines

  • Muted helper text, secondary link text, subdued metadata

  • Subtle background washes, low-contrast surface differentiation

  • Page background — the dominant canvas tone behind all content

  • Card surfaces, image backgrounds, inverted text on dark regions

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Canvas White on Ink Black

20.78 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.