Belem Design System

Get DESIGN.md Download View template Works with

Belem is a loud, bright agency site. It opens on a full-screen orange-to-violet gradient with a centred white statement, then a white sheet with an 80px rounded top slides up over the sticky hero and everything after it is clean white with black type, soft lilac-white cards and glossy pastel 3D objects (glass cubes, knots, lenses). Type is a pairing of a wide geometric display face, Unbounded, set uppercase, and the compact grotesk Inter Tight for sentences.

Four signatures make it recognisable:

The sticky gradient hero and the sliding sheet. The hero is position: sticky at min-height: 100svh with a full-bleed orange (#FE5A1D) to violet (#6F00FF) gradient image. The first section has border-radius: 80px 80px 0 0 and scrolls up over it like a sheet of paper.
Outline pill navigation. Five uppercase Unbounded links, each its own 2px-outlined pill (50px radius, 41px tall), top right. They are white over the hero and black over the white page.
Two-tone statements. Big Inter Tight 600 sentences start in full ink and finish in a softer tone: grey (black at 50%), pastel pink #DFA5A4, lavender #A8AEDA, or white at 50% on gradients. We worry about the details so / you don't have to.
Everything is uppercase except sentences. body itself is text-transform: uppercase in Unbounded; only <p> and the Inter Tight statements switch back to sentence case.

Belem is a light design with gradient accents.

Colors

Surfaces

canvas#FFFFFF

Page background (--floral-white, which is white despite the name)

surface-1#F7F7FC

Service cards and project image wells; a faint lilac white

field#FFFFFF

Inputs on the gradient contact band

field-placeholder#686868

Placeholder text on field

Ink

on-primary#FFFFFF

Text on primary

on-secondary#000000

Text on secondary

ink#000000

Headlines, nav, tags, metrics (--light-blue, which is black despite the name)

ink-muted#000000 · 75%

Paragraphs

ink-subtle#000000 · 50%

The grey tail of a statement (opacity 0.5, renders about #808080; the CSS class .gray-text-2, #2C2C2C at 50%, is not measured on the page)

on-media#FFFFFF

Text on the gradient; the muted one is the statement tail

on-media-muted#FFFFFF · 50%

Muted text on media

Action

primary#000000

The filled pill button on white (about belem, Contact us)

primary-hover#000000

secondary#FFFFFF

The same pill inverted, on the gradient hero (Get in touch)

accent#DFA5A4

Dusty pink: statement tails, metric labels (WORLDWIDE CLIENTS), icon circles

accent-lavender#A8AEDA

Lavender: statement tails and icon circles

accent-cyan#A7DCE1

Further icon-circle and tag backgrounds

accent-mint#A8DAB4

Further icon-circle and tag backgrounds

Lines & effects

line#000000

2px outlines on pills, tags and the underline link

gradient-orange#FE5A1D

The radial gradient (circle farthest-side at 0 0) of the hero, the contact band and the lightbox link

gradient-violet#6F00FF

The radial gradient (circle farthest-side at 0 0) of the hero, the contact band and the lightbox link

Typography

Inter Tight · display-metric

The quick brown fox jumps

>601, +1,870 (.title-4, 10vw). 144px · 600 · 1.0

Inter Tight · headline-hero

The quick brown fox jumps

The centred hero statement. 54px · 600 · 1.4

Inter Tight · title-card

The quick brown fox jumps

Service card copy, also two-tone. 25px · 600 · 1.4

Inter Tight · body

The quick brown fox jumps

Paragraphs at 75% opacity; 16px at ≤479. 17px · 500 · 1.3

Unbounded · label-button

The quick brown fox jumps

Filled pill buttons. 15px · 600 · 1.33

Unbounded · eyebrow

The quick brown fox jumps

WHO WE ARE. 14px · 600 · 1.0

Spacing & shape

Purpose	Value
Container	.container max 1200px, centred
Section rhythm	100px top and bottom, 80px at ≤991 and 50px at ≤767 and ≤479 (.section; the 5% sides stay)
Breakpoints	991px, 767px and 479px (the most rules), plus a 1440px+ step

Spacing scale

Token	Value	Preview
`xs`	8px
`sm`	15px
`md`	20px
`lg`	30px
`xl`	40px
`2xl`	50px

Layout spacing

Token	Value	Preview
`nav-x`	25px
`nav-y`	30px
`gutter`	72px
`section`	100px

Border radius

card30px

button40px

pill50px

sheet80px

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

Fade-up on scroll	opacity 0 → 1 and y 50px → 0, 500ms
Slide-in from the sides	x −30px or x 30px → 0, 500ms, paired left and right columns
Heading wipe	A black .heading-overlay block starts at translateX(−100%), crosses the heading and exits, revealing the text
Scale-in	scale 0 → 1, 500ms ease-out-quint for icon circles
Button text roll	Out to y −110% (500ms ease-out), in from y 100% → 0% (500ms ease-in); nav pills do the same in 300ms ease
Press	scale 1 → 0.95, 300ms ease-out-sine, and back
Hover fills	Background colour and filter, 300ms ease; nav pill transition 0.2s; blog title 0.3s
Marquee	.text-rotator moves sideways tied to page scroll
Hero parallax	Mouse-move on the hero shifts its content slightly

Do’s and don’ts

Open with the sticky orange-to-violet gradient hero and slide the first white section over it with an 80px top radius.
Set nav links as separate 2px outline pills (50px radius, 41px tall) in Unbounded 13px / 600 / 1px uppercase.
Write statements in Inter Tight 600 at 33px (54px in the hero) with a two-tone tail: black at 50%, pink #DFA5A4 or lavender #A8AEDA.
Use the black pill (#000000, white text, 40px radius, 60px tall) on white and the white pill on the gradient.
Put cards on #F7F7FC with a 30px radius and let a 3D render bleed off the card edge.
Keep paragraphs Inter Tight 17px / 500 / 1.3 at 75% black.
Add shadows, blur or hairline dividers. Outlines are 2px and solid.
Use the pastels (#DFA5A4, #A8AEDA, #A7DCE1, #A8DAB4) for body text or anything under 25px, apart from the bracketed metric labels.
Use ink-subtle (black at 50%) below 25px; it is a statement tail, not meta text.
Set Unbounded in sentence case or Inter Tight in uppercase headlines.
Spread the gradient beyond the hero and the contact band.
Copy the input's white text colour from the shipped CSS; typed text must be ink.

Example prompt

Any page in the Belem style

Prompt

Build your page in the Belem style. White #FFFFFF page, black #000000 text. Hero: sticky, full viewport, a radial gradient from #FE5A1D (top left) to #6F00FF, a centred Inter Tight 54px / 600 / 1.4 white sentence whose second half is white at 50%, and a white pill button (Unbounded 15px / 600 uppercase, 60px tall, padding 20px 46px, radius 40px). The next section slides over the hero with an 80px top radius. Nav: fixed and transparent, the wordmark left, links right as separate 2px outline pills (radius 50px, 41px tall, Unbounded 13px / 600, 1px tracking, uppercase). Section titles: Unbounded 72px / 600 uppercase with a thin ↓ arrow on the right. Section intros: Inter Tight 33px / 600 / 1.4 sentences, first half black, tail in black at 50% or pastel #DFA5A4 / #A8AEDA. Cards: #F7F7FC, radius 30px, padding about 40px, glossy pastel 3D renders bleeding off the edge. Paragraphs: Inter Tight 17px / 500 / 1.3 at 75% opacity. Container 1200px, sections 100px 5%. Fade-up on scroll (y 50px, 500ms); button labels roll up on hover in 500ms. No shadows.

# Belem Design System

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

## Overview

Belem is a loud, bright agency site. It opens on a
full-screen orange-to-violet gradient with a centred
white statement, then a white sheet with an 80px rounded
top slides up over the sticky hero and everything after
it is clean white with black type, soft lilac-white

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background (--flor… |
| surface-1    | #F7F7FC     | Service cards and proje… |
| field        | #FFFFFF     | Inputs on the gradient … |
| field-place… | #686868     | Placeholder text on fie… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #000000     | Text on secondary        |
| ink          | #000000     | Headlines, nav, tags, m… |
| ink-muted    | #000000 75% | Paragraphs               |
| ink-subtle   | #000000 50% | The grey tail of a stat… |
| on-media     | #FFFFFF     | Text on the gradient; t… |
| on-media-mu… | #FFFFFF 50% | Muted text on media      |
| primary      | #000000     | The filled pill button … |
| primary-hov… | #000000     |                          |
| secondary    | #FFFFFF     | The same pill inverted,… |

## Typography

- display-metric: Inter Tight 144px / 600
- display-marquee: Unbounded 120px / 500
- display-section: Unbounded 72px / 600
- headline-hero: Inter Tight 54px / 600

{
  "$description": "Belem 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": "The filled pill button on white (about belem, Contact us)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#000000"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The same pill inverted, on the gradient hero (Get in touch)"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background (--floral-white, which is white despite the name)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F7F7FC",
      "$description": "Service cards and project image wells; a faint lilac white"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, nav, tags, metrics (--light-blue, which is black despite the name)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000BF",
      "$description": "Paragraphs"

/* Belem 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-card, p-lg */

@theme {
  /* Colors */
  --color-primary: #000000;
  --color-primary-hover: #000000;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFFFFF;
  --color-on-secondary: #000000;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F7F7FC;
  --color-ink: #000000;
  --color-ink-muted: #000000BF;
  --color-ink-subtle: #00000080;
  --color-line: #000000;
  --color-on-media: #FFFFFF;
  --color-on-media-muted: #FFFFFF80;
  --color-accent: #DFA5A4;
  --color-accent-lavender: #A8AEDA;
  --color-accent-cyan: #A7DCE1;
  --color-accent-mint: #A8DAB4;
  --color-gradient-orange: #FE5A1D;
  --color-gradient-violet: #6F00FF;
  --color-field: #FFFFFF;
  --color-field-placeholder: #686868;

  /* Fonts */
  --font-sans: "Unbounded", sans-serif;
  --font-unbounded: "Unbounded", sans-serif;
  --font-inter-tight: "Inter Tight", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-metric: 144px;
  --text-display-metric--line-height: 1.0;
  --text-display-metric--letter-spacing: 0px;
  --text-display-metric--font-weight: 600;
  --text-display-marquee: 120px;
  --text-display-marquee--line-height: 1.0;
  --text-display-marquee--letter-spacing: 0px;
  --text-display-marquee--font-weight: 500;
  --text-display-section: 72px;
  --text-display-section--line-height: 1.2;
  --text-display-section--letter-spacing: 0px;
  --text-display-section--font-weight: 600;

/* Belem 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; /* The filled pill button on white (about belem, Contact us) */
  --color-primary-hover: #000000;
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #FFFFFF; /* The same pill inverted, on the gradient hero (Get in touch) */
  --color-on-secondary: #000000; /* Text on secondary */
  --color-canvas: #FFFFFF; /* Page background (--floral-white, which is white despite the name) */
  --color-surface-1: #F7F7FC; /* Service cards and project image wells; a faint lilac white */
  --color-ink: #000000; /* Headlines, nav, tags, metrics (--light-blue, which is black despite the name) */
  --color-ink-muted: #000000BF; /* Paragraphs */
  --color-ink-subtle: #00000080; /* The grey tail of a statement (opacity 0.5, renders about #808080; the CSS class .gray-text-2, #2C2C2C at 50%, is not measured on the page) */
  --color-line: #000000; /* 2px outlines on pills, tags and the underline link */
  --color-on-media: #FFFFFF; /* Text on the gradient; the muted one is the statement tail */
  --color-on-media-muted: #FFFFFF80; /* Muted text on media */
  --color-accent: #DFA5A4; /* Dusty pink: statement tails, metric labels (WORLDWIDE CLIENTS), icon circles */
  --color-accent-lavender: #A8AEDA; /* Lavender: statement tails and icon circles */
  --color-accent-cyan: #A7DCE1; /* Further icon-circle and tag backgrounds */
  --color-accent-mint: #A8DAB4; /* Further icon-circle and tag backgrounds */
  --color-gradient-orange: #FE5A1D; /* The radial gradient (circle farthest-side at 0 0) of the hero, the contact band and the lightbox link */
  --color-gradient-violet: #6F00FF; /* The radial gradient (circle farthest-side at 0 0) of the hero, the contact band and the lightbox link */
  --color-field: #FFFFFF; /* Inputs on the gradient contact band */
  --color-field-placeholder: #686868; /* Placeholder text on field */

  /* Fonts */
  --font-unbounded: "Unbounded", sans-serif;
  --font-inter-tight: "Inter Tight", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-metric: 144px;
  --text-display-metric-font: var(--font-inter-tight);
  --text-display-metric-weight: 600;
  --text-display-metric-line-height: 1.0;
  --text-display-metric-tracking: 0px;
  --text-display-marquee: 120px;
  --text-display-marquee-font: var(--font-unbounded);
  --text-display-marquee-weight: 500;
  --text-display-marquee-line-height: 1.0;
  --text-display-marquee-tracking: 0px;
  --text-display-section: 72px;
  --text-display-section-font: var(--font-unbounded);
  --text-display-section-weight: 600;
  --text-display-section-line-height: 1.2;

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

Inter Tight · display-metric

Inter Tight · headline-hero

Inter Tight · title-card

Inter Tight · body

Unbounded · label-button

Unbounded · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Belem style

More design systems like this

Twin Studio

Agencium

AGNCY

AgencZ

Bring any of them to your AI tool