Studiō Design System

Get DESIGN.md Download View template Works with

Studiō website template preview detail 2

Studiō website template preview detail 3

Studiō is a loud, poster-like creative studio site on near-black. The page opens on an electric violet gradient that fades to black, with three stacked words in huge uppercase Cabinet Grotesk, one of them drawn only as an outline. After the hero everything is quiet and dark: white uppercase section titles, plain white body text, square-cut photos in a two-column grid, and two coloured bands (cobalt for the numbers, violet for the closing call to action).

Four signatures make it recognisable:

The fixed left sidebar. The STUDIŌ logo and five uppercase nav links (HOME, ABOUT, WORK, NEWS, CONTACT) sit in a 250px column pinned to the top left and stay there on every scroll position. Content starts to the right of it.
Outlined display words. Some display words have transparent fill and a white stroke: DESIGN in the hero (3px stroke) and the fun-fact numbers 600+, 16, 99% (1px stroke). Solid and outlined words alternate.
Numbered sections. Each section is a row: a light-weight index 01–05 (36px, weight 300) right-aligned in a narrow column, then the uppercase title (FEATURED WORK, OUR EXPERTISE, FUN FACTS) and its content.
The violet hero. #8F00FF running down into the #151414 canvas, with a soft magenta glow (overlay-blend circle images) at the right edge, and a staggered three-line wordmark DIGITAL / DESIGN / STUDIO set right of centre.

Studiō is dark-only.

Colors

Surfaces

canvas#151414

Page background (--black), warm near-black

surface-1#111314

.absolute-background, a full-cover dark panel that is hidden by default and shown by interactions

field-line-focus#151414

Input bottom border on focus

Ink

on-primary#FFFFFF

Text on primary

on-secondary#FFFFFF

on-accent#FFFFFF

ink#FFFFFF

All text: titles, nav, links

ink-muted#FFFFFF

Body text is full white too

on-media#FFFFFF

Action

primary#8F00FF

Hero field (--blue-violet-2) and the .button fill (form submit)

primary-hover#B254FC

.button:hover

secondary#6B37D9

The Ready to take off? CTA band (--blue-violet), blockquote rule

accent#374AD9

The fun-facts band, faded into the canvas top and bottom

Lines & effects

line#FFFFFF · 20%

The track under underline links, accordion and info-row borders

line-strong#FFFFFF

The white fill line on underline links, the input bottom border, the date-pill border

media-tint#8F00FF · 30%

Blog-card overlay: a 30% violet wash plus a gradient to 70% violet at the bottom

media-tint-strong#8F00FF · 70%

With media-tint: Blog-card overlay: a 30% violet wash plus a gradient to 70% violet at the bottom

scrim#000000 · 40%

