Theo Design System

Get DESIGN.md Download View template Works with

Theo is a one-screen personal portfolio. The home page is a single white viewport with no scrolling content (screenshots taken at four scroll depths all show the same screen; only the badge ring has turned):

a stack of three huge underlined nav words in the top-left corner, a three-statement manifesto set flush right, a green "Hire me" circle in the top-right corner and a tiny footer line. It feels like a business card blown up to poster size. Everything is black on white except one electric lawn green, #66FF00.

Signatures:

The stacked nav as headline. Home, Work, Pricing are set at 47px, weight 500, one per line, each with a 2px #66FF00 underline. The nav is the biggest type on the left half of the page and doubles as the visual anchor.
The right-aligned manifesto. The hero title is three short statements in display-hero (53px, line height 1.0), right-aligned inside a 70% wide block, separated by empty lines: Inspired by enthusiasm and ignited by wonder. / Creative specialist and visual director based in Tokyo, JP. / Open for collaborations!
The green "Hire me" badge. A 140px #66FF00 circle in the top-right corner with a phone icon in the middle and HIRE ME set twice around the edge in small uppercase. The ring of text turns between screenshots, so it rotates.
One colour only. Lawn green appears in exactly three places: the name Theô Olson, the nav underlines and the badge. Nothing else on the page has colour.

Colors

Surfaces

canvas#FFFFFF

