Tenet Design System

Get DESIGN.md Download View template Works with

Tenet is a clean, bright marketing site for an agency or SaaS product. It reads as calm and expensive: white canvas, black Geist type at medium weight, soft grey cards, and a single burst of colour in the hero, a blurred iridescent orb (pink, yellow, violet, cyan) bleeding in from the top right with a violet-to-blue glow behind the headline. Apart from the photography, everything else is black, white and #F7F7F7.

Four signatures make it recognisable:

The serif swap. Every centred headline mixes sans and serif: most words in Geist 500, one or two words in Prata with a gradient fill that fades from black to 50% black (Turning potential into results., Showcasing our most impactful projects, Discover why users rave about Tenet).
The white eyebrow tag. A small white label with a soft shadow and a 6.4px radius sits above most section titles (5 uses; the testimonial title has none): Welcome to Tenet, Featured Work, From Founder.
The frosted pill nav. Logo left, a translucent grey tray in the centre holding the links (the active one is a solid black chip), and a black Contact button right.
Floating white labels on work images. Project images fill their card and a white strip inset 7px from the edges carries the title and the categories.

Tenet is a light-only design.

Colors

Surfaces

canvas#FFFFFF

Page background and every second section

surface-1#F7F7F7

The gray section bands, service cards, pricing tables, core card (CSS var --gray)

inverse-canvas#000000

Dark photo cards (metric and quote cards) with white text

Ink

on-primary#FFFFFF

Text on primary

ink#000000

Headlines, card titles, labels (CSS var --first-color)

ink-muted#000000 · 80%

Paragraphs: every p has opacity: .8

ink-soft#000000 · 70%

Nav links and dropdown links at rest

ink-subtle#000000 · 60%

Work categories (Strategy, Concept)

on-media#FFFFFF

inverse-ink#FFFFFF

Text on inverse-canvas

Action

primary#000000

Every filled button, the active nav chip, 38px icon squares

primary-hover#000000

accent#110FDF

Radial corner glows only (blue at top-left, violet at bottom-right, fading out by 47%)

accent-2#B300FF

With accent: Radial corner glows only (blue at top-left, violet at bottom-right, fading out by 47%)

Lines & effects

placeholder#000000 · 50%

Form placeholders

line#000000 · 12%

Input borders

line-strong#000000 · 20%

The one solid outline border

divider#AAA9A5

1×30px vertical dividers in the nav and dropdown

glass#000000 · 7%

The nav link tray

glass-light#FFFFFF · 12%

The 1px frame behind pricing tables

Typography

Geist · display-hero

The quick brown fox jumps

Hero h1 Turning potential into results. 70px · 500 · 1.0 · -1px

Geist · headline-cta

The quick brown fox jumps

Closing CTA Refresh your brand and get ready for what's next. 56px · 500 · 1.0 · -1px

Geist · title-lg

The quick brown fox jumps

.second-title (137×): card titles, quotes, metric headlines. 24px · 500 · 1.1

Geist · body-lg

The quick brown fox jumps

Hero and section leads. 18px · 500 · 1.3

Geist · label

The quick brown fox jumps

Buttons (.button-first). 16px · 500 · 1.5 · -0.48px

Geist · caption

The quick brown fox jumps

Work categories, pricing feature rows. 15px · 500 · 1.3

Spacing & shape

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

Spacing scale

Token	Value	Preview
`hair`	5px
`xs`	10px
`sm`	15px
`md`	20px
`lg`	25px
`xl`	30px
`2xl`	75px

Layout spacing

Token	Value	Preview
`tray`	7px
`column-gap`	20px
`section-side`	72px
`nav-height`	90px
`section`	120px

Border radius

sm6.4px

md10px

lg20px

xl25px

xxl30px

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

