LunaArc Design System

Get DESIGN.md Download View template Works with

LunaArc website template preview detail 2

LunaArc website template preview detail 3

LunaArc is a dark architecture-studio site that feels like a film still: a near-black #040404 page dusted with visible TV-style grain, heavy white Instrument Sans headlines, and large, calm renders of sculptural buildings at dusk. Nothing is rounded. Colour comes only from the photography (sea blues, warm interior glows, meadow greens); the interface is black, one charcoal step and white.

Four signatures make it recognisable:

Grain over everything. A fixed full-viewport layer (.tv-dots, 900px tall, position fixed) lays film noise over the whole page, photos included. Every screenshot shows it.
Stacked uppercase navigation in a grid. The header is a four-column grid (1fr .7fr 1fr 1fr, 40px gap): LUNA ARC ® on the left, a two-line uppercase tagline (CRAFTING TIMELESS / STRUCTURES THAT INSPIRE), links stacked vertically in two short columns (HOME / STUDIO / NEWS, CONTACT / CART 0), and social abbreviations IG DB X BE on the right.
A muted phrase inside a white headline. Section titles are 58px semibold white, and some drop one key phrase to 50% white: We excel at bringing visionary designs from concept to completion.
Square, inset media. The hero photo and the #141414 CTA band sit 10px in from the viewport edges with 0px corners; service cards are full-bleed photos with the text laid straight onto the image.

LunaArc is dark-only. It is a Webflow Ecommerce build (cart, checkout and package product pages).

Colors

Surfaces

canvas#040404

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

surface-1#141414

The inset CTA band, testimonial cards, logo tiles, cart panel (--third-color)

surface-2#242424

Footer subscribe field

field#242424

Footer subscribe field

Ink

on-primary#FFFFFF

Text on primary

on-secondary#FFFFFF

ink#FFFFFF

Headlines, nav, buttons, metrics

ink-muted#FFFFFF · 70%

Paragraphs and dates

ink-subtle#FFFFFF · 60%

Footer column titles (.footer-title)

ink-faint#FFFFFF · 50%

The muted phrase inside headlines (.gray-text-color)

on-media#FFFFFF

Action

primary#040404

The main button is the canvas colour with a hairline border, not a light fill

secondary#141414

.button fill and its hover

secondary-hover#222222

With secondary: .button fill and its hover

Lines & effects

placeholder#D9DAE2

Contact-form placeholder (--body-text-color)

line#FFFFFF · 15%

1px dividers

line-button#FFFFFF · 12%

1px border on the primary button and form inputs

line-field#FFFFFF · 13%

1px border on the primary button and form inputs

media-scrim#000000 · 25%

Overlay on service and hero photos so white text reads

Typography

Instrument Sans · display-wordmark

The quick brown fox jumps

A 16vw line measured three times below the screenshots (the large footer wordmark row). 230px · 600 · 1.2 · -1px

Instrument Sans · headline-lg

The quick brown fox jumps

All section titles (.main-title-page, h2). 58px · 600 · 1.1

Instrument Sans · title-lg

The quick brown fox jumps

Lead under the CTA title (Experience innovative architectural solutions…). 30px · 600 · 1.3

Instrument Sans · body-lg

The quick brown fox jumps

.small-text at 80%; footer titles are 20px weight 400, line height 1.1, at 60% (.footer-title). 20px · 500 · 1.0

Instrument Sans · label-link

The quick brown fox jumps

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

Instrument Sans · caption

The quick brown fox jumps

Dates and meta (.data-text, 70%). 14px · 500 · 1.4

Spacing & shape

Purpose	Value
Container	max 1240px, centred (.container)
Grid	12 equal columns with 0 column gap and a 10vw row gap (.main-grid)
Section rhythm	200px top and bottom on plain sections (.section, 100px at ≤991px and below, side padding stays 3%); 150px inside the #141414 band
Breakpoints	991, 767 and 479px (Webflow defaults), plus a ≥1280px step

Spacing scale

Token	Value	Preview
`hair`	3px
`xs`	10px
`sm`	20px
`md`	25px
`lg`	40px
`xl`	60px

Layout spacing

Token	Value	Preview
`inset`	10px
`column-gap`	25px
`section-band`	150px
`section`	200px

Border radius

xs2px

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

Motion

