Open Elements Design System
Typography, done right.
Two families. Montserrat Light — never bold — carries every display moment. Lato handles body copy in a single conversational voice. One phrase per headline earns italic-bold emphasis; nothing else.
The stack.
Three families do all the work. No fallback experiments, no decorative cuts.
Montserrat 300
Display · italic for emphasis
Every headline, every section opener, every hero. Always 300 weight; italic-bold (700) is the only emphasis treatment, used once per headline.
300 · 300 italic · 700 italic
Lato
Body · UI
All running copy, captions, labels, navigation, buttons. Single conversational voice — 400 normal, 700 for caption labels and tag chips.
400 · 400 italic · 600 · 700
Source Code Pro
Code · metadata
Code blocks, version strings, file paths, the small all-caps page metadata at the top of every reference card.
400 · 500
The scale.
Ten roles. Type sizes step in deliberate jumps — never a half-size variant.
Hero · Mont 300 · 88/92Open Source, done right.
Display · Mont 300 · 64/72Becoming a Sustainable Program
H1 · Mont 300 · 44/52Professional support for your Java environment
H2 · Mont 400 · 30/38The end-to-end chain of trust
H3 · Lato 600 · 22/30Long Term Support (LTS) versions
Lead · Lato 400 · 20/32Today, modern software is made up of more than 70 % open-source components. Starting in 2027, manufacturers will be responsible for 100 % of their software under the Cyber Resilience Act (CRA).
Body · Lato 400 · 16/26Apache Maven is one of the most widely used tools in the Java ecosystem. Over 75% of all Java projects rely on Maven for build and project management. With approximately 2 billion downloads annually, it is a fundamental part of modern software development.
Small · Lato 400 · 14/22Funding for a sustainable development of Apache Maven
Caption label · Lato 700Market share · 75%
Code · SC Pro 500 · 14/22./gradlew build --scan && java -jar server.jar
The rules.
Discipline is what makes this look like one voice.
Italic-bold emphasis
- Once per headline. Not twice. Pick the phrase that carries the meaning.
- Only on display sizes. Never inside body copy.
- Same color as the headline. Emphasis is typographic, not chromatic.
Body weight discipline
- Lato 400 only for body copy. No 300, no 500.
- Italic for citations and quotations — not for emphasis. Use a callout or pull-quote instead.
- 700 for caption labels and tags only. Never bold a sentence inline.
Tracking & line-height
- Display headlines tighten to
-0.02em; bigger sizes go to-0.025em. - Body copy sits at the default zero tracking — no negative letter-spacing on running text.
- All-caps labels open up to
+0.1em.