Ultra Design System

Get DESIGN.md Download View template Works with

Ultra is a loud, one-colour agency site. The whole page is a flat orange-red (#E85914) and everything on it is black: bold uppercase Roboto, 3px rules and outlined pills. It reads like a screen-printed poster or a brutalist zine. There are no greys, no shadows, no gradients and no second accent. The only other colours on the page come from the project screenshots in the work strip.

Four signatures make it recognisable:

One colour, one ink. #E85914 background, #000000 for every word, line and border. Hover states simply swap the two: black fill, orange text.
The boxed nav. A three-cell header (logo / four links / BUY ULTRA pill) built from 3px black borders, each cell 130px tall, sitting on a 3px rule that runs the full width.
Ruled poster hero. Three uppercase lines at 12vw (CREATE, ULTRA BUILD, LAUNCH), each on its own row between 3px black rules, staggered left / centred / left, with a small ✱ BASED IN NEW YORK tag and a large ↘ arrow on the right.
The sideways work strip. Project screenshots in a horizontal track that moves as you scroll, separated by 3px vertical black lines, each with an outlined name bar underneath that alternates between square and pill.

Ultra is a single-theme, light-on-colour design: there is no dark mode and no white page.

Colors

Surfaces

canvas#E85914

Page background on every section, including nav and footer (CSS var --orange-red)

surface-1#E85914

Same as canvas

inverse-canvas#000000

Hover fills on nav cells and the black wipe bars that reveal headings

field#E85914

Inputs are transparent on canvas with a 3px black bottom border

Ink

on-primary#000000

Text on primary

ink#000000

Every heading, label, link, icon and paragraph (CSS var --black)

ink-muted#000000

Same as ink

inverse-ink#E85914

Text on inverse-canvas

Action

primary#E85914

The outlined pill: transparent (shows canvas) with a 3px black border and black text

primary-hover#000000

The pill fills black on hover and its text turns #E85914

Lines & effects

line#000000

3px hero and nav rules, 3px button borders, 1–3px column dividers

Typography

Roboto · display-hero

The quick brown fox jumps

Hero lines. 173px · 700 · 0.9 · 5px

Roboto · headline-lg

The quick brown fox jumps

Base h1 on inner pages. 38px · 700 · 1.16

Roboto · body-lg

The quick brown fox jumps

Lead paragraphs: Ultra — creating user experience designs / we have 10 awards, the about text. 28px · 500 · 1.1

Roboto · title-md

The quick brown fox jumps

Project names in the work strip: Logan Template, Roby Template. 24px · 500 · 1

Roboto · label-lg

The quick brown fox jumps

Nav links (.button-text, inside a 34px rolling mask). 26px · 700 · 1.23 · 1px

Roboto · eyebrow

The quick brown fox jumps

Section tags after a ✱: FEATURED WORK, ABOUT ULTRA, SEND A MESSAGE. 16px · 700 · 1

Spacing & shape

Purpose	Value
Container	full width
Section rhythm	sections have no vertical padding of their own
Breakpoints	991px (tablet), 767px (landscape phone), 479px (phone), plus a min-width: 768px rule set

Spacing scale

Token	Value	Preview
`hair`	4px
`xs`	16px
`sm`	20px
`md`	30px
`lg`	40px
`xl`	70px

Layout spacing

Token	Value	Preview
`gutter`	10px
`section`	40px
`nav-cell`	130px

Border radius

label-pill30px

pill50px

Motion

Button hover	Background and text swap (#E85914 ↔ #000000), transition: all .2s
Text roll	Labels sit in a 34px overflow-hidden .button-text-wrapper with a duplicate copy below (buy ultra twice); on hover the copy rolls up to y: 0%, 300ms ease
Nav fill	.button-line-first, a black bar at the bottom of each nav link, starts at height 0 and grows on hover while the link colours invert
Heading reveal	.heading-overlay, a black bar parked at translateX(-100%) over each hero line, slides across to reveal the text on load
Work strip	The project row moves sideways as the page scrolls
Icon rotation	The ✱ and arrow rotate, 400ms ease

Do’s and don’ts

Paint the whole page #E85914 and set every piece of text, line and icon in #000000.
Use Roboto 700 uppercase with 1px tracking for every label, nav item and button.
Separate rows with 3px black rules and 40px of space above and below.
Use the outlined pill (3px border, 50px radius, 12px 30px padding) and invert it to black on hover.
Put ✱ before every section eyebrow.
Let display type run at 12vw with 0.9 line height and +5px tracking.
Add white sections, grey text or any second accent; the unused --yellow #FFEF43 and --azure #E7FBFC stay unused.
Add drop shadows, gradients, blur or rounded image corners.
Use radii other than 0, 30px (name bars) and 50px (buttons).
Use thin or light Roboto weights for text, even though 100 and 300 are loaded.
Fill a button with black at rest; the black fill is the hover state only.
Animate colour with a fade longer than 400ms; swaps are quick (200ms on buttons).

Example prompt

Any page in the Ultra style

Prompt

Build your page in the Ultra style. Background #E85914 everywhere; all text, borders and icons #000000. Font: Roboto, weights 500 and 700, uppercase for headings, labels and buttons with 1px letter spacing. Hero: one to three words per line at 12vw, weight 700, line height 0.9, letter spacing 5px, each line between full-width 3px black rules with 40px above and below. Section tags: "✱ NAME" at 16px bold. Lead text: 28px Roboto 500, line height 1.1, sentence case, full black. Buttons: transparent pill, 3px black border, 50px radius, 12px 30px padding, 18px bold uppercase label; on hover fill #000000 and turn the text #E85914 in 200ms. Nav: three cells 130px tall bordered with 3px black lines (logo / links / pill). No shadows, no images with rounded corners, no other colours. Page gutter 10px, full width.

# Ultra Design System

> Measured from the Ultra template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Ultra is a loud, one-colour agency site. The whole page
is a flat orange-red (#E85914) and everything on it is
black: bold uppercase Roboto, 3px rules and outlined
pills. It reads like a screen-printed poster or a
brutalist zine. There are no greys, no shadows, no

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #E85914     | Page background on ever… |
| surface-1    | #E85914     | Same as canvas           |
| inverse-can… | #000000     | Hover fills on nav cell… |
| field        | #E85914     | Inputs are transparent … |
| on-primary   | #000000     | Text on primary          |
| ink          | #000000     | Every heading, label, l… |
| ink-muted    | #000000     | Same as ink              |
| inverse-ink  | #E85914     | Text on inverse-canvas   |
| primary      | #E85914     | The outlined pill: tran… |
| primary-hov… | #000000     | The pill fills black on… |
| line         | #000000     | 3px hero and nav rules,… |

## Typography

- display-hero: Roboto 173px / 700
- display-quote: Roboto 43px / 700
- headline-lg: Roboto 38px / 700
- headline-md: Roboto 31px / 700

{
  "$description": "Ultra design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#E85914",
      "$description": "The outlined pill: transparent (shows canvas) with a 3px black border and black text"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#000000",
      "$description": "The pill fills black on hover and its text turns #E85914"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#E85914",
      "$description": "Page background on every section, including nav and footer (CSS var --orange-red)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#E85914",
      "$description": "Same as canvas"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Every heading, label, link, icon and paragraph (CSS var --black)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Same as ink"
    },
    "line": {
      "$type": "color",
      "$value": "#000000",
      "$description": "3px hero and nav rules, 3px button borders, 1–3px column dividers"
    },
    "inverse-canvas": {
      "$type": "color",
      "$value": "#000000",

/* Ultra theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-label-pill, p-lg */

@theme {
  /* Colors */
  --color-primary: #E85914;
  --color-primary-hover: #000000;
  --color-on-primary: #000000;
  --color-canvas: #E85914;
  --color-surface-1: #E85914;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-line: #000000;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #E85914;
  --color-field: #E85914;

  /* Fonts */
  --font-sans: "Roboto", sans-serif;
  --font-roboto: "Roboto", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 173px;
  --text-display-hero--line-height: 0.9;
  --text-display-hero--letter-spacing: 5px;
  --text-display-hero--font-weight: 700;
  --text-display-quote: 43px;
  --text-display-quote--line-height: 1;
  --text-display-quote--letter-spacing: 0px;
  --text-display-quote--font-weight: 700;
  --text-headline-lg: 38px;
  --text-headline-lg--line-height: 1.16;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 700;
  --text-headline-md: 31px;
  --text-headline-md--line-height: 1.16;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 700;
  --text-headline-sm: 24px;
  --text-headline-sm--line-height: 1.25;
  --text-headline-sm--letter-spacing: 0px;
  --text-headline-sm--font-weight: 700;
  --text-body-lg: 28px;
  --text-body-lg--line-height: 1.1;
  --text-body-lg--letter-spacing: 0px;

/* Ultra design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #E85914; /* The outlined pill: transparent (shows canvas) with a 3px black border and black text */
  --color-primary-hover: #000000; /* The pill fills black on hover and its text turns #E85914 */
  --color-on-primary: #000000; /* Text on primary */
  --color-canvas: #E85914; /* Page background on every section, including nav and footer (CSS var --orange-red) */
  --color-surface-1: #E85914; /* Same as canvas */
  --color-ink: #000000; /* Every heading, label, link, icon and paragraph (CSS var --black) */
  --color-ink-muted: #000000; /* Same as ink */
  --color-line: #000000; /* 3px hero and nav rules, 3px button borders, 1–3px column dividers */
  --color-inverse-canvas: #000000; /* Hover fills on nav cells and the black wipe bars that reveal headings */
  --color-inverse-ink: #E85914; /* Text on inverse-canvas */
  --color-field: #E85914; /* Inputs are transparent on canvas with a 3px black bottom border */

  /* Fonts */
  --font-roboto: "Roboto", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 173px;
  --text-display-hero-font: var(--font-roboto);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 0.9;
  --text-display-hero-tracking: 5px;
  --text-display-quote: 43px;
  --text-display-quote-font: var(--font-roboto);
  --text-display-quote-weight: 700;
  --text-display-quote-line-height: 1;
  --text-display-quote-tracking: 0px;
  --text-headline-lg: 38px;
  --text-headline-lg-font: var(--font-roboto);
  --text-headline-lg-weight: 700;
  --text-headline-lg-line-height: 1.16;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 31px;
  --text-headline-md-font: var(--font-roboto);
  --text-headline-md-weight: 700;
  --text-headline-md-line-height: 1.16;
  --text-headline-md-tracking: 0px;
  --text-headline-sm: 24px;
  --text-headline-sm-font: var(--font-roboto);
  --text-headline-sm-weight: 700;
  --text-headline-sm-line-height: 1.25;
  --text-headline-sm-tracking: 0px;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Agency design systems, the same colors first.

Browse all 398

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Roboto · display-hero

Roboto · headline-lg

Roboto · body-lg

Roboto · title-md

Roboto · label-lg

Roboto · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Ultra style

More design systems like this

Fabrik

Oko

Nord

Fitex

Bring any of them to your AI tool