Vellmar Design System

Get DESIGN.md Download View template Works with

Vellmar website template preview detail 2

Vellmar website template preview detail 3

Vellmar is a one-screen portfolio for an independent designer. The home view does not scroll: a warm stone canvas, four tiny label pairs across the top, and one row of tall media strips filling the lower two thirds of the screen. One strip is open as a large square tile with a white title and year; the others stay narrow, edge to edge with 8px gaps, and bleed off both sides of the viewport. Almost all of the visual weight is the work itself.

Three signatures make it recognisable:

The strip slider. A 14-column row of media strips, 8px apart, with 6px corners. One opens to about 600×600px while the rest are about 158px wide, and opening another one slides the row in 0.6s.
Stacked label pairs. The header is four pairs of 12px uppercase words, one under the other: NOA / VELLMAR, MENU / GET IN TOUCH, LOCAL TIME / 01:27, • DAY / NIGHT. There is no logo mark and no bar.
Lowercase page titles. The other views (work, index, profile) open as tiles from the menu with a 60px lowercase title at −3.3px tracking.

The four screenshots are the same 900px view, which does not scroll, but the row moves on by itself between them: the open tile cycles through Circle Water (Campaign, 2025), Apex Moto (Campaign, 2026) and Noir (Digital product, 2026), and the narrow strips shift order around it. The clock also ticks, with its colon blinking off (02 41).

Colors

Surfaces

canvas#EBE8E1

Page background

surface-1#DFDBD2

Tile backgrounds behind media (shows while media loads)

surface-2#D6D2C8

Menu overlay

inverse-canvas#1D1C19

The small dot beside the active theme option

Ink

on-primary#1D1C19

Text on primary

ink#1D1C19

All header labels, titles, bio text

ink-muted#1D1C19

Same as ink: body text is full ink, there is no separate body grey

ink-subtle#6B665C

LOCAL TIME, the inactive NIGHT, secondary labels

on-media#FFFFFF

Tile titles and meta set on images

Action

primary#EBE8E1

Set to the canvas: there are no filled buttons

primary-hover#EBE8E1

Lines & effects

line#1D1C19 · 14%

1px rules in lists (index and profile views)

scrim#0A0805 · 55%

Darkening layer over media behind white captions

Typography

Switzer · display-page

The quick brown fox jumps

Page titles work, index, profile (3 uses, in the menu views). 60px · 400 · 1.0 · -3.3px

Switzer · headline

The quick brown fox jumps

Large lines in the index and profile views (7 uses). 37px · 400 · 1.0 · -1.68px

Switzer · body-xl

The quick brown fox jumps

Profile bio: Noa Vellmar is an independent digital designer based in Lisbon… (47 uses). 23px · 400 · 1.2 · -0.35px

Switzer · title

The quick brown fox jumps

Tile titles: Circle Water, Kova, Cadence. 17px · 500 · 1.0 · -0.17px

Switzer · caption

The quick brown fox jumps

Tile meta: Campaign, 2025. 13px · 400 · 1.0

Switzer · label

The quick brown fox jumps

Header labels, menu links (87 uses). 12px · 400 · 1.0

Spacing & shape

Purpose	Value
Breakpoints	Webflow defaults (991, 767, 479)

Spacing scale

Token	Value	Preview

Layout spacing

Token	Value	Preview
`gap`	8px
`gutter`	16px

Border radius

tile6px

pill1440px

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

Motion

Strip open/close	transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), neighbours delayed 0.05s
Label roll	top 0.6s cubic-bezier(0.22, 1, 0.36, 1) on the duplicated label
Caption in	opacity, filter (blur) and transform, 0.35s
View reveal	opacity 0.6s and filter 0.6s after 0.2s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) after 0.2s
Fades	opacity 0.4s; color 0.4s on labels
Clock colon	opacity → 0.3, 1s sine.inOut, repeating
Cursor follow	x / y quickTo, 0.7s power3
Auto-advance	The row moves on by itself about every 10s

