Vluna Design System

Get DESIGN.md Download View template Works with

Vluna is a quiet, cinematic architecture studio site. It feels like a dimmed gallery: a near-black #040404 page with visible film grain over everything, warm minimalist architecture renders (white desert domes, beige interiors, raw concrete) and white type split between a fashion-house serif and a plain grotesk. Colour comes from the photographs only, and the service slides are pushed down under a 75% black overlay.

Four signatures make it recognisable:

Serif against grotesk. The VLUNA wordmark, the 1/4 service counters and the line Lines that speak, designs that inspire. are set in Velista, a high-contrast display serif. Everything else is Instrument Sans, mostly at 600 (nav 500, text links 400).
Dot-bullet navigation. Nav links sit in two groups, left (Home, Studio, Blog) and right (Packages, Contact, Cart 0), each preceded by a small white dot. On hover the dot grows into a 30px white circle with a dark arrow inside.
Inset full-bleed frames. The hero image and the service slides stop 10px short of the viewport edges, so a thin black frame always shows around the picture.
Film grain. A fixed full-viewport overlay (.tv-dots) adds TV-static noise over the whole page, black areas included.

Vluna is a dark-only design.

Colors

Surfaces

canvas#040404

Page background, sections, footer (--main-color)

canvas-deep#000000

The service-slides section behind the photos

surface-1#141414

Testimonial cards, the rounded band, icon squares, cart (--third-color)

field#242424

The footer subscribe field

field-border#FFFFFF · 13%

Contact inputs: hairline border and placeholder

field-placeholder#FFFFFF · 70%

Placeholder text on field

inverse-canvas#FFFFFF

Nav dots and the arrow inside the grown dot

Ink

on-primary#FFFFFF

Text on primary

ink#FFFFFF

Headlines, nav, links, card text

ink-soft#FFFFFF · 80%

Dates and meta (.data-text, opacity 0.8)

ink-muted#FFFFFF · 70%

Paragraphs (base p opacity 0.7)

ink-subtle#FFFFFF · 60%

Footer column titles, .gray-text-color

on-secondary#D9DAE2

Text on secondary

inverse-ink#121212

Text on inverse-canvas

on-media#FFFFFF

Text over photos

Action

primary#141414

Filled pill button (.button)

primary-hover#222222

.button:hover background

secondary#000000

Footer subscribe button; text is --body-text-color

secondary-hover#080425

.button-subscribe:hover, a near-black navy

Lines & effects

line#FFFFFF · 15%

Cart border and cart footer rule

line-strong#FFFFFF · 40%

1px border of the outlined pill button

overlay#000000 · 75%

Service-slide darkening

overlay-light#000000 · 20%

Lighter photo darkening; the hero itself only gets 5%

Typography

Instrument Sans · display-xl

The quick brown fox jumps

The scrolling title …Tomorrow's Way of…, three copies running across the viewport. 230px · 600 · 1.2 · -1px

Instrument Sans · headline-xl

The quick brown fox jumps

Service names on slides (Conceptual Design, Project Management). 72px · 600 · 1.0

Instrument Sans · title-lg

The quick brown fox jumps

About statement Vluna® is dedicated to designing… (.main-title-page). 30px · 600 · 1.2

Instrument Sans · body-lg

The quick brown fox jumps

Testimonial quotes (.subhead-testimonials). 22px · 600 · 1.4

Instrument Sans · label-link

The quick brown fox jumps

Underlined text links (.button-line). 21px · 400 · 1.0

Instrument Sans · caption

The quick brown fox jumps

Dates and meta at 80%. 14px · 500 · 1.4

Spacing & shape

Purpose	Value
Container	.container max 1240px, centred; many inner wrappers are 85% wide (95% for the bottom logo row)
Section rhythm	.section is 200px top and bottom, 100px at ≤991
Breakpoints	991px, 767px and 479px, plus a 1280px step

Spacing scale

Token	Value	Preview
`sm`	20px
`md`	25px
`lg`	50px
`xl`	60px

Layout spacing

Token	Value	Preview
`inset`	10px
`gutter`	43px
`column-gap`	50px
`section-sm`	150px
`section`	200px

Border radius

xs2px

sm8px

md12px

panel14px

field30px

lg40px

pill50px

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 3field

Motion

