Autona Design System

Get DESIGN.md Download View template Works with

Autona website template preview detail 2

Autona website template preview detail 3

Autona is a dark, glowing marketing-agency site. Everything sits on a midnight navy (#00031C) lit by soft electric-blue light: a blue-and-green aurora in the hero, a blue radial glow behind the testimonials, blue haze in the corners of pricing cards. Headlines are wide, light-weight uppercase Geist, and every button is a small blue gradient block with a blue halo. The published preview uses the brand name AUTOMA in its logo and copy.

Four signatures make it recognisable:

Fading uppercase headlines. Section titles are uppercase Geist 400 with −0.4px tracking. The last line fades from white to about 40% white with a vertical gradient fill (DESIGNED FOR CLIENTS / WITH SPECIFIC GOALS). Project names fade mid-word (STUDIO F|OCUS).
Inline image in the headline. The hero CRAFTING / FUTURE [photo] OF / MARKETING sets a small rounded portrait (160×106px) between two words.
Glowing gradient buttons. LET'S CONNECT and GET STARTED: a 20° gradient from #2D1DA5 to #5B96FE, 6.4px radius, white 14px uppercase text, and a 0 7px 80px −12px #0162FF glow underneath.
Frosted pill eyebrows. Every section opens with a small uppercase pill (WELCOME TO AUTOMA, FUN FACTS, FEATURED WORK): white at 7%, 7px blur, 30px radius.

Autona is dark-only.

Colors

Surfaces

canvas#00031C

Page background (--second-color)

surface-1#070B2C

Work cards, raised navy panels

surface-2#FFFFFF · 7%

Eyebrow pills, dropdown and tab hover

surface-3#FFFFFF · 12%

The 1px gradient border shell around pricing cards

field-border#FFFFFF · 16%

Form input border

inverse-canvas#FFFFFF

The light nav dropdown panel

Ink

on-primary#FFFFFF

on-secondary#FFFFFF

ink#FFFFFF

Headlines, nav active link, button text (--first-color)

ink-muted#FFFFFF · 70%

Paragraphs (p { opacity: .7 }), nav links at rest

ink-subtle#FFFFFF · 60%

Plan names (CREATOR), footer links, category titles

on-media#FFFFFF

inverse-ink#222222

Text on inverse-canvas

Action

primary#2D1DA5

Button fill, linear-gradient(20deg, …)

primary-end#5B96FE

With primary: Button fill, linear-gradient(20deg, …)

primary-hover#2D1DA5

secondary#110FDF

Active pricing tab, testimonial band (--blue)

Lines & effects

glow#0162FF

Button halo: 0 7px 80px -12px

line#FFFFFF · 18%

Testimonial card borders

line-soft#FFFFFF · 15%

Tab menu border

chip#FFFFFF · 30%

Typography

Geist · display-hero

The quick brown fox jumps

CRAFTING FUTURE OF MARKETING. 120px · 400 · 1.0 · -0.4px

Geist · headline-price

The quick brown fox jumps

Prices $29,00 (.pricing-large, 3rem). 48px · 400 · 1.1

Geist · title-md

The quick brown fox jumps

Card titles. 20px · 500 · 1.3

Geist · body-lg

The quick brown fox jumps

Paragraphs at 70%; 1.6 in long text. 18px · 400 · 1.4

Geist · nav

The quick brown fox jumps

Nav links (1.1rem). 17.6px · 500 · 1.14

Geist · label

The quick brown fox jumps

Pricing features with checks (.p-for-price). 15px · 500 · 1.4

Spacing & shape

Purpose	Value
Container	1240px max (.container), centred; centred title blocks narrow to 700px
Section rhythm	.section is 120px top and bottom with 5% sides (72px at 1440)
Breakpoints	991px, 767px and 479px (Webflow defaults), plus a few min-width: 768px rules

Spacing scale

Token	Value	Preview
`hair`	5px
`xs`	10px
`sm`	16px
`md`	25px
`lg`	35px
`xl`	50px
`2xl`	70px

Layout spacing

Token	Value	Preview
`section-x`	72px
`logo-gap`	75px
`nav-height`	90px
`section`	120px
`footer-gap`	150px
`section-top`	160px

Border radius

button6.4px

field7px

md10px

lg15px

card-lg19px

pill30px

full100px

Surfaces

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

Level 1canvas

Level 2surface-1

Motion

Fade-up reveal	Opacity 0 → 1 and move to 0px, 1000ms outQuart
Line reveal	y 100% or 200% → 0%, 500ms (outExpo on titles)
Scale in	scale 0.8 → 1, 500ms
Parallax	y −40px ↔ 40px, scroll-scrubbed
Filter fade	Filter, 300–400ms ease
Dropdown	Chevron rotate 400ms inOutQuint; panel 600ms inOutQuint
Hover	Opacity and background 300ms (transition: all .3s); testimonial cards transform .3s, color .3s
Size grow	1000ms outExpo (bars and lines)

Do’s and don’ts

Keep the page on #00031C and use #070B2C only for raised navy tiles.
Set headlines uppercase in Geist 400 with −0.4px tracking, and fade the last line with the white gradient fill.
Use the gradient button (#2D1DA5 → #5B96FE, 6.4px radius) with the #0162FF glow for every main action.
Open each section with a frosted eyebrow pill (white 7%, 30px radius, 12px uppercase).
Put muted copy at white 70% and plan names or footer links at 60%.
Light sections with radial blue washes rather than flat blue fills.
Use flat drop shadows on cards; the only depth is glow, blur and gradient borders.
Set headlines in bold or sentence case.
Use green UI. --neon-green is declared but unused.
Round buttons into pills; pills are only for eyebrows and the tab switch.
Put gaps between work tiles; they sit edge to edge in one clipped block.
Animate reveals longer than 1000ms.

Example prompt

Any page in the Autona style

Prompt

Build your page in the Autona style. Background #00031C. Geist throughout. Titles are uppercase, weight 400, −0.4px tracking: 120px for the hero, 60px for sections, line height 1.0, centred; fade the last line with a white-to-40% vertical gradient on the text. Above each title put a frosted pill eyebrow: white at 7%, 7px backdrop blur, 30px radius, padding 9px 17px, 12px uppercase weight 500. Paragraphs are 18px, line height 1.4, white at 70%. Buttons: linear-gradient(20deg, #2D1DA5, #5B96FE), white 14px uppercase text with +0.5px tracking, 6.4px radius, 44px tall, box-shadow 0 7px 80px -12px #0162FF. Cards are #00031C inside a 1px white-12% border shell with a 10px radius and 30px padding. Sections use 120px vertical padding and a 1240px container. Reveal elements with a 1000ms outQuart fade-up.

# Autona Design System

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

## Overview

Autona is a dark, glowing marketing-agency site.
Everything sits on a midnight navy (#00031C) lit by soft
electric-blue light: a blue-and-green aurora in the
hero, a blue radial glow behind the testimonials, blue
haze in the corners of pricing cards. Headlines are

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #00031C     | Page background (--seco… |
| surface-1    | #070B2C     | Work cards, raised navy… |
| surface-2    | #FFFFFF 7%  | Eyebrow pills, dropdown… |
| surface-3    | #FFFFFF 12% | The 1px gradient border… |
| field-border | #FFFFFF 16% | Form input border        |
| inverse-can… | #FFFFFF     | The light nav dropdown … |
| on-primary   | #FFFFFF     |                          |
| on-secondary | #FFFFFF     |                          |
| ink          | #FFFFFF     | Headlines, nav active l… |
| ink-muted    | #FFFFFF 70% | Paragraphs (p { opacity… |
| ink-subtle   | #FFFFFF 60% | Plan names (CREATOR), f… |
| on-media     | #FFFFFF     |                          |
| inverse-ink  | #222222     | Text on inverse-canvas   |
| primary      | #2D1DA5     | Button fill, linear-gra… |

## Typography

- display-hero: Geist 120px / 400
- display-section: Geist 60px / 400
- display-metric: Geist 59px / 400
- headline-price: Geist 48px / 400

{
  "$description": "Autona design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#2D1DA5",
      "$description": "Button fill, linear-gradient(20deg, …)"
    },
    "primary-end": {
      "$type": "color",
      "$value": "#5B96FE",
      "$description": "With primary: Button fill, linear-gradient(20deg, …)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#2D1DA5"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "glow": {
      "$type": "color",
      "$value": "#0162FF",
      "$description": "Button halo: 0 7px 80px -12px"
    },
    "secondary": {
      "$type": "color",
      "$value": "#110FDF",
      "$description": "Active pricing tab, testimonial band (--blue)"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "canvas": {
      "$type": "color",
      "$value": "#00031C",
      "$description": "Page background (--second-color)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#070B2C",
      "$description": "Work cards, raised navy panels"
    },
    "surface-2": {

/* Autona 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-body, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #2D1DA5;
  --color-primary-end: #5B96FE;
  --color-primary-hover: #2D1DA5;
  --color-on-primary: #FFFFFF;
  --color-glow: #0162FF;
  --color-secondary: #110FDF;
  --color-on-secondary: #FFFFFF;
  --color-canvas: #00031C;
  --color-surface-1: #070B2C;
  --color-surface-2: #FFFFFF12;
  --color-surface-3: #FFFFFF1F;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFFB3;
  --color-ink-subtle: #FFFFFF99;
  --color-line: #FFFFFF2E;
  --color-line-soft: #FFFFFF26;
  --color-field-border: #FFFFFF29;
  --color-chip: #FFFFFF4D;
  --color-on-media: #FFFFFF;
  --color-inverse-canvas: #FFFFFF;
  --color-inverse-ink: #222222;

  /* Fonts */
  --font-sans: "Geist", sans-serif;
  --font-geist: "Geist", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 120px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: -0.4px;
  --text-display-hero--font-weight: 400;
  --text-display-section: 60px;
  --text-display-section--line-height: 1.0;
  --text-display-section--letter-spacing: -0.4px;
  --text-display-section--font-weight: 400;
  --text-display-metric: 59px;
  --text-display-metric--line-height: 1.0;
  --text-display-metric--letter-spacing: -0.4px;
  --text-display-metric--font-weight: 400;
  --text-headline-price: 48px;

/* Autona 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: #2D1DA5; /* Button fill, linear-gradient(20deg, …) */
  --color-primary-end: #5B96FE; /* With primary: Button fill, linear-gradient(20deg, …) */
  --color-primary-hover: #2D1DA5;
  --color-on-primary: #FFFFFF;
  --color-glow: #0162FF; /* Button halo: 0 7px 80px -12px */
  --color-secondary: #110FDF; /* Active pricing tab, testimonial band (--blue) */
  --color-on-secondary: #FFFFFF;
  --color-canvas: #00031C; /* Page background (--second-color) */
  --color-surface-1: #070B2C; /* Work cards, raised navy panels */
  --color-surface-2: #FFFFFF12; /* Eyebrow pills, dropdown and tab hover */
  --color-surface-3: #FFFFFF1F; /* The 1px gradient border shell around pricing cards */
  --color-ink: #FFFFFF; /* Headlines, nav active link, button text (--first-color) */
  --color-ink-muted: #FFFFFFB3; /* Paragraphs (p { opacity: .7 }), nav links at rest */
  --color-ink-subtle: #FFFFFF99; /* Plan names (CREATOR), footer links, category titles */
  --color-line: #FFFFFF2E; /* Testimonial card borders */
  --color-line-soft: #FFFFFF26; /* Tab menu border */
  --color-field-border: #FFFFFF29; /* Form input border */
  --color-chip: #FFFFFF4D; /* Most Popular badge */
  --color-on-media: #FFFFFF;
  --color-inverse-canvas: #FFFFFF; /* The light nav dropdown panel */
  --color-inverse-ink: #222222; /* Text on inverse-canvas */

  /* Fonts */
  --font-geist: "Geist", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 120px;
  --text-display-hero-font: var(--font-geist);
  --text-display-hero-weight: 400;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: -0.4px;
  --text-display-section: 60px;
  --text-display-section-font: var(--font-geist);
  --text-display-section-weight: 400;
  --text-display-section-line-height: 1.0;
  --text-display-section-tracking: -0.4px;
  --text-display-metric: 59px;
  --text-display-metric-font: var(--font-geist);
  --text-display-metric-weight: 400;
  --text-display-metric-line-height: 1.0;
  --text-display-metric-tracking: -0.4px;

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

SaaS 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

Geist · display-hero

Geist · headline-price

Geist · title-md

Geist · body-lg

Geist · nav

Geist · label

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Autona style

More design systems like this

Tessel

Boxkit

Fortis

Munio

Bring any of them to your AI tool