Nordlys Design System

Get DESIGN.md Download View template Works with

Nordlys website template preview detail 2

Nordlys website template preview detail 3

Nordlys is a pure-black template for AI compute and data-centre companies, styled like a control room in the Arctic. The page is #000000, the type is light Inter Tight with tight tracking, every label is wide-tracked Geist Mono, and the only colour is violet light: a ribbed "silk through fluted glass" shader in the hero and preview images, thin violet glows and progress lines. Everything is ruled with faint hairlines and nearly square.

Four signatures make it recognisable:

Violet only as light. #6E4BFF and lilac #C9BDFF never fill a button or panel (only the style-guide colour swatches show them solid); they appear as the shader, 8px glows, gradient lines and small lilac counts. The style-guide page says it outright: "Violet appears only as light: the shader, glows and hover lines."
Split buttons with an arrow cell. The action buttons are 38px, 2px-radius blocks: ■ PLAN CAPACITY in mono plus a separate square cell holding → (the MENU button is the exception: a label and a = icon, no arrow cell). On hover a fill wipes across and the arrow cell opens.
Coordinates and counters in mono. 69.6492° N — ARCTIC COMPUTE beside the logo, a vertical scroll counter (000, 022, 045, 070) on the right edge with a violet line, two-digit indexes (05) before card titles, and lilac superscript counts after section titles (Pricing 03).
Two-tone headlines. The H1 runs in ink, then its second line drops to grey: An AI-infrastructure template, / cooled to 69° N.

Nordlys is dark-only.

Colors

Surfaces

canvas#000000

Page background, true black

surface-1#0A0A0A

Preview frames, tiles behind images

Ink

on-primary#000000

Text on primary

ink#F3F3F3

Headlines, titles, values; the light button fill

ink-muted#A6A6A6

Body copy, leads, mono labels, the grey half of headlines

ink-subtle#8A8A8A

Secondary meta

Action

primary#F3F3F3

Light split button

primary-hover#000000

accent#6E4BFF

Shader light, 0 0 8px glows at 60%, the scroll-progress line

accent-light#C9BDFF

Superscript section counts, gradient end, 35% inset ring on highlighted chips

accent-ring#C9BDFF · 35%

success#7FD4A8

One status dot

Lines & effects

line#F3F3F3 · 12%

All rules and card rings (1px borders and inset 0 0 0 1px)

line-strong#F3F3F3 · 30%

Ring on secondary and menu buttons

ghost#F3F3F3 · 5%

Menu button fill

glass#0E0B18 · 78%

Overlay menu panel

scrim#000000 · 45%

Dimming over imagery

Typography

Inter Tight · display-hero

The quick brown fox jumps

H1, second line in ink-muted. 66px · 400 · 0.96 · -3.31px

Inter Tight · headline-lg

The quick brown fox jumps

16 uses lower on the page, most likely the closing CTA Start with Home 01. 53px · 400 · 0.96 · -2.13px

Inter Tight · title-md

The quick brown fox jumps

Mid-size titles (14 uses), lower on the page than the screenshots reach. 20px · 400 · 1.15 · -0.6px

Inter Tight · body

The quick brown fox jumps

Hero lead and section copy in ink-muted. 16px · 400 · 1.5 · 0.32px

Inter Tight · label

The quick brown fox jumps

Stat values 24, GSAP · SVG, 1920 → 375. 14px · 500 · 1.5 · 0.32px

Inter Tight · caption

The quick brown fox jumps

Small copy. 14px · 400 · 1.5 · 0.32px

Spacing & shape

Purpose	Value
Grid	12 columns with a 24px gap for page structure; preview cards are 4 columns with a 22px gap; the colour swatches are 5 columns with an 8px gap; split rows are 2 columns with a 24px gap
Section rhythm	201.6px (14vw) top and bottom on the first content section, then 0 top and 201.6px bottom on the following sec-b sections; the hero is 120px top and 56px bottom and fills the 900px viewport; the CTA has 144px bottom padding; the footer 25px
Section header	a full-width line rule, then the headline-md title with a lilac superscript count on the left and a mono descriptor (THREE LAYOUTS, ABOUT AND HIRING) on the right
Breakpoints	Webflow defaults, 991px, 767px and 479px

Spacing scale

Token	Value	Preview
`hair`	1px
`xs`	8px
`sm`	12px
`md`	22px
`lg`	24px

Layout spacing

Token	Value	Preview
`column-gap`	24px
`gutter`	32px
`hero-bottom`	56px
`nav`	65px
`hero-top`	120px
`cta-bottom`	144px
`section`	202px