Page load fade	opacity 0 → 1 with move to 0,0, 1000ms outQuart
Text and line reveal	y 10% or 100% → 0%, 500ms, on scroll into view (outQuint on titles)
Button text roll	Label y 0 → −100%, 500ms, on hover; reverses on mouse out
Link underline	Width grows, 300ms ease
Arrow nudge	Diagonal move x 3px, y −3px, 300ms ease on hover, back to 0, 0 on mouse out
Slide-ins	x −30px → 0, 500ms outQuart; x 30px → 0, 800ms outExpo
Rotations	Rotations at 500ms on scroll-linked elements (drawing and decorative marks)
Scale	To 1, 300ms outSine
Text colour / border	500ms outQuint / 200ms outSine (inputs)
Scroll-linked	Scroll-linked scenes (parallax on images and the logo tracks)
CSS transitions	all .3s on buttons, transform .3s, color .3s on cards

Do’s and don’ts

Keep the page on canvas #040404 with the grain overlay on top of everything.
Set every section title in headline-lg (58px, 600, 1.1); in some, drop one phrase to ink-faint (white 50%).
Use 0px radius on every card, image, input and button.
Use surface-1 #141414 for the one inset band per page and for testimonial and logo tiles.
Make the main button the dark outlined one (#040404, 1px #FFFFFF1F border, 53px tall) and use link-line for most other actions.
Inset hero images and bands 10px from the viewport edges.
Add the unused blue #4361EE or any other accent colour.
Round corners or add drop shadows.
Use ink-faint (50%) below 24px; it is for the headline phrase only.
Use Space Grotesk or any second typeface.
Put white text on a photo without the 25% black scrim.
Animate longer than 1000ms or with bounce.

Example prompt

Any page in the LunaArc style

Prompt

Build your page in the LunaArc style. Background #040404 with a fixed film-grain overlay over the whole page. Font Instrument Sans: headlines 58px, weight 600, line height 1.1, white, with one phrase per headline at 50% white; paragraphs 18px, weight 500, line height 1.4, white at 70%. Nav is a four-column grid: uppercase logo "NAME ®", a two-line uppercase tagline, links stacked vertically in 16px uppercase, social abbreviations on the right. Sections pad 200px top and bottom and 3% at the sides inside a 1240px container on a 12-column grid. Everything has 0px radius and no shadows. Main button: #040404 fill, 1px rgba(255,255,255,0.12) border, white 16px 600 text, padding 14px 25px, 53px tall, text roll on hover. One #141414 band inset 10px from the viewport edges with 150px padding and a centred title. Photography: calm architectural renders at blue hour, square crops, 25% black scrim under text.

# LunaArc Design System

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

## Overview

LunaArc is a dark architecture-studio site that feels
like a film still: a near-black #040404 page dusted with
visible TV-style grain, heavy white Instrument Sans
headlines, and large, calm renders of sculptural
buildings at dusk. Nothing is rounded. Colour comes only

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #040404     | Page, sections, footer … |
| surface-1    | #141414     | The inset CTA band, tes… |
| surface-2    | #242424     | Footer subscribe field   |
| field        | #242424     | Footer subscribe field   |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #FFFFFF     |                          |
| ink          | #FFFFFF     | Headlines, nav, buttons… |
| ink-muted    | #FFFFFF 70% | Paragraphs and dates     |
| ink-subtle   | #FFFFFF 60% | Footer column titles (.… |
| ink-faint    | #FFFFFF 50% | The muted phrase inside… |
| on-media     | #FFFFFF     |                          |
| primary      | #040404     | The main button is the … |
| secondary    | #141414     | .button fill and its ho… |
| secondary-h… | #222222     | With secondary: .button… |

## Typography

- display-wordmark: Instrument Sans 230px / 600
- display-metric: Instrument Sans 110px / 500
- display-metric-affix: Instrument Sans 70px / 400
- headline-lg: Instrument Sans 58px / 600

{
  "$description": "LunaArc design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#040404",
      "$description": "The main button is the canvas colour with a hairline border, not a light fill"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#040404",
      "$description": "Page, sections, footer (--main-color)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#141414",
      "$description": "The inset CTA band, testimonial cards, logo tiles, cart panel (--third-color)"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#242424",
      "$description": "Footer subscribe field"
    },
    "secondary": {
      "$type": "color",
      "$value": "#141414",
      "$description": ".button fill and its hover"
    },
    "secondary-hover": {
      "$type": "color",
      "$value": "#222222",
      "$description": "With secondary: .button fill and its hover"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Headlines, nav, buttons, metrics"

/* LunaArc 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-xs, p-lg */

@theme {
  /* Colors */
  --color-primary: #040404;
  --color-on-primary: #FFFFFF;
  --color-canvas: #040404;
  --color-surface-1: #141414;
  --color-surface-2: #242424;
  --color-secondary: #141414;
  --color-secondary-hover: #222222;
  --color-on-secondary: #FFFFFF;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFFB3;
  --color-ink-subtle: #FFFFFF99;
  --color-ink-faint: #FFFFFF80;
  --color-placeholder: #D9DAE2;
  --color-line: #FFFFFF26;
  --color-line-button: #FFFFFF1F;
  --color-line-field: #FFFFFF21;
  --color-on-media: #FFFFFF;
  --color-media-scrim: #00000040;
  --color-field: #242424;

  /* Fonts */
  --font-sans: "Instrument Sans", sans-serif;
  --font-instrument-sans: "Instrument Sans", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-wordmark: 230px;
  --text-display-wordmark--line-height: 1.2;
  --text-display-wordmark--letter-spacing: -1px;
  --text-display-wordmark--font-weight: 600;
  --text-display-metric: 110px;
  --text-display-metric--line-height: 0.8;
  --text-display-metric--letter-spacing: -0.5px;
  --text-display-metric--font-weight: 500;
  --text-display-metric-affix: 70px;
  --text-display-metric-affix--line-height: 0.8;
  --text-display-metric-affix--letter-spacing: -0.5px;
  --text-display-metric-affix--font-weight: 400;
  --text-headline-lg: 58px;
  --text-headline-lg--line-height: 1.1;
  --text-headline-lg--letter-spacing: 0px;

/* LunaArc 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: #040404; /* The main button is the canvas colour with a hairline border, not a light fill */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #040404; /* Page, sections, footer (--main-color) */
  --color-surface-1: #141414; /* The inset CTA band, testimonial cards, logo tiles, cart panel (--third-color) */
  --color-surface-2: #242424; /* Footer subscribe field */
  --color-secondary: #141414; /* .button fill and its hover */
  --color-secondary-hover: #222222; /* With secondary: .button fill and its hover */
  --color-on-secondary: #FFFFFF;
  --color-ink: #FFFFFF; /* Headlines, nav, buttons, metrics */
  --color-ink-muted: #FFFFFFB3; /* Paragraphs and dates */
  --color-ink-subtle: #FFFFFF99; /* Footer column titles (.footer-title) */
  --color-ink-faint: #FFFFFF80; /* The muted phrase inside headlines (.gray-text-color) */
  --color-placeholder: #D9DAE2; /* Contact-form placeholder (--body-text-color) */
  --color-line: #FFFFFF26; /* 1px dividers */
  --color-line-button: #FFFFFF1F; /* 1px border on the primary button and form inputs */
  --color-line-field: #FFFFFF21; /* 1px border on the primary button and form inputs */
  --color-on-media: #FFFFFF;
  --color-media-scrim: #00000040; /* Overlay on service and hero photos so white text reads */
  --color-field: #242424; /* Footer subscribe field */

  /* Fonts */
  --font-instrument-sans: "Instrument Sans", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-wordmark: 230px;
  --text-display-wordmark-font: var(--font-instrument-sans);
  --text-display-wordmark-weight: 600;
  --text-display-wordmark-line-height: 1.2;
  --text-display-wordmark-tracking: -1px;
  --text-display-metric: 110px;
  --text-display-metric-font: var(--font-instrument-sans);
  --text-display-metric-weight: 500;
  --text-display-metric-line-height: 0.8;
  --text-display-metric-tracking: -0.5px;
  --text-display-metric-affix: 70px;
  --text-display-metric-affix-font: var(--font-instrument-sans);
  --text-display-metric-affix-weight: 400;
  --text-display-metric-affix-line-height: 0.8;
  --text-display-metric-affix-tracking: -0.5px;
  --text-headline-lg: 58px;
  --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-wordmark

Instrument Sans · headline-lg

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 LunaArc style

More design systems like this

Archi

Vluna

Arcpark

Baltimore

Bring any of them to your AI tool