Do’s and don’ts

Keep the home view to one screen: header labels on top, one strip row at the bottom.
Use #EBE8E1 for the canvas and #1D1C19 for all text; #6B665C only for secondary labels.
Set header text in Switzer 12px/400 uppercase, stacked in two-word pairs.
Give every media tile a 6px radius and an 8px gap to its neighbours.
Animate opens and rolls with cubic-bezier(0.22, 1, 0.36, 1) at 0.6s.
Put white captions only over the #0A08058C scrim.
Add buttons, boxes, borders or icons to the header.
Use bold text, or weight 500 outside tile titles.
Add shadows, gradients or blur to the UI.
Put #6B665C text on #DFDBD2 tiles (4.1:1) or the #D6D2C8 menu (3.8:1); keep ink-subtle on the canvas, at 12px+ uppercase meta only, and use #1D1C19 on the darker surfaces.
Use an accent colour; colour belongs to the media.
Invent night-mode colours; only the day theme is measured.

Example prompt

Any page in the Vellmar style

Prompt

Build your page in the Vellmar style. One full-screen view on #EBE8E1, no scrolling. Header: four two-line label pairs in Switzer 12px/400 uppercase, #1D1C19, no bar or border, placed at the left gutter (16px), about 320px, about 1128px and the right gutter; secondary words like "LOCAL TIME" in #6B665C. Bottom two thirds: one row of media strips in a 14-column grid with an 8px gap, 6px radius, about 600px tall, bleeding off both edges. One strip is open at about 600×600 with a white caption bottom-left: title Switzer 17px/500, meta 13px/400, over a rgba(10,8,5,0.55) scrim. Strips open with transform 0.6s cubic-bezier(0.22, 1, 0.36, 1). No buttons, icons, shadows or accent colours. Page titles are lowercase Switzer 60px/400 with −3.3px tracking.

# Vellmar Design System

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

## Overview

Vellmar is a one-screen portfolio for an independent
designer. The home view does not scroll: a warm stone
canvas, four tiny label pairs across the top, and one
row of tall media strips filling the lower two thirds of
the screen. One strip is open as a large square tile

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #EBE8E1     | Page background          |
| surface-1    | #DFDBD2     | Tile backgrounds behind… |
| surface-2    | #D6D2C8     | Menu overlay             |
| inverse-can… | #1D1C19     | The small dot beside th… |
| on-primary   | #1D1C19     | Text on primary          |
| ink          | #1D1C19     | All header labels, titl… |
| ink-muted    | #1D1C19     | Same as ink: body text … |
| ink-subtle   | #6B665C     | LOCAL TIME, the inactiv… |
| on-media     | #FFFFFF     | Tile titles and meta se… |
| primary      | #EBE8E1     | Set to the canvas: ther… |
| primary-hov… | #EBE8E1     |                          |
| line         | #1D1C19 14% | 1px rules in lists (ind… |
| scrim        | #0A0805 55% | Darkening layer over me… |

## Typography

- display-page: Switzer 60px / 400
- headline: Switzer 37px / 400
- body-xl: Switzer 23px / 400
- title: Switzer 17px / 500

