Archi Design System

Get DESIGN.md Download View template Works with

Archi is a dark, architectural studio site that reads like a drawing board at night. The page is pure black, every word is uppercase Inter Tight in one pale lavender grey (#C7C3CF), and faint horizontal guide lines run across the whole page every 60px or so, like a ruled sheet. Colour comes only from rendered houses and interiors: green gardens, pink shrubs, warm wood floors, a yellow accent wall.

Four signatures make it recognisable:

Ruled-paper guide lines. Thin horizontal lines span the full width behind every section. Each is a gradient black 10% → #C7C3CF 50% → black 90% at 15% opacity, so it fades out at both edges and is brightest in the centre.
Everything uppercase, one colour. Body, headings, buttons and quotes are all text-transform: uppercase in ink #C7C3CF on #000000. There is no second text colour except a dimmer 70% and 60% of the same lavender.
The round call to action. The hero's only filled button is a 160px lavender disc with black GET IN TOUCH in two lines, not a pill.
Lavender project bands. Projects sit in wide #C7C3CF cards with a 20px radius: black uppercase text on the left, a rendered photo filling the right side edge to edge.

Archi is a dark-only design.

Colors

Surfaces

canvas#000000

Page background, menu overlay background

surface-1#81818B · 20%

Testimonial card body, footer subscribe field

surface-solid#1A1A1C

The 5px ring around testimonial avatars, matching the card colour

field#81818B · 20%

Footer subscribe field and its button wrapper

inverse-canvas#C7C3CF

Project cards: lavender band with black text and black 2px outlines

Ink

on-primary#000000

Text on primary

ink#C7C3CF

Headings, labels, buttons, outlines

ink-muted#C7C3CF

Body text

ink-subtle#C7C3CF · 70%

.gray-text, secondary words such as the role in ALEX GRANT, FOUNDER OF ARCHI

ink-faint#C7C3CF · 60%

Footer links at rest (they go to 100% on hover)

ink-bright#FFFFFF

Inline white links (.gray-link-2)

inverse-ink#000000

Text on inverse-canvas

Action

primary#C7C3CF

The round hero button, the subscribe arrow button, the form submit

primary-hover#C7C3CF

Lines & effects

line#FFFFFF · 15%

1px hairline borders

line-strong#C7C3CF

2px outlines on pill buttons, tags and the round button

placeholder#999999

Contact form placeholder

Typography

Inter Tight · display-hero

The quick brown fox jumps

Hero MIAMI'S / PREMIER / ARCHITECTS, one word per line. 120px · 600 · 1.1

Inter Tight · headline-md

The quick brown fox jumps

Section titles WHAT WE DO, WHAT THEY THINK, the founder quote. 48px · 600 · 1.1

Inter Tight · title-lg

The quick brown fox jumps

Service list rows. 37px · 600 · 1.1

Inter Tight · body-lg

The quick brown fox jumps

Section leads WITH OUR EXPERTISE, WE OFFER DIVERSE COLLABORATIONS. 20px · 500 · 1.4

Inter Tight · label

The quick brown fox jumps

Pill buttons, project categories, footer titles. 16px · 600 · 1.25

Inter Tight · caption

The quick brown fox jumps

Category tags on blog posts. 14px · 600 · 1.43

Spacing & shape

Purpose	Value
Container	.container max 1200px, centred
Section rhythm	150px top and bottom (.section), 80px at ≤991 and 50px at ≤767
Breakpoints	991px (tablet), 767px (landscape phone), 479px (phone), plus min-width steps at 768, 1280 and 1440px

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	16px
`md`	40px
`lg`	50px
`xl`	100px

Layout spacing

Token	Value	Preview
`tag-gap`	30px
`section-half`	50px
`footer-top`	60px
`nav-height`	100px
`hero-bottom`	130px
`section`	150px
`hero-top`	160px

Border radius

sm8px

lg20px

pill30px

field100px

full9999px

Motion

Line rise (headings)	Text moves from y 200% to 0% inside a mask, 1100ms outQuint; a parallel skew from 7° to 0°
Fade in on scroll	opacity 0 → 1, 1000ms or 1250ms outQuart
Slide in	y ±100px → 0px, 1000ms outQuart
Page load	Page load triggers run the hero entrance with the same rise and fade
Cursor parallax	Images shift x/y ±6px on mouse move (500ms)
Round button	Inner disc scales to 0.8 (300ms outQuad) and back to 1 (300ms ease)
Menu open	Overlay fades in (opacity, 500ms) and resizes (size, 500ms); links roll in their 74px masks
Hover colour and filter	background-color 300ms ease; image filter 300ms ease
CSS transitions	all 0.3s on links and cards; background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) on buttons
Marquee	Scrolling-in-view scrub on the 100px text line

