Every brand decision — color, type, pattern, tone — flows from a single conceptual root. Understand the root and the system becomes self-evident.
"The idea becomes the machine that makes the code."
After Sol LeWitt, Wall Drawing Instructions, 1971
Sol LeWitt's conceptual art practice rests on a radical idea: the instruction is the artwork. The artist writes the rule; anyone can execute it. Moderne works the same way. Engineers write the recipe — a precise, repeatable rule — and Moderne executes it across thousands of codebases simultaneously. The code isn't written; it's generated from the idea.
This philosophy shapes everything. The brand is rule-based, systematic, and reproducible — not decorative or arbitrary. Klein Blue was chosen because Yves Klein's IKB is itself a registered artwork, a color elevated by intent. The LeWitt patterns are generated, not drawn. The type system is a scale, not a collection. The brand is a machine.
Bauhaus, 1919–1933. The second root. Where LeWitt gives us instruction, Bauhaus gives us form. Form follows function. The geometric sans-serif. The primary color used with conviction. The grid as architecture. Bauhaus believed that design was not decoration but method — that beauty emerges from reduction, not addition. Moderne's color system carries this directly: Klein Blue as the sole primary, Bauhaus Yellow as the precision accent, Warm Slate as structure. Three colors. Infinite combinations. No ornament without purpose.
02 / Identity
Logo
The Moderne logo is a geometric line-art mark paired with the Beausite Fit wordmark. The mark and wordmark always appear together as a lockup — neither is used alone in primary brand contexts. Source: ModerneLogo_Black_R.ai
Moderne®
Primary — on white
Moderne®
Reversed — on dark
On warm surface
On Klein Blue
Mark in Klein Light
On Klein Tint
Lockup
Mark and wordmark always appear together. Never use the mark without "Moderne" except in favicon or app icon contexts at very small sizes.
Typeface
Beausite Fit Bold, tracked at −40 (−0.04em). Never substitute or retype — always use the supplied .ai or exported file.
Color
Black on light backgrounds. White on dark or Klein Blue backgrounds. The mark may appear in Klein Blue only on white/warm-white surfaces.
02.5 / Identity
Product Symbols
Ten stroke-based geometric marks — one per product. Each mark is built from the same visual vocabulary as the brand marks above: rectangles, circles, acute angles, and lines. Klein Blue (#002FA7) is the primary stroke. Warm Slate (#525670) and Bauhaus Yellow (#F5C400) are supporting strokes. All marks use stroke-linecap="square" and fill="none" to stay in the same family as the Moderne™ and OpenRewrite™ symbols.
Agent tools
CLI
Platform
Recipes
IDE plugins
DX
Moddy
Prethink
Trigrep
Changelog
03 / Visual
Color
Three intentional colors and a set of surfaces. Klein Blue is the voice. Warm Slate is the structure. Bauhaus Yellow is the signal. Everything else is air.
Primary — Klein Blue (IKB)
Klein Blue#002FA7
Primary accent. Buttons, links, key headings, brand moments. Used with intention — not as fill.
WCAG: 10.8:1 on white AAA
Klein Light#7B9FFF
Dark backgrounds only. Text and accents on near-black surfaces.
WCAG: 7.1:1 on near-black AAA
Klein Tint#EBF0FF
Hover states, tag backgrounds, active surfaces. The blue family's lightest expression.
Secondary — Warm Slate
Warm Slate#525670
Secondary text, nav links, form labels, muted UI. Bridges Klein Blue and warm surfaces without temperature clash.
WCAG: 7.2:1 on warm-white AAA
Slate Mid#636687
Captions, metadata, dividers, placeholders. Minimum size for labels: 11px.
WCAG: 5.2:1 on base AA
Slate Tint#EEEDF4
Secondary button backgrounds, subtle hover states. Neutral enough to sit on both warm and cool surfaces.
Surfaces
Base#F5F7FD
Page background. Subtle blue cast unifies with Klein Blue; used with horizontal line pattern.
Surface#F2F3F8
Cards, inputs, table rows, search fields.
Mid#E2E5F0
Borders, dividers, separators, kbd chips.
Near-Black#0A0F1E
Dark sections, code bg, text.
Accent — Bauhaus Yellow
Bauhaus Yellow#F5C400
Warning states, queued indicators, attention accents. Rooted in Bauhaus primary color theory. Always use as fill with near-black text — never as text on white.
WCAG: 11.6:1 near-black on yellow AAA
Yellow Tint#FEF6CC
Warning tag backgrounds, alert surfaces. Use with warning-text (#6B5200) for accessible labels.
Yellow Text#6B5200
Text on yellow tint backgrounds. The only accessible foreground for yellow-family label text.
WCAG: 6.8:1 on yellow tint AAA
Klein Blue — use for
Intentional moments only
Primary CTAs, active states, key brand marks, large type accents. Klein Blue earns its weight by appearing sparingly. If everything is blue, nothing is blue.
Warm Slate — use for
The working voice of the UI
Navigation, labels, form elements, secondary buttons, helper text. The slate handles everything that keeps the interface readable without competing with Klein.
Bauhaus Yellow — use for
Attention, not decoration
Warning states, queued indicators, partial results. Yellow is a signal, not a style. It appears only where something requires human attention. Never as body text, never on white backgrounds. The Bauhaus triad: Klein Blue, Bauhaus Yellow, near-black.
04 / Visual
Typography
Three typefaces, one role each. Never mix their roles. The type stack is a system, not a mood board. In product UI, Beausite Fit is reserved for the wordmark and display-level page titles only — all navigation, labels, and body text use Inter.
Beausite Fit
Brand / Display
Headlines, wordmark, UI labels, buttons, all brand-facing text. Use Bold (700) for headlines, Medium (500) for UI.
Automated. At scale.
Inter
Body / Reading
All body copy, long-form text, descriptions, documentation prose. Regular (400) only — avoid bold Inter in running text.
Moderne runs automated refactoring across your entire codebase — migrations, security patches, and dependency upgrades in minutes, not months. Write the recipe once; run it everywhere.
JetBrains Mono
Code / Technical
All code snippets, file paths, version numbers, data values, and technical metadata. Also used for eyebrow labels and index markers in the brand system.
Moderne runs automated refactoring across thousands of repositories simultaneously.
Small 13 / regular
Last run 4 minutes ago · 142 files · Java 17 → 21
Caption 11 / mono
001 · Code transformation · v2.4.1
05 / Visual
Pattern System
Brand patterns are not decorations. They are instructions made visible — generated by rules, in the tradition of Sol LeWitt's wall drawings. Bauhaus gave us the geometric vocabulary; LeWitt gave us the method. Together they produce a pattern system that is systematic, reproducible, and purposeful.
I — Parallel horizontals · Page background, topbar substrate
II — Diagonals · In-progress states, inactive chart bars
III — Crosshatch · Panel headers, success accent bars
IV — Arcs · Dark hero sections, event backgrounds
Principle 01
Rule-generated
Every pattern follows a written instruction. The rule is documented; anyone can reproduce it. No freehand, no decoration without instruction.
Principle 02
Color-faithful
Patterns only use brand palette colors. Never introduce new colors via pattern. Klein, Slate, and surfaces — nothing else.
Principle 03
Background only
Patterns appear as backgrounds or texture, never as foreground content. Always at reduced opacity so they recede behind type and UI.
06 / Usage
Components
Reference implementations for the most common UI elements. Maintain these token relationships in every component.
Product UI — recipe card
Moderne
Migration
Spring Boot 3.x upgrade
Automated recipe for all repositories in your org. Handles dependency changes, annotation updates, and Jakarta namespace migration.