Bottom gradient on work cards (#FFFFFF00 → #00000066)

Typography

Cabinet Grotesk · display-hero

The quick brown fox jumps

Hero lines DIGITAL, DESIGN, STUDIO (.hero-display). 170px · 600 · 0.9 · 1px

Cabinet Grotesk · headline-lg

The quick brown fox jumps

Section titles (.display-2), margin-top −7px to align with the index. 55px · 500 · 1.3

Cabinet Grotesk · title-quote

The quick brown fox jumps

Blockquote in rich text, 2px secondary left rule. 26px · 500 · 1.3

Cabinet Grotesk · body-lg

The quick brown fox jumps

Paragraphs (p). 19px · 400 · 1.2

Cabinet Grotesk · label-lg

The quick brown fox jumps

Underline links Let's Talk, View Works, footer links. 19px · 600 · 1.16

Cabinet Grotesk · eyebrow

The quick brown fox jumps

Footer column titles MENU, CONTACT US. 18px · 600 · 1.5

Spacing & shape

Purpose	Value
Container	1100px max, centred, inside sections that pad 100px top and bottom and 5% on the right (72px at 1440)
Section row	.section is a flex row with a 50px gap: the index number column, then the content
Breakpoints	991px, 767px, 479px

Spacing scale

Token	Value	Preview
`hair`	4px
`xs`	10px
`sm`	16px
`md`	25px
`lg`	40px
`xl`	50px

Layout spacing

Token	Value	Preview
`logo-gap`	55px
`cta`	85px
`section`	100px
`sidebar`	250px

Border radius

button4px

pill40px

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 hover bar	White block translates y 101% → 0 under the link, 300ms ease; elements move between y 0% and −100% in 300ms ease
Underline grow	White 1px line width change over the 20% track, 300ms ease
Icon hover	scale 1 → 1.1, 100ms ease, and back
Social circle	White circle scale 0 → 1, 500ms
Scroll fade-in	opacity 0 → 1, 1000ms outQuart
Scroll rise	y 50px → 0 with opacity, 500ms; 600ms outExpo for the slower items
Heading wipe	A canvas-coloured block (.heading-overlay) slides off the title from translate x −100%
Arrow nudge	x 0 → 6px, 500ms outQuint
Button	all 200ms on .button

Do’s and don’ts

Keep the nav as a fixed 250px left sidebar with uppercase 18px weight-800 links.
Number every section 01, 02… in 36px weight 300 beside a 55px uppercase title.
Pair a solid display word with an outlined one (transparent fill, white stroke).
Fade every coloured field into canvas #151414 at its edges.
Use underline links (label-lg plus a 1px line that grows on hover) as the main call to action.
Keep photos square-cornered and full-colour.
Put grey or coloured text on the page. All text is #FFFFFF.
Use violet #8F00FF for small UI details like icons or tags; it is a field colour and the one filled button.
Round cards or images. Only the button (4px) and date pills (40px) are rounded.
Add drop shadows or boxed panels; the template has none.
Use negative letter spacing or lowercase display titles.
Use more than one filled button in a section.
Shrink button text below 19px weight 600: white on the #B254FC hover state is only 3.8:1, so it relies on the large label.

Example prompt

Any page in the Studiō style

Prompt

Build your page in the Studiō style. Background #151414, all text #FFFFFF in Cabinet Grotesk. Put a fixed 250px sidebar at the top left with the logo and uppercase nav links (18px, weight 800, 1px tracking, padding 14px 30px 12px 50px). Open the page with a hero that runs #8F00FF into #151414 top to bottom, with uppercase display words at 170px, weight 600, line height 0.9, 1px tracking, staggered right, one of them outlined (transparent fill, 3px white text stroke). Each section is a flex row with a 50px gap: a 36px weight-300 index (01, 02…) then a 55px weight-500 uppercase title; sections pad 100px top and bottom, content max 1100px. Use square-cornered saturated product photos in a 2-column grid with a 25px gap. Calls to action are 19px weight-600 text links with a 1px line 4px below that grows on hover in 300ms ease. Add a #374AD9 band with outlined 100px numbers and a #6B37D9 closing band with a 70px weight-900 uppercase question. The only filled button is #8F00FF with white text, 4px radius, padding 12px 25px, hover #B254FC. No shadows, no grey text.

# Studiō Design System

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

## Overview

Studiō is a loud, poster-like creative studio site on
near-black. The page opens on an electric violet
gradient that fades to black, with three stacked words
in huge uppercase Cabinet Grotesk, one of them drawn
only as an outline. After the hero everything is quiet

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #151414     | Page background (--blac… |
| surface-1    | #111314     | .absolute-background, a… |
| field-line-… | #151414     | Input bottom border on … |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #FFFFFF     |                          |
| on-accent    | #FFFFFF     |                          |
| ink          | #FFFFFF     | All text: titles, nav, … |
| ink-muted    | #FFFFFF     | Body text is full white… |
| on-media     | #FFFFFF     |                          |
| primary      | #8F00FF     | Hero field (--blue-viol… |
| primary-hov… | #B254FC     | .button:hover            |
| secondary    | #6B37D9     | The Ready to take off? … |
| accent       | #374AD9     | The fun-facts band, fad… |
| line         | #FFFFFF 20% | The track under underli… |

## Typography

- display-hero: Cabinet Grotesk 170px / 600
- display-metric: Cabinet Grotesk 100px / 500
- display-cta: Cabinet Grotesk 70px / 900
- headline-lg: Cabinet Grotesk 55px / 500

{
  "$description": "Studiō design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#8F00FF",
      "$description": "Hero field (--blue-violet-2) and the .button fill (form submit)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#B254FC",
      "$description": ".button:hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#151414",
      "$description": "Page background (--black), warm near-black"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#111314",
      "$description": ".absolute-background, a full-cover dark panel that is hidden by default and shown by interactions"
    },
    "secondary": {
      "$type": "color",
      "$value": "#6B37D9",
      "$description": "The Ready to take off? CTA band (--blue-violet), blockquote rule"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "accent": {
      "$type": "color",
      "$value": "#374AD9",
      "$description": "The fun-facts band, faded into the canvas top and bottom"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#FFFFFF"
    },

/* Studiō 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-button, p-lg */

@theme {
  /* Colors */
  --color-primary: #8F00FF;
  --color-primary-hover: #B254FC;
  --color-on-primary: #FFFFFF;
  --color-canvas: #151414;
  --color-surface-1: #111314;
  --color-secondary: #6B37D9;
  --color-on-secondary: #FFFFFF;
  --color-accent: #374AD9;
  --color-on-accent: #FFFFFF;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFF;
  --color-line: #FFFFFF33;
  --color-line-strong: #FFFFFF;
  --color-on-media: #FFFFFF;
  --color-media-tint: #8F00FF4D;
  --color-media-tint-strong: #8F00FFB3;
  --color-scrim: #00000066;
  --color-field-line-focus: #151414;

  /* Fonts */
  --font-sans: "Cabinet Grotesk", "Outfit", sans-serif;
  --font-cabinet-grotesk: "Cabinet Grotesk", "Outfit", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 170px;
  --text-display-hero--line-height: 0.9;
  --text-display-hero--letter-spacing: 1px;
  --text-display-hero--font-weight: 600;
  --text-display-metric: 100px;
  --text-display-metric--line-height: 0.9;
  --text-display-metric--letter-spacing: 3px;
  --text-display-metric--font-weight: 500;
  --text-display-cta: 70px;
  --text-display-cta--line-height: 1.1;
  --text-display-cta--letter-spacing: 3px;
  --text-display-cta--font-weight: 900;
  --text-headline-lg: 55px;
  --text-headline-lg--line-height: 1.3;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 500;

/* Studiō 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: #8F00FF; /* Hero field (--blue-violet-2) and the .button fill (form submit) */
  --color-primary-hover: #B254FC; /* .button:hover */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #151414; /* Page background (--black), warm near-black */
  --color-surface-1: #111314; /* .absolute-background, a full-cover dark panel that is hidden by default and shown by interactions */
  --color-secondary: #6B37D9; /* The Ready to take off? CTA band (--blue-violet), blockquote rule */
  --color-on-secondary: #FFFFFF;
  --color-accent: #374AD9; /* The fun-facts band, faded into the canvas top and bottom */
  --color-on-accent: #FFFFFF;
  --color-ink: #FFFFFF; /* All text: titles, nav, links */
  --color-ink-muted: #FFFFFF; /* Body text is full white too */
  --color-line: #FFFFFF33; /* The track under underline links, accordion and info-row borders */
  --color-line-strong: #FFFFFF; /* The white fill line on underline links, the input bottom border, the date-pill border */
  --color-on-media: #FFFFFF;
  --color-media-tint: #8F00FF4D; /* Blog-card overlay: a 30% violet wash plus a gradient to 70% violet at the bottom */
  --color-media-tint-strong: #8F00FFB3; /* With media-tint: Blog-card overlay: a 30% violet wash plus a gradient to 70% violet at the bottom */
  --color-scrim: #00000066; /* Bottom gradient on work cards (#FFFFFF00 → #00000066) */
  --color-field-line-focus: #151414; /* Input bottom border on focus */

  /* Fonts */
  --font-cabinet-grotesk: "Cabinet Grotesk", "Outfit", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 170px;
  --text-display-hero-font: var(--font-cabinet-grotesk);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 0.9;
  --text-display-hero-tracking: 1px;
  --text-display-metric: 100px;
  --text-display-metric-font: var(--font-cabinet-grotesk);
  --text-display-metric-weight: 500;
  --text-display-metric-line-height: 0.9;
  --text-display-metric-tracking: 3px;
  --text-display-cta: 70px;
  --text-display-cta-font: var(--font-cabinet-grotesk);
  --text-display-cta-weight: 900;
  --text-display-cta-line-height: 1.1;
  --text-display-cta-tracking: 3px;
  --text-headline-lg: 55px;
  --text-headline-lg-font: var(--font-cabinet-grotesk);
  --text-headline-lg-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

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

Cabinet Grotesk · display-hero

Cabinet Grotesk · headline-lg

Cabinet Grotesk · title-quote

Cabinet Grotesk · body-lg

Cabinet Grotesk · label-lg

Cabinet Grotesk · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Studiō style

More design systems like this

Twin Studio

Agencium

AGNCY

AgencZ

Bring any of them to your AI tool