Why doesn't Ubuntu orange appear anywhere except the logo?

Ubuntu orange (#e95420 — the canonical Canonical brand color since 2010) appears in the captured marketing render exactly once: as a background fill on the top-nav logo mark. The Ubuntu design system deliberately reserves the orange as an identity signal rather than an action color. All CTA buttons use a separate green (#008013, wired as --vf-color-button-positive-default). This split — brand color for identity, functionally-coded green for action — is a Canonical design decision documented in the Vanilla design system (Ubuntu's component library). The orange appears more freely on blog pages, documentation surfaces, and the Ubuntu Advantage product line, but the main marketing page applies the strict split.

What is the Ubuntu variable font and what are its key weights?

The Ubuntu variable font is a custom typeface designed by Dalton Maag specifically for Canonical and released as open source in 2010. The marketing site uses it as a variable font with --font-family-body: 'Ubuntu variable', Ubuntu, -apple-system, allowing the font weight axis to be set anywhere from 100 to 800. The captured page uses weight 180 for 40px display headings — an ultra-light setting unusual in the directory. Other documented weights are 300 (light sub-labels), 400 (body, buttons, nav), and 550 (hero heading, h1, h2 at 40px). Weight 550 is a mid-value between regular (400) and semibold (600) not available in most static font stacks. The Ubuntu font is available for free from fonts.google.com.

What is the Suru design language and how does it work technically?

Suru is Canonical's geometric visual identity system, first introduced for Ubuntu Touch in 2013 and extended to the web presence. On ubuntu.com it manifests as a set of CSS custom properties that reference hosted JPG assets: --vf-suru-pyramid-top-left, --vf-suru-fan-bottom-right, --vf-suru-divider, --vf-suru-50-50, and --vf-suru-25-75. These images contain diagonal sage-gray triangle patterns positioned at page corners and section transitions. The system applies them as CSS background-image values on specific section containers. Because the identity is image-based rather than CSS-drawn, it cannot be tokenized into pure hex or border-radius values — implementers must either use the official Canonical asset URLs or recreate the geometric forms as SVG.

Why does Ubuntu have zero corner radius everywhere?

Ubuntu's marketing surface applies border-radius: 0px to every element — buttons, cards, inputs, announcement banners, and hero containers. The extraction shows no radius values in the radii array. This is a deliberate choice in the Vanilla design system, Canonical's component library: the Suru geometric identity depends on sharp rectangular forms to make its diagonal tile patterns read as geometric, not organic. Rounded corners in the UI would work against the angular Suru geometry. The only rounding in the entire system is the circular crop on the Ubuntu Summit speaker/mascot image in the hero, which is an image treatment rather than a CSS border-radius on a UI element.

Can I use this DESIGN.md to build my own open-source marketing site?

Yes — the file is structured for direct use in Claude, Cursor, or any AI design tool. The critical calls: charcoal hero (#262626 on the dark band), white body canvas (#ffffff), Ubuntu variable font at weight 180 for display and 550 for headings, green (#008013) for CTA buttons only, and zero border-radius everywhere. The Suru geometric patterns are the system's visual identity layer and are not captured as color tokens — they live as background images in --vf-suru-* CSS variables. For a fully-Ubuntu-accurate build you would reference those assets from assets.ubuntu.com or recreate the diagonal triangular forms as SVG. Without the Suru layer the system reduces to a sharp-edged, type-led editorial layout in charcoal and white.

Ubuntu Design System

Ubuntu's marketing-site design system as a DESIGN.md file.

About Ubuntu DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source ubuntu.com

Backend, Database & DevOps
Web Infrastructure & Hosting

Ubuntu's marketing site opens with a full-bleed charcoal hero (#262626) bearing an announcement headline in Ubuntu variable at weight 550, 40px — "Ubuntu Summit 26.04: advancing open source together" — with a circular logo treatment and a single green CTA button. Below that band, the page switches to white and runs in dense editorial columns with the same Ubuntu variable font, now at weight 180 for display headings and 400 for body copy. The weight 180 is the system's most unusual typographic move: a display heading lighter than caption text in most font stacks, producing an editorial airiness that contrasts with the heavy charcoal hero above it.

The decorative layer is Canonical's Suru system — a set of diagonal geometric tile images referenced by CSS variables like --vf-suru-pyramid-top-left and --vf-suru-fan-bottom-right. These JPG assets contain sage-gray triangular forms positioned at corners and section edges, giving the page a geometry-led identity that lives in background images rather than SVG or border patterns. The result is that ubuntu.com's visual distinctiveness is entirely in these image assets, not in its color palette (white and charcoal), its shapes (all square), or its type (sparse weight use). Stripping the Suru assets leaves a monochrome editorial page with no remaining identity marker.

The action color split is worth noting explicitly: Ubuntu orange (#e95420) appears in the top-left logo mark and nowhere else on the page. The primary CTA button is a separate green (#008013), a Canonical-specific color wired as --vf-color-button-positive-default. This means the brand-recognition color and the action-trigger color are different hues, an architectural decision that leaves the orange as a pure identity signal and assigns all functional urgency to green. For a developer audience, green-as-action maps to "go" / "success" rather than to brand recall — a pragmatic choice over a purely aesthetic one.

What makes it distinct

Ultra-light display typeUbuntu variable at weight 180 (not 400) for the 40px hero heading is the lightest display weight in the directory by a wide margin
Suru pattern systemCanonical's diagonal geometric tile images (pyramid corner, fan corner, divider triangle, 50/50 split) carry all decorative work as CSS-variable-referenced JPG assets
Orange logo, green buttonthe Ubuntu orange (#e95420) appears only on the logo; the primary CTA is a separate green (#008013), an unusual brand/action color split
Zero corner radiusno element on the marketing site rounds its corners; all surfaces, buttons, inputs, and cards are fully square-cornered
Charcoal hero, white bodythe above-fold hero and announcement banner are near-black (#262626); the rest of the page is white, with no alternating dark-band pattern

Live at ubuntu.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

ubuntu.com

Explore Ubuntu

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Ubuntu design system FAQ

Common questions about Ubuntu's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Ubuntu — official site

Ubuntu's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.