Katix Design System

Get DESIGN.md Download View template Works with

Katix is a warm, polished creative-agency site. It opens on a soft radial gradient that runs from terracotta and sand in the bottom-left to mauve and slate on the right, with a huge centred white headline. Below the hero the page turns clean and white: black General Sans titles, grey leads, terracotta accents and tidy grids of square-cornered photos. It ends on a near-black navy contact band and footer.

Four signatures make it recognisable:

The sunset gradient. radial-gradient(circle at 0% 100%, #D26E5B, #E6B999 29%, #B2A3AC 63%, #72747F) fills the hero and returns as the Fun Facts band. It is the template's colour story.
Spaced uppercase labels in terracotta. Eyebrows are 13px weight 600 uppercase with 3px tracking in #D26E5B (WHAT WE OFFER, MEET THE TEAM); buttons and nav use 12–13px uppercase with 1px tracking.
Square terracotta buttons. #D26E5B with a 2px radius and white 12px uppercase labels, paired with a white button with terracotta text on the gradient.
Big grey leads beside black titles. Section headers put a 40px black title next to a 26px weight-400 grey sentence (We work with our clients to deliver creative solutions that drive engagement.).

Colors

Surfaces

canvas#FFFFFF

Page background

surface-1#B2A3AC

The mauve band behind the three service photo cards (.section.gray); also the gradient's 63% stop

inverse-canvas#12141D

Scrolled nav, contact band, side menu, footer, back-to-top square

field#20222E

Subscribe input on dark, with a 1px white-6% border

field-line#FFFFFF · 6%

Ink

on-primary#FFFFFF

Text on primary

on-secondary#D26E5B

Text on secondary

ink#000000

Headlines, service and project titles

ink-muted#535353

Paragraphs (the p default, 18px)

ink-lead#7C7C7C

Large 26px section leads and grey arrow links (VIEW PORTFOLIO >)

ink-subtle#9C9C9C

Project tags (Web Design, User Experiences), categories

on-media#FFFFFF

inverse-ink#FFFFFF

Text on inverse-canvas

inverse-ink-muted#FFFFFF · 70%

Paragraphs on dark (.paragraph-white); dropdown links use 65%

Action

primary#D26E5B

Filled buttons, eyebrows, Instagram icon chips, line icons

primary-hover#BB533F

Filled button hover

secondary#FFFFFF

The white button on the hero (VIEW ON WEBFLOW)

Lines & effects

gradient-sand#E6B999

The 29% and 100% stops of the hero gradient

gradient-slate#72747F

The 29% and 100% stops of the hero gradient

scrim#20222E · 25%

Overlay on service photo cards under white text

line#FFFFFF · 24%

The 1px rule under the transparent nav on the hero

line-strong#494B58

Bottom rule of the underline inputs in the contact form

Typography

General Sans · display-hero

The quick brown fox jumps

Hero H1 We help our clients to build customize tools, centred, 3 lines. 90px · 600 · 0.82

General Sans · headline-metric

The quick brown fox jumps

Fun-facts numbers 3, 100, 98%, 1000+. 42px · 500 · 1.05

General Sans · body-xl

The quick brown fox jumps

Hero sub-line (white) and section leads (grey). 26px · 400 · 1.23

General Sans · title-lg

The quick brown fox jumps

Journal card titles (.blog-title). 22px · 600 · 1.36

General Sans · label

The quick brown fox jumps

Footer links. 16px · 500 · 1.25

General Sans · caption

The quick brown fox jumps

Dropdown links. 15px · 500 · 1.33

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Section rhythm	100px top and bottom (.section)
Section header patterns	centred (eyebrow + title, as in Founders) or a three-part row (eyebrow and title left, grey lead centre, button right, as in Our Portfolio)
Breakpoints	991px, 767px and 479px, plus a min-width: 768px set

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	16px
`md`	30px
`lg`	50px
`xl`	80px
`2xl`	100px

Layout spacing

Token	Value	Preview
`section-side`	72px
`section`	100px
`hero-top`	150px
`hero-bottom`	180px
`section-top-tall`	240px

Border radius

sm2px

chip3px

Surfaces

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

Level 1canvas

Level 2surface-1

Level 3field

Motion

Scroll reveal (most blocks)	opacity 0 → 1 over 1000ms outQuart, with y -30px → 0 over 1000ms outQuart or 1500ms outQuint
Quick reveal	opacity 0 → 1 500ms outQuint with y 30px → 0
Nav underline	nav-line width grows 0 → 100%, 500ms ease, and shrinks on mouse out
Hamburger	Lines rotate, 500ms inOutBack
Side panel	translateX(100%) → 0
Nav on scroll	Sticky dark bar shows on scroll up, hides on scroll down; background change 500ms
Button hover	transition: all 0.2s, #D26E5B → #BB533F
Footer and dropdown links	Colour fade, 300ms

Do’s and don’ts

Use the sunset radial gradient (#D26E5B → #E6B999 29% → #B2A3AC 63% → #72747F, anchored bottom-left) for the hero and one more full-width band.
Use #D26E5B for filled buttons and for eyebrows on white, with #BB533F on hover; arrow links stay grey #7C7C7C and the hero eyebrow is white.
Set eyebrows as 13px weight 600 uppercase with 3px tracking, and buttons as 12px uppercase with 1px tracking.
Keep headlines black #000000 at weight 600, and pair them with a 26px weight-400 grey lead.
Keep images and cards at 0px radius and buttons at 2px.
End the page on #12141D with white text and underline-only inputs.
Add shadows, glass or rounded cards.
Put the gradient inside cards or buttons.
Use Inter or the Butler serif; General Sans is the only face.
Use the unused variables (#3CCF91, #FF715B, #68D4FF) as extra accents.
Use ink-subtle #9C9C9C for text under 17px; it is about 2.7:1 on white, so keep it for project tags and meta only.
Put #535353 paragraphs on the mauve #B2A3AC band; text there sits on photos and is white.
Set running text in terracotta, or white on terracotta: #D26E5B with white is about 3.4:1, so keep it to bold uppercase buttons, eyebrows and chips, and keep #7C7C7C for the 26px leads and uppercase links only.

Example prompt

Any page in the Katix style

Prompt

Build your page in the Katix style. Use General Sans only. White page, container 1200px, sections 100px top and bottom with 5% side padding. Hero: full-width, min 90vh, background radial-gradient(circle at 0% 100%, #D26E5B, #E6B999 29%, #B2A3AC 63%, #72747F), centred white H1 at 90px weight 600 line height 0.82, a 26px weight-400 sub-line and two buttons. Eyebrows: 13px weight 600 uppercase, 3px tracking, #D26E5B. Section titles: 40px weight 600, line height 1.0, black. Leads: 26px weight 400 in #7C7C7C. Paragraphs: 18px weight 500 in #535353. Buttons: #D26E5B, white 12px weight 600 uppercase with 1px tracking, 50px tall, padding 15px 23px, 2px radius, hover #BB533F over 200ms. Images have square corners. Close with a #12141D band with white text and inputs that have only a 1px #494B58 underline. Reveal blocks with opacity 0 → 1 and y 30px → 0 over 1000ms.

# Katix Design System

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

## Overview

Katix is a warm, polished creative-agency site. It opens
on a soft radial gradient that runs from terracotta and
sand in the bottom-left to mauve and slate on the right,
with a huge centred white headline. Below the hero the
page turns clean and white: black General Sans titles,

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background          |
| surface-1    | #B2A3AC     | The mauve band behind t… |
| inverse-can… | #12141D     | Scrolled nav, contact b… |
| field        | #20222E     | Subscribe input on dark… |
| field-line   | #FFFFFF 6%  |                          |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #D26E5B     | Text on secondary        |
| ink          | #000000     | Headlines, service and … |
| ink-muted    | #535353     | Paragraphs (the p defau… |
| ink-lead     | #7C7C7C     | Large 26px section lead… |
| ink-subtle   | #9C9C9C     | Project tags (Web Desig… |
| on-media     | #FFFFFF     |                          |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| inverse-ink… | #FFFFFF 70% | Paragraphs on dark (.pa… |

## Typography

- display-hero: General Sans 90px / 600
- headline-metric: General Sans 42px / 500
- headline-lg: General Sans 40px / 600
- headline-sm: General Sans 27px / 500

{
  "$description": "Katix design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#D26E5B",
      "$description": "Filled buttons, eyebrows, Instagram icon chips, line icons"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#BB533F",
      "$description": "Filled button hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The white button on the hero (VIEW ON WEBFLOW)"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#D26E5B",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#B2A3AC",
      "$description": "The mauve band behind the three service photo cards (.section.gray); also the gradient's 63% stop"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, service and project titles"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#535353",

/* Katix 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: #D26E5B;
  --color-primary-hover: #BB533F;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFFFFF;
  --color-on-secondary: #D26E5B;
  --color-canvas: #FFFFFF;
  --color-surface-1: #B2A3AC;
  --color-ink: #000000;
  --color-ink-muted: #535353;
  --color-ink-lead: #7C7C7C;
  --color-ink-subtle: #9C9C9C;
  --color-gradient-sand: #E6B999;
  --color-gradient-slate: #72747F;
  --color-scrim: #20222E40;
  --color-on-media: #FFFFFF;
  --color-line: #FFFFFF3D;
  --color-line-strong: #494B58;
  --color-inverse-canvas: #12141D;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #FFFFFFB3;
  --color-field: #20222E;
  --color-field-line: #FFFFFF0F;

  /* Fonts */
  --font-sans: "General Sans", "Inter", sans-serif;
  --font-general-sans: "General Sans", "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 90px;
  --text-display-hero--line-height: 0.82;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;
  --text-headline-metric: 42px;
  --text-headline-metric--line-height: 1.05;
  --text-headline-metric--letter-spacing: 0px;
  --text-headline-metric--font-weight: 500;
  --text-headline-lg: 40px;
  --text-headline-lg--line-height: 1.0;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 600;

/* Katix 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: #D26E5B; /* Filled buttons, eyebrows, Instagram icon chips, line icons */
  --color-primary-hover: #BB533F; /* Filled button hover */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #FFFFFF; /* The white button on the hero (VIEW ON WEBFLOW) */
  --color-on-secondary: #D26E5B; /* Text on secondary */
  --color-canvas: #FFFFFF; /* Page background */
  --color-surface-1: #B2A3AC; /* The mauve band behind the three service photo cards (.section.gray); also the gradient's 63% stop */
  --color-ink: #000000; /* Headlines, service and project titles */
  --color-ink-muted: #535353; /* Paragraphs (the p default, 18px) */
  --color-ink-lead: #7C7C7C; /* Large 26px section leads and grey arrow links (VIEW PORTFOLIO >) */
  --color-ink-subtle: #9C9C9C; /* Project tags (Web Design, User Experiences), categories */
  --color-gradient-sand: #E6B999; /* The 29% and 100% stops of the hero gradient */
  --color-gradient-slate: #72747F; /* The 29% and 100% stops of the hero gradient */
  --color-scrim: #20222E40; /* Overlay on service photo cards under white text */
  --color-on-media: #FFFFFF;
  --color-line: #FFFFFF3D; /* The 1px rule under the transparent nav on the hero */
  --color-line-strong: #494B58; /* Bottom rule of the underline inputs in the contact form */
  --color-inverse-canvas: #12141D; /* Scrolled nav, contact band, side menu, footer, back-to-top square */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-ink-muted: #FFFFFFB3; /* Paragraphs on dark (.paragraph-white); dropdown links use 65% */
  --color-field: #20222E; /* Subscribe input on dark, with a 1px white-6% border */
  --color-field-line: #FFFFFF0F;

  /* Fonts */
  --font-general-sans: "General Sans", "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 90px;
  --text-display-hero-font: var(--font-general-sans);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 0.82;
  --text-display-hero-tracking: 0px;
  --text-headline-metric: 42px;
  --text-headline-metric-font: var(--font-general-sans);
  --text-headline-metric-weight: 500;
  --text-headline-metric-line-height: 1.05;
  --text-headline-metric-tracking: 0px;
  --text-headline-lg: 40px;
  --text-headline-lg-font: var(--font-general-sans);
  --text-headline-lg-weight: 600;
  --text-headline-lg-line-height: 1.0;

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

General Sans · display-hero

General Sans · headline-metric

General Sans · body-xl

General Sans · title-lg

General Sans · label

General Sans · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Katix style

More design systems like this

Fabrik

Oko

Nord

Fitex

Bring any of them to your AI tool