Nav dot grow	Size change to 30px, 300ms ease, on hover; back on mouse-out
Arrow nudge	Icon moves x 3px, y −3px and back, 300ms ease
Page load	Opacity 0 → 1 and move to 0px, 1000ms outQuart
Slide-in	x 30px → 0, 800ms outExpo; x −30px → 0, 500ms outQuart
Scroll title	Scrubbed x 45vw ↔ −45vw while in view
Scroll reveals	y 10% → 0, y −100% → 0, small rotates, 500ms keyframes
Underline and size changes	300ms ease, 400ms outCubic, 500ms
Border change	200ms outSine
Menu icon	Lottie 0 → 100, 600ms
Buttons and cards	CSS transition: all 0.3s; cards transform 0.3s, color 0.3s

Do’s and don’ts

Use #040404 for the page and #141414 for cards and bands, and keep the grain layer on.
Pair Velista 400 for wordmarks, counters and one statement line with Instrument Sans 600 for headings.
Inset full-width media 10px from the viewport edges so a black frame shows.
Darken busy photos with black 75% before setting 72px titles on them.
Use 50px pills for buttons: outlined (1px white 40%) over photos, #141414 filled elsewhere.
Precede nav links with white dots that grow to 30px circles on hover.
Round images or cards; only buttons, inputs and dots are round.
Use Velista for body text or anything under 40px.
Add the declared blue #4361EE or any other accent colour.
Use grey hex values for muted text; use white at 80 / 70 / 60%.
Add drop shadows; depth comes from overlays and the #040404 / #141414 step.
Put the #141414 filled button alone on #040404 without a border or photo behind it; it nearly disappears.
Animate longer than 1000ms, and keep anything above 500ms for entrances.

Example prompt

Any page in the Vluna style

Prompt

Build your page in the Vluna style. Use a #040404 page with a subtle full-screen film-grain overlay, #141414 for cards and bands, and white text (paragraphs at 70%, meta at 80%, footer titles at 60%). Headings are Instrument Sans 600 (72px service titles with line height 1.0, 53px section headlines, 30px statements); use the display serif Velista 400 only for the wordmark, "1/4" counters at 45px and one poetic line at 41px. Inset full-width photos 10px from the viewport edges and darken them with black 75% when text sits on them. Buttons are uppercase 14.4px weight-600 pills with a 50px radius, 52px tall, padding 17px 24px: outlined with 1px white 40% over photos, #141414 filled (hover #222222) elsewhere. Nav links are 17px weight 500, each after a small white dot that grows into a 30px white circle with a dark arrow on hover (300ms ease). Square corners on all images and cards, no shadows, no accent colour. Use warm minimalist architecture renders.

# Vluna Design System

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

## Overview

Vluna is a quiet, cinematic architecture studio site. It
feels like a dimmed gallery: a near-black #040404 page
with visible film grain over everything, warm minimalist
architecture renders (white desert domes, beige
interiors, raw concrete) and white type split between a

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #040404     | Page background, sectio… |
| canvas-deep  | #000000     | The service-slides sect… |
| surface-1    | #141414     | Testimonial cards, the … |
| field        | #242424     | The footer subscribe fi… |
| field-border | #FFFFFF 13% | Contact inputs: hairlin… |
| field-place… | #FFFFFF 70% | Placeholder text on fie… |
| inverse-can… | #FFFFFF     | Nav dots and the arrow … |
| on-primary   | #FFFFFF     | Text on primary          |
| ink          | #FFFFFF     | Headlines, nav, links, … |
| ink-soft     | #FFFFFF 80% | Dates and meta (.data-t… |
| ink-muted    | #FFFFFF 70% | Paragraphs (base p opac… |
| ink-subtle   | #FFFFFF 60% | Footer column titles, .… |
| on-secondary | #D9DAE2     | Text on secondary        |
| inverse-ink  | #121212     | Text on inverse-canvas   |

## Typography

- display-xl: Instrument Sans 230px / 600
- headline-xl: Instrument Sans 72px / 600
- headline-lg: Instrument Sans 53px / 600
- headline-counter: Velista 45px / 400

