Ubuntu Design System

Overview

Ubuntu's marketing site is built on three structural decisions that separate it from every other Linux or infrastructure brand in the directory. Suru as visual identity: the page's geometric distinctiveness lives entirely in Canonical's Suru background image system — diagonal sage-gray triangular tile assets applied at corners and section dividers — rather than in color, shape, or type choices. Strip the Suru assets and the page becomes an undifferentiated charcoal-and-white editorial layout. Where Cloudflare builds identity through a saturated hero canvas and Red Hat through PatternFly token depth, Ubuntu builds identity through image-layer geometry.

The typographic system runs a single variable-weight family — Ubuntu variable — across every tier, but exercises the weight axis in an unusual direction. The 40px section headings in the white body of the page use weight 180, a setting so light it approaches the hairline end of the axis. Most display systems run 500–700 at large sizes; Ubuntu's editorial body runs 180 at 40px, which reads closer to a luxury fashion or editorial publication than to an open-source Linux distribution. The hero headings contrast at 550 (a non-standard mid-weight between semibold and regular), making the weight range across the page span 180–550 — the full middle band of the variable axis, deliberately skipping both the heavy (700+) and the extreme-light (100) ends.

Key Characteristics:

• Charcoal hero (#262626) with white text and a green CTA — only the announcement/hero band is dark.
• Ubuntu variable font spanning weight 180 (editorial body display) to 550 (hero heading), the widest weight range in the directory.
• Ubuntu orange (#e95420) appears only on the logo mark — the CTA color is a separate institutional green (#008013).
• Zero border radius on every element — buttons, cards, inputs, and containers are fully square-cornered.
• Suru geometric patterns (diagonal triangular tile images) carry all decorative work as CSS-referenced background assets.
• White-canvas editorial body below the hero — no alternating dark bands.
• No shadow elevation — hairline borders (#939393) on cards, no drop shadows.

Colors

Action

• Primary ({colors.primary} — #008013): frequency 6. Used as background (3), border (3). The CTA button fill and border. Wired as --vf-color-button-positive-default and --vf-color-border-positive. The primary action color — distinct from the brand orange.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 1500 (text 709, border 696, shadow 95). The dominant surface and reversed text color throughout the page. Wired as --vf-color-background-default, --vf-color-button-positive-text.
• Canvas Dark ({colors.canvas-dark} — #262626): frequency 14 (bg only). The hero and top-nav background. The page's only dark surface; not extended to other bands.
• Surface Alt ({colors.surface-alt} — #f2f2f2): declared as --vf-color-background-neutral-default and --vf-suru-background. The subtle off-white for form field backgrounds and neutral UI surfaces.

Brand (logo-only)

• Brand Orange ({colors.brand-orange} — #e95420): frequency 1 (bg only). The canonical Ubuntu orange, used exclusively on the top-nav logo mark. Does not appear on any CTA, card, or editorial surface.

Text & Hairlines

• Ink ({colors.ink} — #000000): frequency 5. Text, background, and link-default signals. Wired as --vf-color-text-default.
• Ink Muted ({colors.ink-muted} — #707070): declared as --vf-color-border-high-contrast, --vf-color-border-neutral. Available for secondary borders and de-emphasized text.
• Hairline ({colors.hairline} — #939393): frequency 10 (border only). Card dividers and table rules. The single mid-gray border tone in the captured render.
• Link ({colors.link} — #0066cc): frequency 2 (text 1, border 1). Standard hyperlink color, wired as --vf-color-link-default.

Typography

Font Family

The system runs a single family — Ubuntu variable — across every tier. The CSS declaration is "Ubuntu variable", Ubuntu, -apple-system, "Segoe UI", Roboto, Oxygen, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif. The variable nature of the font is the key capability: weight is set on a continuous axis, allowing the 180 and 550 values that no static font stack supports.

There is no separate display family, no mono voice for code (not visible in the marketing surface), and no serif tier. Every typographic moment — hero, editorial, caption, button, nav — resolves to the Ubuntu variable font.

Hierarchy

Principles

The 40px / weight 180 editorial heading is the system's decisive typographic move. Most open-source infrastructure brands anchor their marketing type at 500+ to project technical confidence; Ubuntu's white-canvas editorial body uses the lightest displayable weight of the variable axis, which reads as an invitation to read rather than a command to act. The hero h1 at weight 550 provides the only typographic authority moment; everything below it in the scroll is deliberately quieter.

Note on Font Substitutes

The Ubuntu variable font is open-source and freely available from Google Fonts as "Ubuntu" (which includes variable-weight support). If variable fonts are unavailable, Ubuntu Light (weight 300) approximates the 180 display tier and Ubuntu Medium (weight 500) approximates the 550 heading tier. Nunito and Poppins are geometrically similar but lack the Ubuntu variable font's specific weight 180 setting; both run warmer at equivalent light weights.

Layout

Spacing System

• Base unit: 18px (the most-frequent spacing value in the extract, appearing 117 times — the page uses an 18px column baseline rather than the standard 8px or 16px).
• Tokens: {spacing.xs} 6px · {spacing.sm} 16px · {spacing.md} 18px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 64px.
• Hero padding: 8px top on heading, 6px top on body paragraph — minimal top padding, letting the hero headline meet the hero canvas with minimal gap.
• Container side padding: 24px left, 32px right on nav; 32px / 0px in body columns.

Grid & Container

• Max content width: not explicitly declared; layout uses standard Canonical site width (~1200px).
• Hero: full-width charcoal (#262626) band with a centered headline + body + green CTA left-column, circular event imagery right-column.
• News section: 3-column card grid with headline + date + body snippet per card.
• Product sections: 2-column split (text left, partner logo grid right) for cloud provider sections.
• Feature rows: single-column editorial with large side imagery (robotics, datacenter photography).

Rhythm

Unlike Red Hat's alternating-band pattern, Ubuntu's page structure is a single dark hero followed by a long white editorial scroll. The decorative rhythm comes from Suru geometric corner patterns placed at section boundaries, not from background-color alternation. This creates a continuous reading experience with visual markers at section edges rather than full-surface contrast changes.

Elevation

The system has no shadow elevation:

• Flat (no shadow): hero, editorial bands, footer — all surfaces.
• Hairline borders: {colors.hairline} (#939393) 1px borders on cards and table dividers. The only elevation signal.
• No box-shadow declarations visible in the captured CSS; the Vanilla design system may declare them for product UI surfaces not present in the marketing page.

Shapes

The radius philosophy is universally flat:

• {rounded.none} 0px — every element. Buttons, cards, inputs, announcement banners, hero containers, nav items — nothing rounds. The extraction shows an empty radii array (no corner radius values captured from any element on the page).

This is the sharpest radius system in the directory. The angular sharpness works with the Suru diagonal geometry: rounded corners would undercut the pointed-triangle visual language of the background patterns.

Components

button-primary — Green {colors.primary} (#008013) fill and border, white text, 0px radius, 4.5×16px padding, 35px height. "Register for free" is the canonical hero instance.

button-secondary — Transparent fill, near-black {colors.ink} text and 1px border, same 0px radius and sizing. Used for tertiary navigation links styled as outlines.

top-nav — Charcoal {colors.canvas-dark} (#262626) surface, 56px height, white text links. Ubuntu wordmark (orange on black logo) flush left, product nav links (Enterprise / Desktop / IoT / Cloud) in the middle, utility links right.

nav-link — Transparent background, white text in {typography.nav-link} (16px / 400), 16px left / 32px right padding, 56px height. Square hover state (no pill, no underline in the captured render).

hero-heading — White {colors.canvas} text on charcoal hero, {typography.display-xl} (40px / 550). The only high-weight typographic moment in the system.

section-heading — White text in dark bands at the same {typography.display-xl} token. Used for "Enterprise open source" and similar mid-page section headings.

section-heading-light — Near-black {colors.ink} text on white canvas, {typography.display-light} (40px / 180). The editorial section headings on the white body — the ultra-light display weight.

body-paragraph — White {colors.canvas} text in dark hero band, {typography.body-md} (16px / 400), 6px top padding.

body-paragraph-light — Near-black {colors.ink} text on the white editorial body, same {typography.body-md} token.

card — White canvas, 1px {colors.hairline} border, 0px radius, 24px padding. Used for news articles and feature summary cards.

text-input — Light-gray {colors.surface-alt} fill, near-black text, 0px radius, 4.5×16px padding, 35px height, 1px {colors.hairline} border. Form fields for newsletter and contact surfaces.

hero-dark-band — Charcoal {colors.canvas-dark} fill, white text, 32px padding. The announcement hero band.

link — Cobalt {colors.link} (#0066cc) inline text links. Standard hyperlink treatment in body editorial copy.

label-tracked — Near-black text at 16px / 550 with 0.8px letter-spacing. Used for date stamps ("2 Feb 2026") and section micro-labels.

Do's and Don'ts

Do keep Ubuntu orange ({colors.brand-orange} — #e95420) on the logo mark only. The CTA system runs on green, not orange. Using the orange on a button or section band would conflict with the Canonical brand architecture.

Do use the Ubuntu variable font's weight 180 for large editorial headings on the white canvas. The ultra-light display weight at 40px is the system's editorial personality — it requires the variable font to render correctly and should not be approximated with a static 200 or 300 weight, which will read heavier.

Do apply Suru geometric patterns (the --vf-suru-* CSS variable assets from assets.ubuntu.com) at section boundaries and hero corners. Without the Suru geometry, the page loses its only visual identity marker.

Do keep all buttons, cards, and inputs at 0px border radius. The angular Suru geometry requires a matching squared UI language; any rounding would create a visual mismatch.

Don't use the cobalt link color ({colors.link} — #0066cc) for button backgrounds or fills. In this system it appears twice (text and border) as a hyperlink color only — it is not a brand voltage and not an action color.

Don't add alternating dark editorial bands below the hero. The page is structured as one dark hero followed by one long white editorial scroll; adding dark mid-page bands would import Red Hat's layout pattern into a system that explicitly avoids it.

Don't render heading labels at weight 700 or heavier. The system tops out at 550 for the heaviest heading. Weight 700 or 800 from the Ubuntu variable axis exists but conflicts with the editorial restraint that defines the marketing surface.

Don't apply drop shadows. The system has no shadow elevation; depth is achieved entirely through 1px hairline borders and the image-based Suru geometry.

Known Gaps

• Suru geometric patterns: the --vf-suru-* CSS variables reference hosted assets at assets.ubuntu.com (JPG files). These are the system's primary visual-identity layer but are not tokenizable as hex or radius values — they must be referenced as image assets or recreated as SVG.
• Color-scheme / dark mode: the Vanilla design system supports a light/dark split but the captured marketing surface applies dark (#262626) only to the hero band. A toggleable dark mode for the full page is not represented here.
• Focus ring and interactive states: the --vf-color-focus (cornflower-blue) token is declared as a CSS variable but no focus states are observable in the static capture.
• Mobile layout: the Suru pattern assets change at mobile breakpoints (25/75 split vs. 50/50 split variants), but the breakpoint behavior is not captured in this static render.
• Orange application on sub-brands: Ubuntu Pro, Ubuntu Advantage, and Landscape marketing sub-pages likely use the orange more extensively; the captured redhat.com-style orange discipline applies to the main ubuntu.com marketing page only.
• Accessibility-state colors: --vf-color-background-caution-default (amber), --vf-color-background-negative-default (red), and --vf-color-background-positive-default (green at alpha) are declared for notification and alert contexts not present in the captured marketing surface.