Do’s and don’ts

Set every text element in Inter Tight uppercase, in ink #C7C3CF on canvas #000000.
Open each section with the centred outlined tag (● NAME), a 48px weight-600 title and a 20px lead.
Use 2px outlined pills (30px radius, 48px tall) for actions, and keep the 160px lavender circle for the one main call to action.
Put projects in lavender #C7C3CF cards with black text, a 20px radius and the image flush right.
Run the faint horizontal guide lines (lavender centre at 15% opacity, black at both ends) behind the page.
Fade large photos into the black canvas at their bottom edge.
Keep footer links at 60% lavender and raise them to 100% on hover.
Add shadows, blur, or a second accent colour. The unused green #BFEA88 is not part of the design.
Use white for headings or body copy. White is only for small inline links.
Add negative letter spacing or lowercase text.
Use filled rectangular buttons, except the 8px-radius contact submit.
Round images beyond 20px or leave them square on the page.
Speed entrances up below 1000ms or add bounce; the motion is slow and eased out.

Example prompt

Any page in the Archi style

Prompt

Build your page in the Archi style. Use a #000000 background and Inter Tight weight 500, uppercase, 0 letter spacing, in #C7C3CF for all text (paragraphs 17px, line height 1.3). Draw faint full-width horizontal lines about every 60px: a gradient black 10% → #C7C3CF 50% → black 90% at 15% opacity. Open each section with a centred outlined pill tag (2px #C7C3CF border, 30px radius, a 10px dot and a 15px weight-600 word), then a 48px weight-600 title and a 20px lead. Containers are 1200px with 5% side padding and 150px section padding. Buttons are transparent pills with a 2px outline, 30px radius, 48px tall, padding 12px 23px, 16px weight 600 and a small ↗. The hero call to action is a 160px #C7C3CF circle with black 19px text and 1px tracking. Put projects in #C7C3CF cards with black text, a 20px radius and the photo flush right (1.2fr / 1fr). Use photoreal renders of modern houses and warm interiors with 20px corners that fade to black at the bottom. No shadows, no accent colours. Animate entrances with a rise from y 200% in a mask, 1100ms outQuint, and fades of 1000ms outQuart.

# Archi Design System

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

## Overview