Button text roll	Two stacked copies of the label; on hover y 0% → −100% and 100% → 0%, 500ms. No colour change.
Scroll-in fade	opacity 0 → 1, 1000ms outQuart, often with y 50px → 0 over 500ms
Testimonial columns	y 0% → −100% over 40000ms, linear, looping
Logo marquee	Horizontal endless scroll of the logo strip
Image hover zoom	scale 1 → 1.1, 500ms
Link underline	width grows, 300ms ease
Dropdown arrow	rotate, 600ms outExpo (open) and 400–600ms inOutQuint
Nav and dropdown links	CSS transition: all .15s (nav) and .3s (dropdown)
Scroll-linked	Page scroll and while scrolling in view move elements up to y −100px while in view

Do’s and don’ts

Put one or two words of every centred title in Prata with the black-to-50% gradient fill, and the rest in Geist 500.
Keep the palette to #FFFFFF, #F7F7F7 and #000000, alternating white and grey bands.
Use 6.4px for every button, card, tag and input.
Set paragraphs at black 80% (ink-muted), meta at 60% (ink-subtle), nav at 70%.
Open most sections with the white eyebrow tag, then the title, then a one-line lead, all centred.
Use the one soft shadow 0 12px 16px -4px #0000000D, 0 4px 6px -2px #1018280A for floating white cards.
Add a coloured button or use blue #110FDF or violet #B300FF for text or fills. They are glows only.
Set whole headlines in Prata, or use Prata under 16px.
Use weights above 600 or below 400; Geist 500 is the default.
Change the button colour on hover. Use the text roll.
Round cards beyond 6.4px or give images their own radius.
Use heavy shadows or borders to separate cards; use the grey/white surface step.

Example prompt

Any page in the Tenet style

Prompt

Build your page in the Tenet style. White #FFFFFF page, alternating with #F7F7F7 bands, 120px vertical section padding and 5% side padding, 1200px container. Type is Geist weight 500: section titles 47px, line height 1.0, −1px tracking, centred on 2 lines, with one or two words swapped into Prata 47px, −2px tracking, filled with linear-gradient(279deg, #00000080, #000000) clipped to the text. Above each title put a white tag (14px 600, padding 5px 10px, 6.4px radius, shadow 0 12px 16px -4px #0000000D, 0 4px 6px -2px #1018280A). Paragraphs are 16px, line height 1.3, black at 80%. Buttons are black with white 16px 500 text, 42px tall, padding 8.8px 20px, 6.4px radius, with a vertical text-roll hover over 500ms. Cards are #F7F7F7 with a 6.4px radius and 25px padding. Fixed 90px nav with a centred translucent tray (#00000012, blur 15px) and the active link as a black chip. Fade sections in over 1000ms.

# Tenet Design System

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

## Overview

Tenet is a clean, bright marketing site for an agency or
SaaS product. It reads as calm and expensive: white
canvas, black Geist type at medium weight, soft grey
cards, and a single burst of colour in the hero, a
blurred iridescent orb (pink, yellow, violet, cyan)

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background and eve… |
| surface-1    | #F7F7F7     | The gray section bands,… |
| inverse-can… | #000000     | Dark photo cards (metri… |
| on-primary   | #FFFFFF     | Text on primary          |
| ink          | #000000     | Headlines, card titles,… |
| ink-muted    | #000000 80% | Paragraphs: every p has… |
| ink-soft     | #000000 70% | Nav links and dropdown … |
| ink-subtle   | #000000 60% | Work categories (Strate… |
| on-media     | #FFFFFF     |                          |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| primary      | #000000     | Every filled button, th… |
| primary-hov… | #000000     |                          |
| accent       | #110FDF     | Radial corner glows onl… |
| accent-2     | #B300FF     | With accent: Radial cor… |

## Typography

- display-hero: Geist 70px / 500
- headline-cta: Geist 56px / 500
- headline-lg: Geist 47px / 500
- headline-serif: Prata 47px / 500

