Genus Design System

Get DESIGN.md Download View template Works with

Genus is a stylish, editorial agency site with a fashion-magazine edge. White content panels with big 30px rounded corners float on a soft vertical gradient that runs from green (#59C173) through lavender (#A17FE0) to violet (#5D26C1), so a strip of colour frames every section. Inside the panels everything is black and white: uppercase General Sans set against Melodrama, a tall high-contrast serif, often alternating line by line in the same headline.

The published preview opens on a presentation page (Meet Genus, What is included in Genus template, Pages Overview). The template's own home is at /pages/home. This file describes the template's design as both show it.

Four signatures make it recognisable:

Floating panels on a gradient. Every section is a white panel, 30px radius, 20px in from the viewport edge and 20px apart, with the green-to-violet gradient showing between them.
Sans and serif in one headline. Page-hero headlines alternate a bold uppercase sans line with a thin, high-contrast Melodrama line: DIGITAL / BUSINESS / BASED IN / NEW YORK, ABOUT / GENUS, OUR / PRICES, and Meet Genus with Genus in the serif.
Fixed blend-mode controls. A calligraphic g monogram fixed 60px from the top-left, and an outlined MENU pill fixed top-right, both in mix-blend-mode: difference, so they flip between black and white over whatever is behind them.
Rotating text badge. A circle of small uppercase text (WEBFLOW TEMPLATE · MASTERTHEMES ·) with a dot in the middle, centred at the top of the page.

Colors

Surfaces

canvas#FFFFFF

Content panels (.section, white with a 30px radius) and the body

surface-1#FAFAF7

The off-white style card in the "included" row

inverse-canvas#000000

Menu overlay, footer panel, share button, logo strip, team cards

field#FFFFFF

Ink

on-primary#000000

Text on primary

on-primary-hover#FFFFFF

Text on primary-hover

ink#000000

All text, borders, icons

ink-muted#000000

Body text is full ink: paragraphs are uppercase black at weight 600

ink-input#333333

Text typed into inputs

inverse-ink#FFFFFF

Text on inverse-canvas

inverse-ink-muted#FFFFFF · 70%

Secondary text and link hover on black

on-media#FFFFFF

Action

primary#FFFFFF

Genus has no filled buttons: the main button is a transparent outlined pill on white

primary-hover#000000

The pill fills black with white text on hover

accent#59C173

Top of the backdrop gradient, frame borders on page previews (--medium-sea-green)

secondary#A17FE0

Middle of the gradient; preview frames (--medium-purple)

accent-deep#5D26C1

Bottom of the gradient (--663399)

Lines & effects

line#000000

2px borders on buttons, inputs and the textarea

Typography

General Sans · display-hero

The quick brown fox jumps

Meet in Meet Genus; sans lines of page heroes (BUSINESS, NEW YORK), uppercase. 72px · 600 · 1

Melodrama · headline-serif

The quick brown fox jumps

h1 base. 38px · 600 · 1.16

General Sans · title-lg

The quick brown fox jumps

h3 base. 24px · 600 · 1.25

General Sans · label

The quick brown fox jumps

Outlined pill buttons (Buy Genys, Button Text). 17px · 600 · 1.2

General Sans · body-list

The quick brown fox jumps

List items. 17px · 500 · 1.3

General Sans · eyebrow

The quick brown fox jumps

Preview captions (HOME, MENU OVERVIEW, WORK PAGE). 16px · 600 · 1.1 · 1px

Spacing & shape

Purpose	Value
Container	max 1200px, centred (1500px from 1920px up); 1100px (.medium-container) for the footer
Breakpoints	991px, 767px and 479px (max-width), plus min-width steps at 768px, 1280px, 1440px and 1920px

Spacing scale

Token	Value	Preview
`hair`	2px
`xs`	10px
`sm`	15px
`md`	20px
`lg`	30px
`xl`	40px
`2xl`	67px

Layout spacing

Token	Value	Preview
`frame-gap`	20px
`column-gap`	30px
`fixed-inset`	60px
`section-side`	70px
`section`	80px
`hero-top`	150px

Border radius

xs4px

sm10px

md15px

lg20px

xl30px

pill30px

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

Scroll-in reveal	opacity 0 → 1 and y 30px → 0, 500ms outExpo
Scroll-linked	Scroll-linked scenes: the badge rotation and image drift
Mouse parallax	Elements follow the cursor by ±5px on x and y, 500ms
Hover pop	scale 0 → 1 (and back), 300ms ease, for small icons and cursor dots
Image settle	scale 1.3 → 1, 500ms
Menu open	Overlay display toggle, opacity 300ms ease, links slide x → 0vw / y → 0% over 500ms
Link underline	Width, 300ms ease
Button hover	Fill swap, all .3s; MENU pill 200ms

Do’s and don’ts

Put every section in a white #FFFFFF panel with a 30px radius, 20px in from the edge, over the #59C173 → #A17FE0 → #5D26C1 gradient.
Alternate bold uppercase General Sans lines with thin Melodrama lines in hero headlines.
Keep text and controls inside panels black and white, with body text uppercase, weight 600, in #000000.
Use the outlined pill (2px black border, 30px radius, 44px tall) that fills black on hover; it is the only button style.
Fix the g monogram and the MENU pill in the top corners with mix-blend-mode: difference.
Add the rotating circular text badge near the top of each page.
Fill buttons with colour or use gradient colour for text, buttons or panel fills; inside a panel it only frames previews.
Use Cormorant Garamond or a third typeface; only General Sans and Melodrama.
Set Melodrama below about 38px; it is a display serif with hairline strokes.
Square off panels or use a radius other than 30px for sections and 20px for the footer and menu pill.
Add drop shadows to panels or cards; the only shadow is under floating screenshots.
Write long paragraphs; uppercase copy stays at 2–4 short lines.

Example prompt

Any page in the Genus style

Prompt

Build your page in the Genus agency style. The page background is a vertical gradient from #59C173 through #A17FE0 (30–70%) to #5D26C1. Every section is a white panel with a 30px radius, 20px in from the viewport edges and 20px apart, padding 80px 5%, content in a 1200px container. Inside panels keep text and controls black and white; use the gradient only as frames around screenshots. Headlines stack one or two words per line, alternating General Sans 600 uppercase lines with Melodrama 600 (a tall high-contrast serif) lines, about 72px with line height 1.0. Paragraphs are General Sans 600, uppercase, about 16px (1.1vw), line height 1.3, black, 2–4 lines. Section labels are 15px uppercase weight 600. Buttons are transparent pills with a 2px black border (30px radius, 44px tall, padding 10px 30px, 17px weight 600) that fill black with white text on hover over 300ms. Fix a calligraphic "g" monogram 60px from the top-left and an outlined "MENU" pill top-right, both mix-blend-mode difference; the menu opens a full-screen black overlay with one row of uppercase white links at 5vw. Add a rotating ring of small uppercase text near the top. Inputs are 52px outlined pills. Motion: fade up 30px over 500ms outExpo.

# Genus Design System

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

## Overview

Genus is a stylish, editorial agency site with a
fashion-magazine edge. White content panels with big
30px rounded corners float on a soft vertical gradient
that runs from green (#59C173) through lavender
(#A17FE0) to violet (#5D26C1), so a strip of colour

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Content panels (.sectio… |
| surface-1    | #FAFAF7     | The off-white style car… |
| inverse-can… | #000000     | Menu overlay, footer pa… |
| field        | #FFFFFF     |                          |
| on-primary   | #000000     | Text on primary          |
| on-primary-… | #FFFFFF     | Text on primary-hover    |
| ink          | #000000     | All text, borders, icons |
| ink-muted    | #000000     | Body text is full ink: … |
| ink-input    | #333333     | Text typed into inputs   |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| inverse-ink… | #FFFFFF 70% | Secondary text and link… |
| on-media     | #FFFFFF     |                          |
| primary      | #FFFFFF     | Genus has no filled but… |
| primary-hov… | #000000     | The pill fills black wi… |

## Typography

- display-hero: General Sans 72px / 600
- display-hero-serif: Melodrama 72px / 600
- display-menu: General Sans 72px / 600
- headline-serif: Melodrama 38px / 600

{
  "$description": "Genus design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Genus has no filled buttons: the main button is a transparent outlined pill on white"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#000000",
      "$description": "The pill fills black with white text on hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "on-primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary-hover"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Content panels (.section, white with a 30px radius) and the body"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FAFAF7",
      "$description": "The off-white style card in the \"included\" row"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "All text, borders, icons"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Body text is full ink: paragraphs are uppercase black at weight 600"
    },
    "ink-input": {
      "$type": "color",
      "$value": "#333333",

/* Genus 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-title-lg, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #FFFFFF;
  --color-primary-hover: #000000;
  --color-on-primary: #000000;
  --color-on-primary-hover: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #FAFAF7;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-ink-input: #333333;
  --color-line: #000000;
  --color-accent: #59C173;
  --color-secondary: #A17FE0;
  --color-accent-deep: #5D26C1;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #FFFFFFB3;
  --color-field: #FFFFFF;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "General Sans", "Inter", sans-serif;
  --font-general-sans: "General Sans", "Inter", sans-serif;
  --font-melodrama: "Melodrama", "Playfair Display", serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 72px;
  --text-display-hero--line-height: 1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;
  --text-display-hero-serif: 72px;
  --text-display-hero-serif--line-height: 1;
  --text-display-hero-serif--letter-spacing: 0px;
  --text-display-hero-serif--font-weight: 600;
  --text-display-menu: 72px;
  --text-display-menu--line-height: 1.53;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 600;
  --text-headline-serif: 38px;
  --text-headline-serif--line-height: 1.16;
  --text-headline-serif--letter-spacing: 0px;

/* Genus 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: #FFFFFF; /* Genus has no filled buttons: the main button is a transparent outlined pill on white */
  --color-primary-hover: #000000; /* The pill fills black with white text on hover */
  --color-on-primary: #000000; /* Text on primary */
  --color-on-primary-hover: #FFFFFF; /* Text on primary-hover */
  --color-canvas: #FFFFFF; /* Content panels (.section, white with a 30px radius) and the body */
  --color-surface-1: #FAFAF7; /* The off-white style card in the "included" row */
  --color-ink: #000000; /* All text, borders, icons */
  --color-ink-muted: #000000; /* Body text is full ink: paragraphs are uppercase black at weight 600 */
  --color-ink-input: #333333; /* Text typed into inputs */
  --color-line: #000000; /* 2px borders on buttons, inputs and the textarea */
  --color-accent: #59C173; /* Top of the backdrop gradient, frame borders on page previews (--medium-sea-green) */
  --color-secondary: #A17FE0; /* Middle of the gradient; preview frames (--medium-purple) */
  --color-accent-deep: #5D26C1; /* Bottom of the gradient (--663399) */
  --color-inverse-canvas: #000000; /* Menu overlay, footer panel, share button, logo strip, team cards */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-ink-muted: #FFFFFFB3; /* Secondary text and link hover on black */
  --color-field: #FFFFFF;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-general-sans: "General Sans", "Inter", sans-serif;
  --font-melodrama: "Melodrama", "Playfair Display", serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 72px;
  --text-display-hero-font: var(--font-general-sans);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 1;
  --text-display-hero-tracking: 0px;
  --text-display-hero-serif: 72px;
  --text-display-hero-serif-font: var(--font-melodrama);
  --text-display-hero-serif-weight: 600;
  --text-display-hero-serif-line-height: 1;
  --text-display-hero-serif-tracking: 0px;
  --text-display-menu: 72px;
  --text-display-menu-font: var(--font-general-sans);
  --text-display-menu-weight: 600;
  --text-display-menu-line-height: 1.53;
  --text-display-menu-tracking: 0px;
  --text-headline-serif: 38px;
  --text-headline-serif-font: var(--font-melodrama);

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

Melodrama · headline-serif

General Sans · title-lg

General Sans · label

General Sans · body-list

General Sans · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Genus style

More design systems like this

Twin Studio

Agencium

AGNCY

AgencZ

Bring any of them to your AI tool