Valtero Design System

Get DESIGN.md Download View template Works with

Valtero website template preview detail 2

Valtero website template preview detail 3

Valtero is a loud, black, all-caps agency site. It feels like a gig poster: a pure #000000 page, a giant warped white wordmark in the hero, then condensed Coolvetica capitals at 120–259px that fill the width, broken up by edge-to-edge project photos. Text blocks are short, centred and set in Inter semibold, so the page reads as huge words and small statements with nothing in between.

Four signatures make it recognisable:

The warped hero wordmark. VALTERO© sits centred at about 840px wide, its letters bent like a fun-house mirror with a soft grey glow behind the middle. It is a Unicorn Studio WebGL scene (unicornStudio is loaded), not live text.
The © everywhere. The brand is Valtero©, project captions end in ©2025, and titles carry it: PRICING ©26. The © is drawn as a tall stadium-shaped outline that matches the condensed caps.
Condensed caps at two extremes. Coolvetica Condensed is either enormous (section titles at 144px, a scrolling service word at 259px; 120px character-split runs also appear) or small uppercase labels at 16–19px with +0.5 to +0.7px tracking. Inter only appears as semibold statements and body text.
Pills and a dot. The only filled control is a white pill (LET'S TALK, VIEW ALL WORKS, GET STARTED). The menu opens from a single 20px white dot top right.

Valtero is a dark-only design.

Colors

Surfaces

canvas#000000

Page background and every content section (video bands are #222222)

surface-1#151515

Sticky process cards; the pricing band measures one step off at #171717

surface-2#222222

Video bands and the full-screen menu behind its photo

surface-3#333333

Small raised chips such as the pricing check boxes

field#444444

Form inputs, which go darker on focus

field-focus#121212

With field: Form inputs, which go darker on focus

Ink

on-primary#000000

Text on primary

on-primary-hover#FFFFFF

ink#FFFFFF

Headlines, labels, statements, links

ink-muted#FFFFFF · 70%

Paragraph text (the CSS sets p { opacity: .7 }; label classes such as .top-text reset it to full white), plan descriptions, What's included:

ink-subtle#FFFFFF · 50%

Placeholders, the /04 in FEATURED WORK /04, idle menu links

on-media#FFFFFF

Action

primary#FFFFFF

The white pill button

primary-hover#2B2B2B

The dark fill that slides up inside the pill on hover

Lines & effects

line#FFFFFF · 10%

Input borders, the 2px base line under big footer links, pricing dividers

line-strong#FFFFFF · 15%

The rule under each sticky service row

line-grid#202020

1px borders of the client-logo grid

glass#171717 · 69%

Testimonial cards

glass-chip#333333 · 55%

The arrow chip on project images

Typography

Coolvetica Condensed · display-marquee · shown in Oswald (fallback)

The quick brown fox jumps

The scrolling service words • WEB DESIGN • SOCIAL MEDIA • MARKETING. 259px · 500 · 0.85 · 1px

Coolvetica Condensed · headline-lg · shown in Oswald (fallback)

The quick brown fox jumps

Inter · title-lg

The quick brown fox jumps

Plan names Starter, Growth, service and about titles. 27px · 600 · 1.3

Inter · body

The quick brown fox jumps

Paragraphs at 70%. 16px · 500 · 1.3 · -0.2px

Inter · caption

The quick brown fox jumps

Dates, data text, inputs, /project. 14px · 500 · 1.3 · -0.2px

Coolvetica Condensed · label · shown in Oswald (fallback)

The quick brown fox jumps

Pill buttons. 19px · 500 · 1.1 · 0.6px

Spacing & shape

Purpose	Value
Container	max 1400px, centred, width: 100%
Section rhythm	.section pads 5% top and bottom (72px at 1440)
Breakpoints	991px, 767px and 479px, plus a 1920px+ step

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	20px
`md`	30px
`lg`	50px
`xl`	60px
`2xl`	100px
`3xl`	120px

Layout spacing

Token	Value	Preview
`grid-gap`	16px
`gutter`	29px
`grid-gap-wide`	50px
`section`	72px
`section-wide`	101px
`section-double`	144px
`section-scroll`	150px

Border radius

xs7px

field10px

card-sm15px

md20px

lg30px

pill960px

full9999px

Surfaces

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

Level 1canvas

Level 2surface-1

Level 3surface-2

Level 4surface-3

Level 5field

Motion

Smooth scroll	Lenis on the whole page
Hero wordmark	Unicorn Studio WebGL distortion
Split text roll	SplitText characters move y 0 → −100%, back.out(1.7), staggered across 6.5s in total
Scroll scenes	ScrollTrigger from top 90% to bottom top, scrub 0.8; a second scene from top bottom to bottom top
Fade and rise in	opacity 0 → 1 and y 20px or 20% → 0, 500ms
Skew-in reveal	skewX 30° → 0 with y → 0% and opacity, 400ms outCubic; a second variant uses skewY −7° → 0, 200ms outSine
Slow fade	Opacity to 1 over 1000ms outQuart
Rotate	500ms, or 600ms outExpo for icons
Button hover	Dark fill translateY 100% → 0, label rolls y → 0%, 300ms ease
Hover dim	Opacity to 0.6, 300ms easeIn; menu links 0.5 → 0.8
Line wipe	Width grows, 300ms ease or 500ms
Input focus	400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
Menu close button	scale 0 → 1 on open

Do’s and don’ts

Keep the page pure #000000 and put text in #FFFFFF; body paragraphs at 70% (#FFFFFFB3).
Set every display line, label and button in Coolvetica Condensed uppercase with +0.5 to +0.7px tracking, statements in Inter 600 and body text in Inter 500.
Use the white pill (#FFFFFF, black text, 44px tall, 50em radius) for actions, with the #2B2B2B slide-up fill on hover.
Run photos edge to edge with square corners, captioned in 64px condensed caps on the image.
Use #151515 to #222222 surfaces and backdrop blur (20–40px) for cards, never borders alone.
Add an accent colour, gradients on UI, or coloured overlays on photos.
Set Inter in uppercase or Coolvetica in sentence case.
Round photos, or use radii outside the scale (7, 10, 20, 30px and pills).
Use #FFFFFF80 (ink-subtle) for paragraphs; keep it for placeholders and counts like /04.
Fill the space between display titles with long copy; keep statements to 2–3 centred lines.
Use the loaded but unused Humane font, or rebuild the hero wordmark as flat text without its warp.

Example prompt

Any page in the Valtero style

Prompt

Build your page in the Valtero style. Use a pure #000000 background. Set section titles in Coolvetica Condensed, uppercase, 144px, weight 500, line height 0.85, centred, with a © mark (PRICING ©26). Set statements in Inter 600 at 19px, line height 1.3, white, centred, 2–3 lines, and body text in Inter 500 at 16px, white at 70%. Labels and buttons are Coolvetica uppercase at 19px with +0.6px tracking. The only button is a white pill (black text, 44px tall, padding 11.5px 24px, 50em radius) whose #2B2B2B fill slides up on hover in 300ms. Cards are #151515 or #171717 at 69% with a 20–30px radius and 30–40px backdrop blur. Photos run edge to edge with no radius and a caption in 64px condensed caps on the image. No shadows, no accent colour. Animate reveals with a 500ms fade and 20px rise, or a 400ms skew-in.

# Valtero Design System

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

## Overview

Valtero is a loud, black, all-caps agency site. It feels
like a gig poster: a pure #000000 page, a giant warped
white wordmark in the hero, then condensed Coolvetica
capitals at 120–259px that fill the width, broken up by
edge-to-edge project photos. Text blocks are short,

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #000000     | Page background and eve… |
| surface-1    | #151515     | Sticky process cards; t… |
| surface-2    | #222222     | Video bands and the ful… |
| surface-3    | #333333     | Small raised chips such… |
| field        | #444444     | Form inputs, which go d… |
| field-focus  | #121212     | With field: Form inputs… |
| on-primary   | #000000     | Text on primary          |
| on-primary-… | #FFFFFF     |                          |
| ink          | #FFFFFF     | Headlines, labels, stat… |
| ink-muted    | #FFFFFF 70% | Paragraph text (the CSS… |
| ink-subtle   | #FFFFFF 50% | Placeholders, the /04 i… |
| on-media     | #FFFFFF     |                          |
| primary      | #FFFFFF     | The white pill button    |
| primary-hov… | #2B2B2B     | The dark fill that slid… |

## Typography

- display-marquee: Coolvetica Condensed 259px / 500
- display-section: Coolvetica Condensed 144px / 500
- headline-lg: Coolvetica Condensed 64px / 400
- headline-menu: Coolvetica Condensed 64px / 500

{
  "$description": "Valtero 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": "The white pill button"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#2B2B2B",
      "$description": "The dark fill that slides up inside the pill on hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "on-primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "canvas": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Page background and every content section (video bands are #222222)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#151515",
      "$description": "Sticky process cards; the pricing band measures one step off at #171717"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#222222",
      "$description": "Video bands and the full-screen menu behind its photo"
    },
    "surface-3": {
      "$type": "color",
      "$value": "#333333",
      "$description": "Small raised chips such as the pricing check boxes"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Headlines, labels, statements, links"

/* Valtero 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: #FFFFFF;
  --color-primary-hover: #2B2B2B;
  --color-on-primary: #000000;
  --color-on-primary-hover: #FFFFFF;
  --color-canvas: #000000;
  --color-surface-1: #151515;
  --color-surface-2: #222222;
  --color-surface-3: #333333;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFFB3;
  --color-ink-subtle: #FFFFFF80;
  --color-line: #FFFFFF1A;
  --color-line-strong: #FFFFFF26;
  --color-line-grid: #202020;
  --color-glass: #171717B0;
  --color-glass-chip: #3333338C;
  --color-field: #444444;
  --color-field-focus: #121212;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Coolvetica Condensed", "Oswald", sans-serif;
  --font-coolvetica-condensed: "Coolvetica Condensed", "Oswald", sans-serif;
  --font-inter: "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-marquee: 259px;
  --text-display-marquee--line-height: 0.85;
  --text-display-marquee--letter-spacing: 1px;
  --text-display-marquee--font-weight: 500;
  --text-display-section: 144px;
  --text-display-section--line-height: 0.85;
  --text-display-section--letter-spacing: 0px;
  --text-display-section--font-weight: 500;
  --text-headline-lg: 64px;
  --text-headline-lg--line-height: 0.85;
  --text-headline-lg--letter-spacing: 0.4px;
  --text-headline-lg--font-weight: 400;
  --text-headline-menu: 64px;
  --text-headline-menu--line-height: 1.1;

/* Valtero 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; /* The white pill button */
  --color-primary-hover: #2B2B2B; /* The dark fill that slides up inside the pill on hover */
  --color-on-primary: #000000; /* Text on primary */
  --color-on-primary-hover: #FFFFFF;
  --color-canvas: #000000; /* Page background and every content section (video bands are #222222) */
  --color-surface-1: #151515; /* Sticky process cards; the pricing band measures one step off at #171717 */
  --color-surface-2: #222222; /* Video bands and the full-screen menu behind its photo */
  --color-surface-3: #333333; /* Small raised chips such as the pricing check boxes */
  --color-ink: #FFFFFF; /* Headlines, labels, statements, links */
  --color-ink-muted: #FFFFFFB3; /* Paragraph text (the CSS sets p { opacity: .7 }; label classes such as .top-text reset it to full white), plan descriptions, What's included: */
  --color-ink-subtle: #FFFFFF80; /* Placeholders, the /04 in FEATURED WORK /04, idle menu links */
  --color-line: #FFFFFF1A; /* Input borders, the 2px base line under big footer links, pricing dividers */
  --color-line-strong: #FFFFFF26; /* The rule under each sticky service row */
  --color-line-grid: #202020; /* 1px borders of the client-logo grid */
  --color-glass: #171717B0; /* Testimonial cards */
  --color-glass-chip: #3333338C; /* The arrow chip on project images */
  --color-field: #444444; /* Form inputs, which go darker on focus */
  --color-field-focus: #121212; /* With field: Form inputs, which go darker on focus */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-coolvetica-condensed: "Coolvetica Condensed", "Oswald", sans-serif;
  --font-inter: "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-marquee: 259px;
  --text-display-marquee-font: var(--font-coolvetica-condensed);
  --text-display-marquee-weight: 500;
  --text-display-marquee-line-height: 0.85;
  --text-display-marquee-tracking: 1px;
  --text-display-section: 144px;
  --text-display-section-font: var(--font-coolvetica-condensed);
  --text-display-section-weight: 500;
  --text-display-section-line-height: 0.85;
  --text-display-section-tracking: 0px;
  --text-headline-lg: 64px;
  --text-headline-lg-font: var(--font-coolvetica-condensed);
  --text-headline-lg-weight: 400;
  --text-headline-lg-line-height: 0.85;
  --text-headline-lg-tracking: 0.4px;
  --text-headline-menu: 64px;

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

Coolvetica Condensed · display-marquee · shown in Oswald (fallback)

Coolvetica Condensed · headline-lg · shown in Oswald (fallback)

Inter · title-lg

Inter · body

Inter · caption

Coolvetica Condensed · label · shown in Oswald (fallback)

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Valtero style

More design systems like this

Vantix

Raster

Agenci

Agencs

Bring any of them to your AI tool