Archi is a dark, architectural studio site that reads
like a drawing board at night. The page is pure black,
every word is uppercase Inter Tight in one pale lavender
grey (#C7C3CF), and faint horizontal guide lines run
across the whole page every 60px or so, like a ruled

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #000000     | Page background, menu o… |
| surface-1    | #81818B 20% | Testimonial card body, … |
| surface-sol… | #1A1A1C     | The 5px ring around tes… |
| field        | #81818B 20% | Footer subscribe field … |
| inverse-can… | #C7C3CF     | Project cards: lavender… |
| on-primary   | #000000     | Text on primary          |
| ink          | #C7C3CF     | Headings, labels, butto… |
| ink-muted    | #C7C3CF     | Body text                |
| ink-subtle   | #C7C3CF 70% | .gray-text, secondary w… |
| ink-faint    | #C7C3CF 60% | Footer links at rest (t… |
| ink-bright   | #FFFFFF     | Inline white links (.gr… |
| inverse-ink  | #000000     | Text on inverse-canvas   |
| primary      | #C7C3CF     | The round hero button, … |
| primary-hov… | #C7C3CF     |                          |

## Typography

- display-hero: Inter Tight 120px / 600
- display-marquee: Inter Tight 100px / 500
- display-menu: Inter Tight 80px / 600
- headline-md: Inter Tight 48px / 600

{
  "$description": "Archi design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#C7C3CF",
      "$description": "The round hero button, the subscribe arrow button, the form submit"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#C7C3CF"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Page background, menu overlay background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#81818B33",
      "$description": "Testimonial card body, footer subscribe field"
    },
    "surface-solid": {
      "$type": "color",
      "$value": "#1A1A1C",
      "$description": "The 5px ring around testimonial avatars, matching the card colour"
    },
    "field": {
      "$type": "color",
      "$value": "#81818B33",
      "$description": "Footer subscribe field and its button wrapper"
    },
    "ink": {
      "$type": "color",
      "$value": "#C7C3CF",
      "$description": "Headings, labels, buttons, outlines"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#C7C3CF",
      "$description": "Body text"

/* Archi 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-title-lg, rounded-lg, p-lg */

@theme {
  /* Colors */
  --color-primary: #C7C3CF;
  --color-primary-hover: #C7C3CF;
  --color-on-primary: #000000;
  --color-canvas: #000000;
  --color-surface-1: #81818B33;
  --color-surface-solid: #1A1A1C;
  --color-field: #81818B33;
  --color-ink: #C7C3CF;
  --color-ink-muted: #C7C3CF;
  --color-ink-subtle: #C7C3CFB3;
  --color-ink-faint: #C7C3CF99;
  --color-ink-bright: #FFFFFF;
  --color-line: #FFFFFF26;
  --color-line-strong: #C7C3CF;
  --color-inverse-canvas: #C7C3CF;
  --color-inverse-ink: #000000;
  --color-placeholder: #999999;

  /* Fonts */
  --font-sans: "Inter Tight", sans-serif;
  --font-inter-tight: "Inter Tight", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 120px;
  --text-display-hero--line-height: 1.1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;
  --text-display-marquee: 100px;
  --text-display-marquee--line-height: 1.4;
  --text-display-marquee--letter-spacing: 0px;
  --text-display-marquee--font-weight: 500;
  --text-display-menu: 80px;
  --text-display-menu--line-height: 0.9;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 600;
  --text-headline-md: 48px;
  --text-headline-md--line-height: 1.1;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 600;
  --text-headline-sm: 44px;

/* Archi 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: #C7C3CF; /* The round hero button, the subscribe arrow button, the form submit */
  --color-primary-hover: #C7C3CF;
  --color-on-primary: #000000; /* Text on primary */
  --color-canvas: #000000; /* Page background, menu overlay background */
  --color-surface-1: #81818B33; /* Testimonial card body, footer subscribe field */
  --color-surface-solid: #1A1A1C; /* The 5px ring around testimonial avatars, matching the card colour */
  --color-field: #81818B33; /* Footer subscribe field and its button wrapper */
  --color-ink: #C7C3CF; /* Headings, labels, buttons, outlines */
  --color-ink-muted: #C7C3CF; /* Body text */
  --color-ink-subtle: #C7C3CFB3; /* .gray-text, secondary words such as the role in ALEX GRANT, FOUNDER OF ARCHI */
  --color-ink-faint: #C7C3CF99; /* Footer links at rest (they go to 100% on hover) */
  --color-ink-bright: #FFFFFF; /* Inline white links (.gray-link-2) */
  --color-line: #FFFFFF26; /* 1px hairline borders */
  --color-line-strong: #C7C3CF; /* 2px outlines on pill buttons, tags and the round button */
  --color-inverse-canvas: #C7C3CF; /* Project cards: lavender band with black text and black 2px outlines */
  --color-inverse-ink: #000000; /* Text on inverse-canvas */
  --color-placeholder: #999999; /* Contact form placeholder */

  /* Fonts */
  --font-inter-tight: "Inter Tight", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 120px;
  --text-display-hero-font: var(--font-inter-tight);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 1.1;
  --text-display-hero-tracking: 0px;
  --text-display-marquee: 100px;
  --text-display-marquee-font: var(--font-inter-tight);
  --text-display-marquee-weight: 500;
  --text-display-marquee-line-height: 1.4;
  --text-display-marquee-tracking: 0px;
  --text-display-menu: 80px;
  --text-display-menu-font: var(--font-inter-tight);
  --text-display-menu-weight: 600;
  --text-display-menu-line-height: 0.9;
  --text-display-menu-tracking: 0px;
  --text-headline-md: 48px;
  --text-headline-md-font: var(--font-inter-tight);
  --text-headline-md-weight: 600;
  --text-headline-md-line-height: 1.1;

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

Inter Tight · display-hero

Inter Tight · headline-md

Inter Tight · title-lg

Inter Tight · body-lg

Inter Tight · label

Inter Tight · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Archi style

More design systems like this

LunaArc

Vluna

Arcpark

Baltimore

Bring any of them to your AI tool