Border radius

xs2px

lg14px

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

Headline blur-in	SplitText; filter blur to sharp, 0.8s cubic-bezier(0.16, 1, 0.3, 1), with opacity 0.4s and transform 0.6s on the same curve
Entrance	power4.out, 1.6s
Cursor follow	x / y with power3.out, 1.4s (shader light and hover elements)
Drifting particles	Elements drift x, y (±140px), rotation (±10°) and opacity (0.27–0.84) on sine.inOut loops of 6.5–12s
Blink	opacity → 0.25 with steps, 0.8s (status and cursor dots)
Parallax	ScrollTrigger top bottom → bottom top, scrubbed
Nav state	Toggles after 20px of scroll
Button wipe	background-size 0.6s, color 0.4s, same curve
Card hover	box-shadow 0.5s, filter 0.5s, transform 0.6–0.7s on the curve; links color 0.3s

Do’s and don’ts

Use true black #000000 for the page and #F3F3F3 for text, with #A6A6A6 for body and the grey half of headlines.
Set headlines in Inter Tight 400 with about −5% tracking; never bold.
Set every label in Geist Mono 12px uppercase with +1.2px tracking.
Build buttons as 38px, 2px-radius split blocks: ■ LABEL plus a square → cell, with a fill wipe on hover over 0.6s.
Rule everything with 1px #F3F3F3 at 12%, and keep images and cards square.
Use violet #6E4BFF only as light: shader, 8px glows, gradient lines and lilac #C9BDFF counts.
Fill buttons, cards or sections with violet or lilac.
Round anything beyond 2px, except the 14px overlay menu.
Use pure #FFFFFF text or a second sans or serif.
Add drop shadows to content; the only deep shadow belongs to the overlay menu.
Use mono larger than 12px for labels, or in lowercase for button text.
Animate with bounce or overshoot; use cubic-bezier(0.16, 1, 0.3, 1) throughout.

Example prompt

Any page in the Nordlys style

Prompt

Build your page in the Nordlys style. Background #000000, text #F3F3F3, body Inter Tight 16px / 1.5 / +0.32px in #A6A6A6. Headlines Inter Tight weight 400: hero 66px (4.6vw) line height 0.96 tracking −3.3px with the second line in #A6A6A6; section titles 37px (2.6vw) with a lilac #C9BDFF Geist Mono superscript count. All labels Geist Mono 12px uppercase, +1.2px tracking. Side padding 2.2vw, section padding 14vw, 12-column grid with 24px gaps. Rule everything with 1px rgba(243,243,243,0.12) and keep cards and images square. Buttons: 38px, 2px radius, "■ LABEL" in Geist Mono plus a square → cell; primary #F3F3F3 with black text, secondary black at 20% with a 30% ring; on hover a fill wipes across (background-size 0.6s cubic-bezier(0.16,1,0.3,1)). Violet #6E4BFF appears only as light: a ribbed shader, 0 0 8px glows and 90deg #6E4BFF → #C9BDFF lines. Headlines blur in over 0.8s on the same curve.

# Nordlys Design System

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

## Overview

Nordlys is a pure-black template for AI compute and
data-centre companies, styled like a control room in the
Arctic. The page is #000000, the type is light Inter
Tight with tight tracking, every label is wide-tracked
Geist Mono, and the only colour is violet light: a

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #000000     | Page background, true b… |
| surface-1    | #0A0A0A     | Preview frames, tiles b… |
| on-primary   | #000000     | Text on primary          |
| ink          | #F3F3F3     | Headlines, titles, valu… |
| ink-muted    | #A6A6A6     | Body copy, leads, mono … |
| ink-subtle   | #8A8A8A     | Secondary meta           |
| primary      | #F3F3F3     | Light split button       |
| primary-hov… | #000000     |                          |
| accent       | #6E4BFF     | Shader light, 0 0 8px g… |
| accent-light | #C9BDFF     | Superscript section cou… |
| accent-ring  | #C9BDFF 35% |                          |
| success      | #7FD4A8     | One status dot           |
| line         | #F3F3F3 12% | All rules and card ring… |
| line-strong  | #F3F3F3 30% | Ring on secondary and m… |

## Typography

- display-hero: Inter Tight 66px / 400
- headline-lg: Inter Tight 53px / 400
- headline-md: Inter Tight 37px / 400
- headline-sm: Inter Tight 35px / 500