{
  "$description": "Vellmar design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#EBE8E1",
      "$description": "Set to the canvas: there are no filled buttons"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#EBE8E1"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#1D1C19",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#EBE8E1",
      "$description": "Page background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#DFDBD2",
      "$description": "Tile backgrounds behind media (shows while media loads)"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#D6D2C8",
      "$description": "Menu overlay"
    },
    "ink": {
      "$type": "color",
      "$value": "#1D1C19",
      "$description": "All header labels, titles, bio text"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#1D1C19",
      "$description": "Same as ink: body text is full ink, there is no separate body grey"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#6B665C",
      "$description": "LOCAL TIME, the inactive NIGHT, secondary labels"

/* Vellmar 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-tile, p-gap */

@theme {
  /* Colors */
  --color-primary: #EBE8E1;
  --color-primary-hover: #EBE8E1;
  --color-on-primary: #1D1C19;
  --color-canvas: #EBE8E1;
  --color-surface-1: #DFDBD2;
  --color-surface-2: #D6D2C8;
  --color-ink: #1D1C19;
  --color-ink-muted: #1D1C19;
  --color-ink-subtle: #6B665C;
  --color-line: #1D1C1924;
  --color-on-media: #FFFFFF;
  --color-scrim: #0A08058C;
  --color-inverse-canvas: #1D1C19;

  /* Fonts */
  --font-sans: "Switzer", "Inter", sans-serif;
  --font-switzer: "Switzer", "Inter", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-page: 60px;
  --text-display-page--line-height: 1.0;
  --text-display-page--letter-spacing: -3.3px;
  --text-display-page--font-weight: 400;
  --text-headline: 37px;
  --text-headline--line-height: 1.0;
  --text-headline--letter-spacing: -1.68px;
  --text-headline--font-weight: 400;
  --text-body-xl: 23px;
  --text-body-xl--line-height: 1.2;
  --text-body-xl--letter-spacing: -0.35px;
  --text-body-xl--font-weight: 400;
  --text-title: 17px;
  --text-title--line-height: 1.0;
  --text-title--letter-spacing: -0.17px;
  --text-title--font-weight: 500;
  --text-body: 16px;
  --text-body--line-height: 1.3;
  --text-body--letter-spacing: 0px;
  --text-body--font-weight: 400;
  --text-caption: 13px;

/* Vellmar 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: #EBE8E1; /* Set to the canvas: there are no filled buttons */
  --color-primary-hover: #EBE8E1;
  --color-on-primary: #1D1C19; /* Text on primary */
  --color-canvas: #EBE8E1; /* Page background */
  --color-surface-1: #DFDBD2; /* Tile backgrounds behind media (shows while media loads) */
  --color-surface-2: #D6D2C8; /* Menu overlay */
  --color-ink: #1D1C19; /* All header labels, titles, bio text */
  --color-ink-muted: #1D1C19; /* Same as ink: body text is full ink, there is no separate body grey */
  --color-ink-subtle: #6B665C; /* LOCAL TIME, the inactive NIGHT, secondary labels */
  --color-line: #1D1C1924; /* 1px rules in lists (index and profile views) */
  --color-on-media: #FFFFFF; /* Tile titles and meta set on images */
  --color-scrim: #0A08058C; /* Darkening layer over media behind white captions */
  --color-inverse-canvas: #1D1C19; /* The small dot beside the active theme option */

  /* Fonts */
  --font-switzer: "Switzer", "Inter", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-page: 60px;
  --text-display-page-font: var(--font-switzer);
  --text-display-page-weight: 400;
  --text-display-page-line-height: 1.0;
  --text-display-page-tracking: -3.3px;
  --text-headline: 37px;
  --text-headline-font: var(--font-switzer);
  --text-headline-weight: 400;
  --text-headline-line-height: 1.0;
  --text-headline-tracking: -1.68px;
  --text-body-xl: 23px;
  --text-body-xl-font: var(--font-switzer);
  --text-body-xl-weight: 400;
  --text-body-xl-line-height: 1.2;
  --text-body-xl-tracking: -0.35px;
  --text-title: 17px;
  --text-title-font: var(--font-switzer);
  --text-title-weight: 500;
  --text-title-line-height: 1.0;
  --text-title-tracking: -0.17px;
  --text-body: 16px;
  --text-body-font: var(--font-switzer);
  --text-body-weight: 400;

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

Portfolio 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

Switzer · display-page

Switzer · headline

Switzer · body-xl

Switzer · title

Switzer · caption

Switzer · label

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Vellmar style

More design systems like this

Mio Kain

Moka

Fifi

Portfolyo

Bring any of them to your AI tool