{
  "$description": "Tenet design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Every filled button, the active nav chip, 38px icon squares"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#000000"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background and every second section"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F7F7F7",
      "$description": "The gray section bands, service cards, pricing tables, core card (CSS var --gray)"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, card titles, labels (CSS var --first-color)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000CC",
      "$description": "Paragraphs: every p has opacity: .8"
    },
    "ink-soft": {
      "$type": "color",
      "$value": "#000000B3",
      "$description": "Nav links and dropdown links at rest"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#00000099",
      "$description": "Work categories (Strategy, Concept)"

/* Tenet 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-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #000000;
  --color-primary-hover: #000000;
  --color-on-primary: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F7F7F7;
  --color-ink: #000000;
  --color-ink-muted: #000000CC;
  --color-ink-soft: #000000B3;
  --color-ink-subtle: #00000099;
  --color-placeholder: #00000080;
  --color-line: #0000001F;
  --color-line-strong: #00000033;
  --color-divider: #AAA9A5;
  --color-glass: #00000012;
  --color-glass-light: #FFFFFF1F;
  --color-on-media: #FFFFFF;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;
  --color-accent: #110FDF;
  --color-accent-2: #B300FF;

  /* Fonts */
  --font-sans: "Geist", sans-serif;
  --font-geist: "Geist", sans-serif;
  --font-prata: "Prata", 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-headline-cta: 56px;
  --text-headline-cta--line-height: 1.0;
  --text-headline-cta--letter-spacing: -1px;
  --text-headline-cta--font-weight: 500;
  --text-headline-lg: 47px;
  --text-headline-lg--line-height: 1.0;
  --text-headline-lg--letter-spacing: -1px;
  --text-headline-lg--font-weight: 500;
  --text-headline-serif: 47px;

/* Tenet 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: #000000; /* Every filled button, the active nav chip, 38px icon squares */
  --color-primary-hover: #000000;
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #FFFFFF; /* Page background and every second section */
  --color-surface-1: #F7F7F7; /* The gray section bands, service cards, pricing tables, core card (CSS var --gray) */
  --color-ink: #000000; /* Headlines, card titles, labels (CSS var --first-color) */
  --color-ink-muted: #000000CC; /* Paragraphs: every p has opacity: .8 */
  --color-ink-soft: #000000B3; /* Nav links and dropdown links at rest */
  --color-ink-subtle: #00000099; /* Work categories (Strategy, Concept) */
  --color-placeholder: #00000080; /* Form placeholders */
  --color-line: #0000001F; /* Input borders */
  --color-line-strong: #00000033; /* The one solid outline border */
  --color-divider: #AAA9A5; /* 1×30px vertical dividers in the nav and dropdown */
  --color-glass: #00000012; /* The nav link tray */
  --color-glass-light: #FFFFFF1F; /* The 1px frame behind pricing tables */
  --color-on-media: #FFFFFF;
  --color-inverse-canvas: #000000; /* Dark photo cards (metric and quote cards) with white text */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-accent: #110FDF; /* Radial corner glows only (blue at top-left, violet at bottom-right, fading out by 47%) */
  --color-accent-2: #B300FF; /* With accent: Radial corner glows only (blue at top-left, violet at bottom-right, fading out by 47%) */

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

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 70px;
  --text-display-hero-font: var(--font-geist);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: -1px;
  --text-headline-cta: 56px;
  --text-headline-cta-font: var(--font-geist);
  --text-headline-cta-weight: 500;
  --text-headline-cta-line-height: 1.0;
  --text-headline-cta-tracking: -1px;
  --text-headline-lg: 47px;
  --text-headline-lg-font: var(--font-geist);
  --text-headline-lg-weight: 500;
  --text-headline-lg-line-height: 1.0;
  --text-headline-lg-tracking: -1px;

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

Tech 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-cta

Geist · title-lg

Geist · body-lg

Geist · label

Geist · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Tenet style

More design systems like this

Bronx eC

Bronx

Basalt

Nordlys

Bring any of them to your AI tool