Maxira Design System

Get DESIGN.md Download View template Works with

Maxira website template preview detail 2

Maxira website template preview detail 3

Maxira is a dark, confident marketing-agency site. The page is pure black, and the hero is lit from the top by a spotlight of electric blue rays over a faint grid. Type is a clean grotesk (Instrument Sans) with one phrase per headline in Playfair Display italic that fades out to grey, and small labels are Geist Mono uppercase, with section eyebrows in square brackets. Royal blue #110FDF is the action colour.

Four signatures make it recognisable:

Fading serif phrase. Headlines end or begin with a Playfair Display italic phrase whose fill fades from white to 10% white across the words: Built to power your *next level* expansion, End-to-end , marketing, *simplified*, Made for clients with a *mission in mind*.
Bracketed mono labels. Eyebrows are Geist Mono 13px uppercase inside brackets: [ CORE FEATURES ], [ TESTIMONIALS ], [ ONE-TIME PAYMENT ], [ EMPOWERING 100+ TOP BRANDS TO OUTPERFORM ].
Mono-caps blue pills. CONTACT US, BOOK YOUR CALL, VIEW ALL WORKS: #110FDF pills with white Geist Mono uppercase text, a 1px light gradient rim and a soft shadow.
Capsule nav. Centred links sit in a frosted black capsule (black at 30%, 10px blur); the active link is a white pill with black text.

Maxira is dark-first with white bands for features and FAQ.

Colors

Surfaces

canvas#000000

Page background (--second-color: black)

surface-1#121212

Raised dark tiles and the dropdown, few uses

surface-2#191919

Raised dark tiles and the dropdown, few uses

surface-3#212121

Raised dark tiles and the dropdown, few uses

field#000000

field-border#FFFFFF · 15%

Input border

inverse-canvas#FFFFFF

White bands (features, FAQ), perk cards, active nav pill

Ink

on-primary#FFFFFF

Text on primary

ink#FFFFFF

Headlines, nav, buttons (--first-color)

ink-muted#FFFFFF · 80%

Paragraphs (p { opacity: .8 })

ink-label#F7F7F7

Mono eyebrows on dark (--gray, 20 uses as text)

on-media#FFFFFF

inverse-ink#000000

Text on inverse-canvas

inverse-ink-muted#000000 · 70%

Pricing feature rows (.p-for-price { opacity: .7 })

inverse-ink-subtle#000000 · 48%

The faded second half of perk titles (Pause *Anytime*)

Action

primary#110FDF

Buttons, the case-study card (--primary)

primary-hover#2927E4

Button hover (--primary-1b, .button-inner:hover)

Lines & effects

line#222222

1px borders on dark

line-strong#FFFFFF · 30%

Hairlines and the button rim

nav-divider#AAA9A5

1px × 30px dividers in the menu

glass#FFFFFF · 93%

Project label tabs on images

glass-soft#FFFFFF · 80%

The 110px VIEW circle (.project-circle-text)

nav-glass#000000 · 30%

The nav link capsule

switch-track#444444

The billing switch

inverse-surface#F7F7F7

Feature cards on the white band

card-light#FFFFFF · 95%

The pricing card

dropdown-ink#222222

Typography

Instrument Sans · display-hero

The quick brown fox jumps

Built to power your next level expansion. 70px · 500 · 1.0 · -1px

Playfair Display · serif-display

The quick brown fox jumps

Built to power your next level expansion. 70px · 400 · 1.0 · -1px

Instrument Sans · headline-lg

The quick brown fox jumps

Section titles, pricing plan name Monthly. 47px · 500 · 1.1 · -1px

Instrument Sans · quote

The quick brown fox jumps

Testimonial quotes (.second-title). 24px · 500 · 1.1

Instrument Sans · title-lg

The quick brown fox jumps

Case-study titles How we drove 1,3x ROAS…. 21px · 500 · 1.1

Instrument Sans · body-lg

The quick brown fox jumps

Section subtitles We translate vision into action. 18px · 400 · 1.3

Spacing & shape

Purpose	Value
Container	1200px max (.container), centred
Section rhythm	.section is 120px top and bottom with 5% sides (72px at 1440), 100px at ≤991 and 80px at ≤767
Breakpoints	991px, 767px and 479px (Webflow defaults), plus a few min-width: 768px rules

Spacing scale

Token	Value	Preview
`hair`	4px
`xs`	9px
`sm`	15px
`md`	20px
`lg`	25px
`xl`	35px
`2xl`	75px
`3xl`	100px

Layout spacing