{
  "$description": "Nordlys design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#F3F3F3",
      "$description": "Light split button"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#000000"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Page background, true black"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#0A0A0A",
      "$description": "Preview frames, tiles behind images"
    },
    "ink": {
      "$type": "color",
      "$value": "#F3F3F3",
      "$description": "Headlines, titles, values; the light button fill"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#A6A6A6",
      "$description": "Body copy, leads, mono labels, the grey half of headlines"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#8A8A8A",
      "$description": "Secondary meta"
    },
    "line": {
      "$type": "color",
      "$value": "#F3F3F31F",
      "$description": "All rules and card rings (1px borders and inset 0 0 0 1px)"

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

@theme {
  /* Colors */
  --color-primary: #F3F3F3;
  --color-primary-hover: #000000;
  --color-on-primary: #000000;
  --color-canvas: #000000;
  --color-surface-1: #0A0A0A;
  --color-ink: #F3F3F3;
  --color-ink-muted: #A6A6A6;
  --color-ink-subtle: #8A8A8A;
  --color-line: #F3F3F31F;
  --color-line-strong: #F3F3F34D;
  --color-accent: #6E4BFF;
  --color-accent-light: #C9BDFF;
  --color-accent-ring: #C9BDFF59;
  --color-ghost: #F3F3F30D;
  --color-glass: #0E0B18C7;
  --color-scrim: #00000073;
  --color-success: #7FD4A8;

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

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 66px;
  --text-display-hero--line-height: 0.96;
  --text-display-hero--letter-spacing: -3.31px;
  --text-display-hero--font-weight: 400;
  --text-headline-lg: 53px;
  --text-headline-lg--line-height: 0.96;
  --text-headline-lg--letter-spacing: -2.13px;
  --text-headline-lg--font-weight: 400;
  --text-headline-md: 37px;
  --text-headline-md--line-height: 1.0;
  --text-headline-md--letter-spacing: -1.5px;
  --text-headline-md--font-weight: 400;
  --text-headline-sm: 35px;
  --text-headline-sm--line-height: 1.2;
  --text-headline-sm--letter-spacing: -1.38px;
  --text-headline-sm--font-weight: 500;

/* Nordlys 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: #F3F3F3; /* Light split button */
  --color-primary-hover: #000000;
  --color-on-primary: #000000; /* Text on primary */
  --color-canvas: #000000; /* Page background, true black */
  --color-surface-1: #0A0A0A; /* Preview frames, tiles behind images */
  --color-ink: #F3F3F3; /* Headlines, titles, values; the light button fill */
  --color-ink-muted: #A6A6A6; /* Body copy, leads, mono labels, the grey half of headlines */
  --color-ink-subtle: #8A8A8A; /* Secondary meta */
  --color-line: #F3F3F31F; /* All rules and card rings (1px borders and inset 0 0 0 1px) */
  --color-line-strong: #F3F3F34D; /* Ring on secondary and menu buttons */
  --color-accent: #6E4BFF; /* Shader light, 0 0 8px glows at 60%, the scroll-progress line */
  --color-accent-light: #C9BDFF; /* Superscript section counts, gradient end, 35% inset ring on highlighted chips */
  --color-accent-ring: #C9BDFF59;
  --color-ghost: #F3F3F30D; /* Menu button fill */
  --color-glass: #0E0B18C7; /* Overlay menu panel */
  --color-scrim: #00000073; /* Dimming over imagery */
  --color-success: #7FD4A8; /* One status dot */

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

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 66px;
  --text-display-hero-font: var(--font-inter-tight);
  --text-display-hero-weight: 400;
  --text-display-hero-line-height: 0.96;
  --text-display-hero-tracking: -3.31px;
  --text-headline-lg: 53px;
  --text-headline-lg-font: var(--font-inter-tight);
  --text-headline-lg-weight: 400;
  --text-headline-lg-line-height: 0.96;
  --text-headline-lg-tracking: -2.13px;
  --text-headline-md: 37px;
  --text-headline-md-font: var(--font-inter-tight);
  --text-headline-md-weight: 400;
  --text-headline-md-line-height: 1.0;
  --text-headline-md-tracking: -1.5px;
  --text-headline-sm: 35px;
  --text-headline-sm-font: var(--font-inter-tight);
  --text-headline-sm-weight: 500;

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

Tech 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-lg

Inter Tight · title-md

Inter Tight · body

Inter Tight · label

Inter Tight · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Nordlys style

More design systems like this

Appify

Dele

Enterprise X

Invest X

Bring any of them to your AI tool