ConNext.
Make Nextcloud your workspace. Open-source apps that bring data, processes, and AI to your Nextcloud — turning a file-sync platform into your actual workplace.
Type ramp · 12 / 14 / 16 / 18 / 20 / 24 / 32 / 40 / 48 + display
displayCobalt sans72 / 1.05 / 700
heading-1A Dutch product company48 / 1.2 / 700
heading-2Apps in the hexagon40 / 1.2 / 700
heading-3Solutions, not consultancy32 / 1.2 / 600
heading-4Install from the app store24 / 1.2 / 600
largeA subdued lede that opens a section without raising its voice — calm, scannable, deliberate.18 / 1.5 / 400
bodyBody copy in Figtree at 16 pixels with line-height 1.5. Cobalt on white clears WCAG AAA at 9.05:1, so body text inherits the brand color rather than slipping into a generic charcoal grey.16 / 1.5 / 400
smallCaptions, footnotes, dense table rows, footer links, metadata.14 / 1.5 / 400
x-smallEYEBROWS · METADATA · LICENSE STRINGS12 / 1.5 / 400
mono--conduction-color-brand-primary: #21468B;14 / Plex Mono
Weights — Figtree
Aa
400 · Regular
Body, captions, lists, paragraphs.
Aa
500 · Medium
Labels, navigation, button text.
Aa
600 · Semibold
Subheads · h3 / h4 / h5 / h6.
Aa
700 · Bold
Display · h1 / h2 · big numbers.
Pairing — Figtree body & Plex Mono code
Figtree · body
Apps stay free and open-source. Support is optional — a separate, transparent layer for organizations that want a phone number to call.
IBM Plex Mono · code
.button-primary {
background: var(--conduction-color-brand-primary);
color: var(--conduction-color-text-inverse);
font-family: var(--conduction-typography-font-family-body);
}
Fallback stack
Figtree, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif
'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace
Rules
Do
- Set body in cobalt — it clears WCAG AAA on white
- Use weight (500 / 700) for emphasis
- Headings: 1.2 line-height, slightly negative tracking
- Body: 1.5 line-height, no tracking
- One sentence per line for scannable layouts
Don't
- Italics for emphasis — use weight or color instead
- Add a second display font — Figtree 700 is enough
- System-font stacks as primary (Inter, Roboto, Arial)
- Underlines on headings — reserved for hyperlinks
- All-caps body — only x-small eyebrows