Token	Value	Preview
`section-x`	72px
`hero-bottom`	90px
`nav-height`	93px
`section`	120px

Border radius

sm6px

card6.4px

pill-sm60px

pill100px

nav-pill200px

full9999px

Surfaces

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

Level 1canvas

Level 2surface-1

Level 3surface-2

Level 4surface-3

Motion

Fade-in	Opacity 0 → 1, 1000ms outQuart
Rise	y 40px or 50px → 0, 500ms; quick variants 200ms outQuart
Parallax	y −100px ↔ 50px, scroll-scrubbed
Size grow	300ms ease; lines 1000ms outExpo
Rotate	600ms outExpo (icons)
Slider / marquee	x → 0%, 500ms inOutExpo
Background swap	200ms outQuart or 500ms (nav on scroll, buttons)
Dropdown	Chevron 400ms inOutQuint, panel 600ms inOutQuint
CSS hover	Button fill 0.2s; nav links 0.15s; dropdown 0.3s

Do’s and don’ts

Keep the canvas #000000 and use white bands (#FFFFFF, #F7F7F7 cards) for feature and FAQ sections.
Use #110FDF for every main action, hovering to #2927E4.
Set buttons and labels in Geist Mono uppercase; put eyebrows in [ brackets ].
End or start each headline with a Playfair Display italic phrase that fades from white to 10%.
Use 6.4px corners on cards and inputs, and full pills for buttons and nav.
Keep body copy at white 80% on black and black 70% on white.
Use the declared violet (#B300FF) or neon green (#1DD35A); they are unused.
Load plain Geist for body text; the page renders Instrument Sans.
Add drop shadows to cards; only buttons and the dropdown have them.
Italicise a whole headline or use Playfair for labels.
Use gradients on buttons beyond the 1px light rim.
Animate longer than 1000ms.

Example prompt

Any page in the Maxira style

Prompt

Build your page in the Maxira style. Background #000000. Headlines in Instrument Sans 500, tracking −1px (70px hero, 47px sections, line height 1.0–1.1), with 1–3 words in Playfair Display italic 400 at the same size, filled with linear-gradient(279deg, #FFFFFF1A, #FFFFFF) on the text. Above each title, a Geist Mono 13px uppercase eyebrow in brackets: "[ LABEL ]" in #F7F7F7. Paragraphs are Instrument Sans 16px, line height 1.3, white at 80%. Buttons are #110FDF pills (100px radius, 46px tall, 25px sides) with white Geist Mono 14px weight 500 uppercase text, a 1px white-40%-to-transparent rim and box-shadow 0 4px 24px #0000001A; hover #2927E4. Cards have a 6.4px radius; on white bands use #F7F7F7 cards with 15px padding. Sections use 120px vertical padding and a 1200px container. Reveal with a 1000ms outQuart fade.

# Maxira Design System

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

## Overview

Maxira is a dark, confident marketing-agency site. The
page is pure black, and the hero is lit from the top by
a spotlight of electric blue rays over a faint grid.
Type is a clean grotesk (Instrument Sans) with one
phrase per headline in Playfair Display italic that

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #000000     | Page background (--seco… |
| surface-1    | #121212     | Raised dark tiles and t… |
| surface-2    | #191919     | Raised dark tiles and t… |
| surface-3    | #212121     | Raised dark tiles and t… |
| field        | #000000     |                          |
| field-border | #FFFFFF 15% | Input border             |
| inverse-can… | #FFFFFF     | White bands (features, … |
| on-primary   | #FFFFFF     | Text on primary          |
| ink          | #FFFFFF     | Headlines, nav, buttons… |
| ink-muted    | #FFFFFF 80% | Paragraphs (p { opacity… |
| ink-label    | #F7F7F7     | Mono eyebrows on dark (… |
| on-media     | #FFFFFF     |                          |
| inverse-ink  | #000000     | Text on inverse-canvas   |
| inverse-ink… | #000000 70% | Pricing feature rows (.… |

## Typography

- display-hero: Instrument Sans 70px / 500
- serif-display: Playfair Display 70px / 400
- headline-lg: Instrument Sans 47px / 500
- serif-lg: Playfair Display 47px / 400

{
  "$description": "Maxira design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#110FDF",
      "$description": "Buttons, the case-study card (--primary)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#2927E4",
      "$description": "Button hover (--primary-1b, .button-inner:hover)"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Page background (--second-color: black)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#121212",
      "$description": "Raised dark tiles and the dropdown, few uses"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#191919",
      "$description": "Raised dark tiles and the dropdown, few uses"
    },
    "surface-3": {
      "$type": "color",
      "$value": "#212121",
      "$description": "Raised dark tiles and the dropdown, few uses"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Headlines, nav, buttons (--first-color)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#FFFFFFCC",

/* Maxira 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-sm, p-lg */

@theme {
  /* Colors */
  --color-primary: #110FDF;
  --color-primary-hover: #2927E4;
  --color-on-primary: #FFFFFF;
  --color-canvas: #000000;
  --color-surface-1: #121212;
  --color-surface-2: #191919;
  --color-surface-3: #212121;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFFCC;
  --color-ink-label: #F7F7F7;
  --color-line: #222222;
  --color-line-strong: #FFFFFF4D;
  --color-nav-divider: #AAA9A5;
  --color-glass: #FFFFFFED;
  --color-glass-soft: #FFFFFFCC;
  --color-nav-glass: #0000004D;
  --color-field: #000000;
  --color-field-border: #FFFFFF26;
  --color-switch-track: #444444;
  --color-on-media: #FFFFFF;
  --color-inverse-canvas: #FFFFFF;
  --color-inverse-ink: #000000;
  --color-inverse-ink-muted: #000000B3;
  --color-inverse-ink-subtle: #0000007A;
  --color-inverse-surface: #F7F7F7;
  --color-card-light: #FFFFFFF2;
  --color-dropdown-ink: #222222;

  /* Fonts */
  --font-sans: "Instrument Sans", sans-serif;
  --font-instrument-sans: "Instrument Sans", sans-serif;
  --font-geist-mono: "Geist Mono", monospace;
  --font-playfair-display: "Playfair Display", serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 70px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: -1px;
  --text-display-hero--font-weight: 500;
  --text-serif-display: 70px;

/* Maxira 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: #110FDF; /* Buttons, the case-study card (--primary) */
  --color-primary-hover: #2927E4; /* Button hover (--primary-1b, .button-inner:hover) */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #000000; /* Page background (--second-color: black) */
  --color-surface-1: #121212; /* Raised dark tiles and the dropdown, few uses */
  --color-surface-2: #191919; /* Raised dark tiles and the dropdown, few uses */
  --color-surface-3: #212121; /* Raised dark tiles and the dropdown, few uses */
  --color-ink: #FFFFFF; /* Headlines, nav, buttons (--first-color) */
  --color-ink-muted: #FFFFFFCC; /* Paragraphs (p { opacity: .8 }) */
  --color-ink-label: #F7F7F7; /* Mono eyebrows on dark (--gray, 20 uses as text) */
  --color-line: #222222; /* 1px borders on dark */
  --color-line-strong: #FFFFFF4D; /* Hairlines and the button rim */
  --color-nav-divider: #AAA9A5; /* 1px × 30px dividers in the menu */
  --color-glass: #FFFFFFED; /* Project label tabs on images */
  --color-glass-soft: #FFFFFFCC; /* The 110px VIEW circle (.project-circle-text) */
  --color-nav-glass: #0000004D; /* The nav link capsule */
  --color-field: #000000;
  --color-field-border: #FFFFFF26; /* Input border */
  --color-switch-track: #444444; /* The billing switch */
  --color-on-media: #FFFFFF;
  --color-inverse-canvas: #FFFFFF; /* White bands (features, FAQ), perk cards, active nav pill */
  --color-inverse-ink: #000000; /* Text on inverse-canvas */
  --color-inverse-ink-muted: #000000B3; /* Pricing feature rows (.p-for-price { opacity: .7 }) */
  --color-inverse-ink-subtle: #0000007A; /* The faded second half of perk titles (Pause *Anytime*) */
  --color-inverse-surface: #F7F7F7; /* Feature cards on the white band */
  --color-card-light: #FFFFFFF2; /* The pricing card */
  --color-dropdown-ink: #222222;

  /* Fonts */
  --font-instrument-sans: "Instrument Sans", sans-serif;
  --font-geist-mono: "Geist Mono", monospace;
  --font-playfair-display: "Playfair Display", serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 70px;
  --text-display-hero-font: var(--font-instrument-sans);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: -1px;
  --text-serif-display: 70px;
  --text-serif-display-font: var(--font-playfair-display);

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

Instrument Sans · display-hero

Playfair Display · serif-display

Instrument Sans · headline-lg

Instrument Sans · quote

Instrument Sans · title-lg

Instrument Sans · body-lg

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Maxira style

More design systems like this

Found

Agencē X

Agencix

Agencō

Bring any of them to your AI tool