Raster Design System

Get DESIGN.md Download View template Works with

Raster website template preview detail 2

Raster website template preview detail 3

Raster is a dark design-studio template built like a technical drawing. The whole page sits on a visible grid: four columns of 1px white-10% rules that run from the navigation to the footer, with a small square marker at every place a horizontal rule crosses a vertical one. Type is quiet and precise: Inter at medium weight with tight negative tracking, and Geist Mono uppercase for every piece of meta information. Colour is almost absent; the only warm notes come from the photography inside page previews.

The published preview opens on an overview page ("Every page, on one grid.") that lists the template's 25 pages as cards. The system below is measured from that page, and the card thumbnails show the same grid, type and blur on the three home pages.

Four signatures make it recognisable:

The visible grid. Column rules at 1px line (#FFFFFF1A) divide the page into four 350px columns, and every intersection carries a 5px line-strong (#FFFFFF99) square marker. Cards, labels and images snap to these cells; only the headlines span across a rule (the H1 over columns 1–2, section titles over columns 2–3).
Two-tone headlines. Each title is one short sentence where the first words are ink (#F2F2F0) and the rest are ink-subtle (#8A8A86): Every page, on one grid., Three ways in., Projects and a template.
Mono meta rows. Geist Mono 12px uppercase with 0.72px tracking labels everything: RASTER / OVERVIEW, ● BOOKING Q1 2027, ZÜRICH · 01:27, EST. 2014, 01 / HOMES, 03 PAGES.
Progressive bottom blur. A fixed band at the bottom of the viewport stacks four backdrop blurs (0.3, 1.3, 2.8 and 5px, saturate 1.2) over a gradient to #0B0B0B at 70%, so content dissolves as it scrolls out.

Raster is measured in its dark theme. The navigation carries a moon/sun toggle, so a light theme exists.

Colors

Surfaces

canvas#0B0B0B

Page background and footer

surface-1#191918

Stat cards, page cards and spec panels (the TIP card sits on the canvas, the GSAP card is inverse)

inverse-canvas#F2F2F0

The one light stat card (GSAP) and its panel below

Ink

on-primary#FFFFFF

Text on primary

on-secondary#0B0B0B

Text on secondary

ink#F2F2F0

Headlines, card titles, the bright half of two-tone titles

ink-strong#FFFFFF

Navigation links, logo, form submit

ink-muted#A6A6A2

Lead paragraphs, card descriptions, the clock

ink-subtle#8A8A86

Mono meta labels, the grey half of two-tone titles, placeholders

inverse-ink#0B0B0B

Text on inverse-canvas

inverse-ink-muted#0B0B0B · 75%

Body text on the light card

inverse-ink-subtle#0B0B0B · 60%

Mono label on the light card

Action

primary#0B0B0B

Set to the canvas: the template has no filled button

primary-hover#0B0B0B

secondary#FFFFFF

The square arrow tile inside buttons and the active theme-toggle square

Lines & effects

line#FFFFFF · 10%

Column and row rules, card edges, tag and button outlines

line-strong#FFFFFF · 60%

The 5px square grid markers

glass#FFFFFF · 7%

Faint fills on small controls

scrim#0B0B0B · 70%

Bottom gradient under the progressive blur

Typography

Inter · display-wordmark

The quick brown fox jumps

The giant Raster wordmark in the footer, one span per letter (6 uses; below the screenshots). 587px · 500 · 0.76 · -44px

Inter · headline

The quick brown fox jumps

Section titles (H2). 42px · 500 · 1.04 · -1.87px

Inter · title-lg

The quick brown fox jumps

Larger statement lines (6 uses, lower on the page). 28px · 500 · 1.45 · -1.26px

Inter · body-lg

The quick brown fox jumps

Leads, stat captions, tip text. 18px · 500 · 1.45 · -0.54px

Inter · label

The quick brown fox jumps

Navigation links, Let's talk, clock. 13px · 600 · 1.45 · -0.14px

Geist Mono · mono

The quick brown fox jumps

Every meta label, tag, index and button label. 12px · 500 · 1.4 · 0.72px

Spacing & shape

Purpose	Value
Grid	12 columns underneath (22 grids measured), shown as four 350px visible columns
Section rhythm	each section opens with 172.8px (12vw) of empty ruled space above its header
Section header	column 1 holds 0N / NAME in mono, columns 2–3 hold the two-tone headline, column 4 holds 0N PAGES right-aligned
Breakpoints	Webflow defaults (991, 767, 479)

Spacing scale

Token	Value	Preview
`hair`	1px
`xs`	6.4px
`sm`	12.8px
`md`	24px

Layout spacing

Token	Value	Preview
`marker`	5px
`gutter`	20px
`meta-row`	52px
`nav`	64px
`section`	172.8px

Border radius

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

Line draw	clipPath: inset(-4px 100% -4px -4px) → inset(-4px), 1.6s, rsInOut: rules and outlines draw in left to right
Panel wipe	clipPath: inset(0 0 100% 0) → inset, 0.8s, rsInOut
Headline reveal	SplitText lines from yPercent 60 or 130 to 0, 1.2s staggered, expo.out; one set from yPercent 100, 1.35s, linear
Fade-up	y 30 → 0, 1.31–1.52s staggered, expo.out
Menu icon	Lines to y ±3, rotation ±45°, 0.5s, rsInOut
Blink	opacity → 0.25, 0.8s and 1.2s, sine.inOut (the status dot)
Cursor follow	x/y quickTo, 0.45s, power3
Marquee	xPercent 0 → −50, 30s, linear
Button hover	transform 0.4s, padding 0.5s, cubic-bezier(0.16, 1, 0.3, 1)

Do’s and don’ts

Draw the grid: 1px #FFFFFF1A column rules through every section and 5px #FFFFFF99 squares where rules cross.
Split each title into an ink (#F2F2F0) half and an ink-subtle (#8A8A86) half.
Put every label, index, tag and button label in Geist Mono 12px uppercase with +0.72px tracking.
Keep cards on surface-1 #191918, square, with about 24px padding and the index plus ↗ at the top.
Use the outlined mono button with a white 31px ↗ tile for calls to action.
Leave 172.8px (12vw) of empty ruled space before each section header.
Round anything. The radius scale is 0px, plus circles for status dots only.
Add drop shadows or glows. Lines are 1px insets; depth is #0B0B0B to #191918.
Use bold Inter for headlines (they are 500), or uppercase Inter.
Add an accent colour. Warm colour comes only from photos.
Use more than one inverse #F2F2F0 cell in a row.
Invent light-theme colours; only the dark theme is measured.

Example prompt

Any page in the Raster style

Prompt

Build your page in the Raster style. Background #0B0B0B. Draw a visible 4-column grid with 20px outer gutters: 1px rgba(255,255,255,0.1) vertical and horizontal rules, and a 5px rgba(255,255,255,0.6) square at every crossing. Fixed 64px transparent nav (Inter 13px/600, white), then a 52px meta row in Geist Mono 12px/500 uppercase, +0.72px tracking, #8A8A86. Section header: "01 / NAME" mono in column 1, a two-tone title in Inter 42px/500, line height 1.04, tracking −1.87px (first words #F2F2F0, the rest #8A8A86) in columns 2–3, "03 PAGES" mono right in column 4. Below it, four edge-to-edge #191918 cards with 0 radius and 24px padding: mono "01" and "↗" on top, a 1.45:1 image, a 20px/500 title and a mono caption. Body text Inter 18px/500, line height 1.45, #A6A6A2. CTA: an outlined mono button with a white square "↗" tile. No radius, no shadows, no accent colour. Reveal with GSAP: lines draw via clipPath over 1.6s, text rises with expo.out over 1.2s.

# Raster Design System

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

## Overview

Raster is a dark design-studio template built like a
technical drawing. The whole page sits on a visible
grid: four columns of 1px white-10% rules that run from
the navigation to the footer, with a small square marker
at every place a horizontal rule crosses a vertical one.

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #0B0B0B     | Page background and foo… |
| surface-1    | #191918     | Stat cards, page cards … |
| inverse-can… | #F2F2F0     | The one light stat card… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #0B0B0B     | Text on secondary        |
| ink          | #F2F2F0     | Headlines, card titles,… |
| ink-strong   | #FFFFFF     | Navigation links, logo,… |
| ink-muted    | #A6A6A2     | Lead paragraphs, card d… |
| ink-subtle   | #8A8A86     | Mono meta labels, the g… |
| inverse-ink  | #0B0B0B     | Text on inverse-canvas   |
| inverse-ink… | #0B0B0B 75% | Body text on the light … |
| inverse-ink… | #0B0B0B 60% | Mono label on the light… |
| primary      | #0B0B0B     | Set to the canvas: the … |
| primary-hov… | #0B0B0B     |                          |

## Typography

- display-wordmark: Inter 587px / 500
- display-metric: Inter 78px / 500
- display-hero: Inter 66px / 500
- headline: Inter 42px / 500

{
  "$description": "Raster design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#0B0B0B",
      "$description": "Set to the canvas: the template has no filled button"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#0B0B0B"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The square arrow tile inside buttons and the active theme-toggle square"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#0B0B0B",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#0B0B0B",
      "$description": "Page background and footer"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#191918",
      "$description": "Stat cards, page cards and spec panels (the TIP card sits on the canvas, the GSAP card is inverse)"
    },
    "ink": {
      "$type": "color",
      "$value": "#F2F2F0",
      "$description": "Headlines, card titles, the bright half of two-tone titles"
    },
    "ink-strong": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Navigation links, logo, form submit"

/* Raster 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, rounded-full, p-md */

@theme {
  /* Colors */
  --color-primary: #0B0B0B;
  --color-primary-hover: #0B0B0B;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFFFFF;
  --color-on-secondary: #0B0B0B;
  --color-canvas: #0B0B0B;
  --color-surface-1: #191918;
  --color-ink: #F2F2F0;
  --color-ink-strong: #FFFFFF;
  --color-ink-muted: #A6A6A2;
  --color-ink-subtle: #8A8A86;
  --color-line: #FFFFFF1A;
  --color-line-strong: #FFFFFF99;
  --color-glass: #FFFFFF13;
  --color-scrim: #0B0B0BB3;
  --color-inverse-canvas: #F2F2F0;
  --color-inverse-ink: #0B0B0B;
  --color-inverse-ink-muted: #0B0B0BBF;
  --color-inverse-ink-subtle: #0B0B0B99;

  /* Fonts */
  --font-sans: "Inter", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-geist-mono: "Geist Mono", monospace;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-wordmark: 587px;
  --text-display-wordmark--line-height: 0.76;
  --text-display-wordmark--letter-spacing: -44px;
  --text-display-wordmark--font-weight: 500;
  --text-display-metric: 78px;
  --text-display-metric--line-height: 0.85;
  --text-display-metric--letter-spacing: -4.67px;
  --text-display-metric--font-weight: 500;
  --text-display-hero: 66px;
  --text-display-hero--line-height: 0.92;
  --text-display-hero--letter-spacing: -3.93px;
  --text-display-hero--font-weight: 500;
  --text-headline: 42px;
  --text-headline--line-height: 1.04;

/* Raster 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: #0B0B0B; /* Set to the canvas: the template has no filled button */
  --color-primary-hover: #0B0B0B;
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #FFFFFF; /* The square arrow tile inside buttons and the active theme-toggle square */
  --color-on-secondary: #0B0B0B; /* Text on secondary */
  --color-canvas: #0B0B0B; /* Page background and footer */
  --color-surface-1: #191918; /* Stat cards, page cards and spec panels (the TIP card sits on the canvas, the GSAP card is inverse) */
  --color-ink: #F2F2F0; /* Headlines, card titles, the bright half of two-tone titles */
  --color-ink-strong: #FFFFFF; /* Navigation links, logo, form submit */
  --color-ink-muted: #A6A6A2; /* Lead paragraphs, card descriptions, the clock */
  --color-ink-subtle: #8A8A86; /* Mono meta labels, the grey half of two-tone titles, placeholders */
  --color-line: #FFFFFF1A; /* Column and row rules, card edges, tag and button outlines */
  --color-line-strong: #FFFFFF99; /* The 5px square grid markers */
  --color-glass: #FFFFFF13; /* Faint fills on small controls */
  --color-scrim: #0B0B0BB3; /* Bottom gradient under the progressive blur */
  --color-inverse-canvas: #F2F2F0; /* The one light stat card (GSAP) and its panel below */
  --color-inverse-ink: #0B0B0B; /* Text on inverse-canvas */
  --color-inverse-ink-muted: #0B0B0BBF; /* Body text on the light card */
  --color-inverse-ink-subtle: #0B0B0B99; /* Mono label on the light card */

  /* Fonts */
  --font-inter: "Inter", sans-serif;
  --font-geist-mono: "Geist Mono", monospace;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-wordmark: 587px;
  --text-display-wordmark-font: var(--font-inter);
  --text-display-wordmark-weight: 500;
  --text-display-wordmark-line-height: 0.76;
  --text-display-wordmark-tracking: -44px;
  --text-display-metric: 78px;
  --text-display-metric-font: var(--font-inter);
  --text-display-metric-weight: 500;
  --text-display-metric-line-height: 0.85;
  --text-display-metric-tracking: -4.67px;
  --text-display-hero: 66px;
  --text-display-hero-font: var(--font-inter);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 0.92;
  --text-display-hero-tracking: -3.93px;
  --text-headline: 42px;

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 · display-wordmark

Inter · headline

Inter · title-lg

Inter · body-lg

Inter · label

Geist Mono · mono

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Raster style

More design systems like this

Valtero

Vantix

Agenci

Agencs

Bring any of them to your AI tool