{
  "$description": "Vluna design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#141414",
      "$description": "Filled pill button (.button)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#222222",
      "$description": ".button:hover background"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#040404",
      "$description": "Page background, sections, footer (--main-color)"
    },
    "canvas-deep": {
      "$type": "color",
      "$value": "#000000",
      "$description": "The service-slides section behind the photos"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#141414",
      "$description": "Testimonial cards, the rounded band, icon squares, cart (--third-color)"
    },
    "field": {
      "$type": "color",
      "$value": "#242424",
      "$description": "The footer subscribe field"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Headlines, nav, links, card text"
    },
    "ink-soft": {
      "$type": "color",
      "$value": "#FFFFFFCC",

/* Vluna 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: #141414;
  --color-primary-hover: #222222;
  --color-on-primary: #FFFFFF;
  --color-canvas: #040404;
  --color-canvas-deep: #000000;
  --color-surface-1: #141414;
  --color-field: #242424;
  --color-ink: #FFFFFF;
  --color-ink-soft: #FFFFFFCC;
  --color-ink-muted: #FFFFFFB3;
  --color-ink-subtle: #FFFFFF99;
  --color-line: #FFFFFF26;
  --color-line-strong: #FFFFFF66;
  --color-field-border: #FFFFFF21;
  --color-field-placeholder: #FFFFFFB3;
  --color-secondary: #000000;
  --color-secondary-hover: #080425;
  --color-on-secondary: #D9DAE2;
  --color-inverse-canvas: #FFFFFF;
  --color-inverse-ink: #121212;
  --color-on-media: #FFFFFF;
  --color-overlay: #000000BF;
  --color-overlay-light: #00000033;

  /* Fonts */
  --font-sans: "Instrument Sans", sans-serif;
  --font-instrument-sans: "Instrument Sans", sans-serif;
  --font-velista: "Velista", "Playfair Display", serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-xl: 230px;
  --text-display-xl--line-height: 1.2;
  --text-display-xl--letter-spacing: -1px;
  --text-display-xl--font-weight: 600;
  --text-headline-xl: 72px;
  --text-headline-xl--line-height: 1.0;
  --text-headline-xl--letter-spacing: 0px;
  --text-headline-xl--font-weight: 600;
  --text-headline-lg: 53px;
  --text-headline-lg--line-height: 1.2;

/* Vluna 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: #141414; /* Filled pill button (.button) */
  --color-primary-hover: #222222; /* .button:hover background */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #040404; /* Page background, sections, footer (--main-color) */
  --color-canvas-deep: #000000; /* The service-slides section behind the photos */
  --color-surface-1: #141414; /* Testimonial cards, the rounded band, icon squares, cart (--third-color) */
  --color-field: #242424; /* The footer subscribe field */
  --color-ink: #FFFFFF; /* Headlines, nav, links, card text */
  --color-ink-soft: #FFFFFFCC; /* Dates and meta (.data-text, opacity 0.8) */
  --color-ink-muted: #FFFFFFB3; /* Paragraphs (base p opacity 0.7) */
  --color-ink-subtle: #FFFFFF99; /* Footer column titles, .gray-text-color */
  --color-line: #FFFFFF26; /* Cart border and cart footer rule */
  --color-line-strong: #FFFFFF66; /* 1px border of the outlined pill button */
  --color-field-border: #FFFFFF21; /* Contact inputs: hairline border and placeholder */
  --color-field-placeholder: #FFFFFFB3; /* Placeholder text on field */
  --color-secondary: #000000; /* Footer subscribe button; text is --body-text-color */
  --color-secondary-hover: #080425; /* .button-subscribe:hover, a near-black navy */
  --color-on-secondary: #D9DAE2; /* Text on secondary */
  --color-inverse-canvas: #FFFFFF; /* Nav dots and the arrow inside the grown dot */
  --color-inverse-ink: #121212; /* Text on inverse-canvas */
  --color-on-media: #FFFFFF; /* Text over photos */
  --color-overlay: #000000BF; /* Service-slide darkening */
  --color-overlay-light: #00000033; /* Lighter photo darkening; the hero itself only gets 5% */

  /* Fonts */
  --font-instrument-sans: "Instrument Sans", sans-serif;
  --font-velista: "Velista", "Playfair Display", serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-xl: 230px;
  --text-display-xl-font: var(--font-instrument-sans);
  --text-display-xl-weight: 600;
  --text-display-xl-line-height: 1.2;
  --text-display-xl-tracking: -1px;
  --text-headline-xl: 72px;
  --text-headline-xl-font: var(--font-instrument-sans);
  --text-headline-xl-weight: 600;
  --text-headline-xl-line-height: 1.0;
  --text-headline-xl-tracking: 0px;
  --text-headline-lg: 53px;
  --text-headline-lg-font: var(--font-instrument-sans);

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

Construction 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

Instrument Sans · display-xl

Instrument Sans · headline-xl

Instrument Sans · title-lg

Instrument Sans · body-lg

Instrument Sans · label-link

Instrument Sans · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Vluna style

More design systems like this

LunaArc

Archi

Arcpark

Baltimore

Bring any of them to your AI tool