Page background (body background-color: #fff)

surface-1#F5E9FF

Lavender (--lavender), the background of the .page-content wrapper

Ink

on-primary#000000

Text on primary

on-accent#000000

ink#000000

All text: nav, hero title, footer, social icons (--black)

ink-muted#000000

Body copy

Action

primary#66FF00

The "Hire me" circle and its black ring text and phone icon (--lawn-green)

primary-hover#66FF00

accent#66FF00

The Theô Olson name, the nav-link hover colour

Lines & effects

line#66FF00

The 2px underline under every nav link

line-strong#000000

The 1px left rule on blockquotes in rich text (project pages)

Typography

Hubot Sans · display-hero

The quick brown fox jumps

The right-aligned manifesto (.title-1, the page's h1). 53px · 500 · 1.0

Hubot Sans · headline-lg

The quick brown fox jumps

Base h1 on inner pages. 46px · 500 · 0.96

Hubot Sans · title-md

The quick brown fox jumps

Base h4. 18px · 600 · 1.33

Hubot Sans · label

The quick brown fox jumps

Base h5. 14px · 600 · 1.43

Hubot Sans · eyebrow

The quick brown fox jumps

Base h6; also the size class of the HIRE ME ring text. 12px · 600 · 1.5

Inter Tight · body-lg

The quick brown fox jumps

Paragraphs in rich text (base p). 20px · 500 · 1.3

Spacing & shape

Purpose	Value
Container	there is no centred container
Breakpoints	Webflow's 991px, 767px and 479px, plus a min-width: 768px set

Spacing scale

Token	Value	Preview
`hair`	4px
`xs`	10px
`sm`	20px

Layout spacing

Token	Value	Preview
`badge-inset`	27px
`gutter`	30px
`section-bottom`	72px
`section-top`	144px

Border radius

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Motion

Nav-link hover	Text #000000 → #66FF00, underline #66FF00 → transparent. CSS transition: all
Badge ring	HIRE ME text rotates continuously around the phone icon
Page load	Page-load interactions hide the loader (display: none, opacity to 0 in 400–500ms)

Do’s and don’ts

Keep the page white #FFFFFF with all text in #000000, including paragraphs.
Use #66FF00 only as a fill (the 140px badge), a 2px underline, or the large name wordmark.
Set nav links at 47px weight 500 with −1px tracking and a 2px #66FF00 underline, stacked one per line.
Right-align the hero statements in a 70% wide block at 53px, line height 1.0.
Keep a 30px gutter on every edge for the nav, badge and footer.
Keep corners square everywhere except the circular badge.
Put #66FF00 text on white below 40px. It has almost no contrast; the only small green is the large name.
Add grey body text, shadows, cards or gradients.
Add a second accent from the pastel variables next to the green.
Add a filled rectangular button. The only call to action is the round badge.
Fill the screen with sections on the home page. It is one viewport.
Shrink the nav into a normal 14–16px menu bar.

Example prompt

Any page in the Theo style

Prompt

Build your page in the Theo style. Use a pure white #FFFFFF page and Hubot Sans (variable font) in black #000000. Top-left, 30px from the edges: a green #66FF00 name wordmark, then nav links stacked one per line at 47px, weight 500, line height 1.0, tracking −1px, each with 4px bottom padding and a 2px #66FF00 underline; on hover the text turns #66FF00 and the underline disappears. Top-right, 30px in: a 140px #66FF00 circle with a black phone icon and "HIRE ME" in small black uppercase around the edge, slowly rotating. The hero is 100vh with padding 10% 30px 5%; put two or three short first-person statements at 53px weight 500, line height 1.0, right-aligned in a 70% wide block, separated by blank lines. Footer: a 14px weight 500 "©" line bottom-left and black 20px social icons bottom-right. No shadows, no radii except the circle, no other colours.

# Theo Design System

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

## Overview

Theo is a one-screen personal portfolio. The home page
is a single white viewport with no scrolling content
(screenshots taken at four scroll depths all show the
same screen; only the badge ring has turned):

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background (body b… |
| surface-1    | #F5E9FF     | Lavender (--lavender), … |
| on-primary   | #000000     | Text on primary          |
| on-accent    | #000000     |                          |
| ink          | #000000     | All text: nav, hero tit… |
| ink-muted    | #000000     | Body copy                |
| primary      | #66FF00     | The "Hire me" circle an… |
| primary-hov… | #66FF00     |                          |
| accent       | #66FF00     | The Theô Olson name, th… |
| line         | #66FF00     | The 2px underline under… |
| line-strong  | #000000     | The 1px left rule on bl… |

## Typography

- display-hero: Hubot Sans 53px / 500
- display-nav: Hubot Sans 47px / 500
- headline-lg: Hubot Sans 46px / 500
- headline-md: Hubot Sans 24px / 500

{
  "$description": "Theo design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#66FF00",
      "$description": "The \"Hire me\" circle and its black ring text and phone icon (--lawn-green)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#66FF00"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "accent": {
      "$type": "color",
      "$value": "#66FF00",
      "$description": "The Theô Olson name, the nav-link hover colour"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#000000"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background (body background-color: #fff)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F5E9FF",
      "$description": "Lavender (--lavender), the background of the .page-content wrapper"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "All text: nav, hero title, footer, social icons (--black)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Body copy"
    },

/* Theo 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-full, p-hair */

@theme {
  /* Colors */
  --color-primary: #66FF00;
  --color-primary-hover: #66FF00;
  --color-on-primary: #000000;
  --color-accent: #66FF00;
  --color-on-accent: #000000;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F5E9FF;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-line: #66FF00;
  --color-line-strong: #000000;

  /* Fonts */
  --font-sans: "Hubot Sans", sans-serif;
  --font-hubot-sans: "Hubot Sans", sans-serif;
  --font-inter-tight: "Inter Tight", sans-serif;
  --font-oswald: "Oswald", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 53px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 500;
  --text-display-nav: 47px;
  --text-display-nav--line-height: 1.0;
  --text-display-nav--letter-spacing: -1px;
  --text-display-nav--font-weight: 500;
  --text-headline-lg: 46px;
  --text-headline-lg--line-height: 0.96;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 500;
  --text-headline-md: 24px;
  --text-headline-md--line-height: 1.5;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 500;
  --text-headline-sm: 24px;
  --text-headline-sm--line-height: 1.25;
  --text-headline-sm--letter-spacing: 0px;
  --text-headline-sm--font-weight: 500;
  --text-title-md: 18px;

/* Theo 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: #66FF00; /* The "Hire me" circle and its black ring text and phone icon (--lawn-green) */
  --color-primary-hover: #66FF00;
  --color-on-primary: #000000; /* Text on primary */
  --color-accent: #66FF00; /* The Theô Olson name, the nav-link hover colour */
  --color-on-accent: #000000;
  --color-canvas: #FFFFFF; /* Page background (body background-color: #fff) */
  --color-surface-1: #F5E9FF; /* Lavender (--lavender), the background of the .page-content wrapper */
  --color-ink: #000000; /* All text: nav, hero title, footer, social icons (--black) */
  --color-ink-muted: #000000; /* Body copy */
  --color-line: #66FF00; /* The 2px underline under every nav link */
  --color-line-strong: #000000; /* The 1px left rule on blockquotes in rich text (project pages) */

  /* Fonts */
  --font-hubot-sans: "Hubot Sans", sans-serif;
  --font-inter-tight: "Inter Tight", sans-serif;
  --font-oswald: "Oswald", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 53px;
  --text-display-hero-font: var(--font-hubot-sans);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-display-nav: 47px;
  --text-display-nav-font: var(--font-hubot-sans);
  --text-display-nav-weight: 500;
  --text-display-nav-line-height: 1.0;
  --text-display-nav-tracking: -1px;
  --text-headline-lg: 46px;
  --text-headline-lg-font: var(--font-hubot-sans);
  --text-headline-lg-weight: 500;
  --text-headline-lg-line-height: 0.96;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 24px;
  --text-headline-md-font: var(--font-hubot-sans);
  --text-headline-md-weight: 500;
  --text-headline-md-line-height: 1.5;
  --text-headline-md-tracking: 0px;
  --text-headline-sm: 24px;
  --text-headline-sm-font: var(--font-hubot-sans);
  --text-headline-sm-weight: 500;

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

Portfolio 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

Hubot Sans · display-hero

Hubot Sans · headline-lg

Hubot Sans · title-md

Hubot Sans · label

Hubot Sans · eyebrow

Inter Tight · body-lg

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Theo style

More design systems like this

Katen

Portfolifa

Kai's

Mio Kain

Bring any of them to your AI tool