Norma Design System

Get DESIGN.md Download View template Works with

Norma is a clean, corporate site for consulting and financial-services firms. It is bright and orderly: a white fixed header with small spaced capitals, a cornflower-to-turquoise gradient hero, and then calm white and pale blue-grey bands holding content in a 1200px grid. Everything is square-cut, and the cornflower blue #6F81FD ties it together.

Four signatures make it recognisable:

The gradient hero. A full-width band filled with linear-gradient(50deg, #6F81FD, #00DCE5), cornflower at the bottom left and turquoise at the top right, with a centred two-line Poppins 500 headline in white, a small spaced-capital eyebrow above it and a white outline button below.
Stepped-blue tiles. Directly under the hero, four equal full-width tiles step from light to dark blue: #7E8EFC, #6F81FD, #5F72FA, #485CF0. Each holds a thin white line icon, a 17px title and short centred white text.
Small spaced capitals everywhere. Nav links, buttons, eyebrows and labels are Poppins 11–13px in uppercase with 1–3px tracking. The LAYOUT 1 labels use the widest, 3px.
Square outline buttons. Buttons are transparent with a 2px cornflower (or white) border and no radius, and fill solid cornflower with white text on hover.

The logo is a spaced wordmark NOЯMA with a mirrored R. Norma is a light template with a dark charcoal footer.

Colors

Surfaces

canvas#FFFFFF

Page background, nav, cards, form panel

surface-1#F4F8FC

Pale blue-grey section bands (.section.gray)

surface-2#F7F7F7

Dropdown link hover, blockquote background

field-ink#313137

Input text; field labels, placeholders and select text

field-label#515157

Input text; field labels, placeholders and select text

inverse-canvas#212129

Footer

Ink

on-primary#FFFFFF

Text on the hover fill and on the tiles

ink#222222

Nav links, section titles

ink-strong#121217

Body default, dropdown links, blog titles

ink-muted#525A70

Paragraphs (p) on light backgrounds

ink-subtle#616167

LAYOUT N labels

inverse-ink#FFFFFF

Text on inverse-canvas

on-media#FFFFFF

Action

primary#6F81FD

Button border and text, hover fill, active nav link, eyebrows, italic links

primary-hover#6F81FD

accent#00DCE5

Turquoise end of the hero gradient

link-hover-line#CFCFCF

2px underline under a hovered nav link

Lines & effects

tile-1#7E8EFC

The four feature tiles, left to right

tile-2#6F81FD

tile-3#5F72FA

tile-4#485CF0

The four feature tiles, left to right

quote-ink#626270

Blockquote text

line#EDEDED

Dropdown borders and rows; input borders

line-strong#E1E1E1

With line: Dropdown borders and rows; input borders

nav-line#21242D · 10%

1px rule under the fixed nav

inverse-muted#FFFFFF · 76%

Footer paragraphs; footer dates and meta

inverse-subtle#B7B7C7

Footer paragraphs; footer dates and meta

inverse-line#FFFFFF · 15%

Footer frame and column dividers

overlay#6F81FD · 95%

Flat blue layer over the photo CTA band

Typography

Poppins · display-hero

The quick brown fox jumps

Hero headline, two centred lines, white. 40px · 500 · 1.3

Poppins · headline-lg

The quick brown fox jumps

Photo CTA band headline. 38px · 500 · 1.45

Poppins · title-lg

The quick brown fox jumps

Base h3. 24px · 500 · 1.5

Poppins · body

The quick brown fox jumps

Paragraphs (p) and tile text. 13px · 400 · 1.69

Times New Roman · caption

The quick brown fox jumps

Underlined italic links (Read more). 14px · 400 · 1.43

Poppins · label

The quick brown fox jumps

Nav links and buttons. 12px · 600 · 1.67 · 1px

Spacing & shape

Purpose	Value
Container	.container, max 1200px, centred, flexible
Section rhythm	.section is 120px top and bottom with 25px sides; 80px top and bottom at ≤991 and 20px sides at ≤767
Breakpoints	991px, 767px and 479px, plus a min-width: 768px rule set

Spacing scale

Token	Value	Preview
`hair`	5px
`xs`	10px
`sm`	15px
`md`	20px
`lg`	30px
`xl`	60px
`2xl`	100px

Layout spacing

Token	Value	Preview
`section-side`	25px
`form`	62px
`nav-height`	80px
`section`	120px

Border radius

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

Button, nav link, dropdown row	all 200ms (fill, colour, border, padding-left 15 → 20px)
Dropdown open	Arrow rotates, 300ms ease; panel fades opacity 0 → 1, 300ms ease
Hamburger	Lines move y ±6px and rotate, 300ms ease
Colour changes	Text, background and border colour, 300–500ms
Pop-in	scale 0 → 1, 300ms swingTo
Fade-up	opacity 0 → 1, y 30px → 0, 500ms

Do’s and don’ts

Open the page with the 50deg, #6F81FD → #00DCE5 gradient hero and white outline button.
Introduce section titles with a 12px cornflower eyebrow in uppercase with 1px tracking.
Keep buttons square and outlined (2px #6F81FD), 50px tall, padding 13px 20px, filling solid on hover.
Alternate white and #F4F8FC bands with 120px vertical padding.
Set paragraphs in Poppins 13px / 22px, #525A70.
Use 1px rules (#EDEDED, #E1E1E1) to separate rows and fields.
Round buttons, cards, inputs or images. Only avatars and social icons are circles.
Use white on #6F81FD for paragraphs; it is 3.4:1. Keep it to 12px 600 tracked capitals and 17px+ titles.
Use #6F81FD text on white for anything but labels, links and button text at 12px 600+; it is also 3.4:1.
Add warm colours or a second brand hue; turquoise only ends the gradient.
Use large or bold body text; paragraphs stay 13–14px.
Give cards an all-around shadow; the shadow is offset 31px 31px 44px -22px.
Add scroll-driven or long animations; Norma's motion is 200–500ms hover feedback.

Example prompt

Any page in the Norma style

Prompt

Build your page in the Norma style. Use a fixed white 80px header with a 1px rgba(33,36,45,0.1) bottom rule, a spaced wordmark on the left and uppercase Poppins 12px weight-600 links with 1px tracking in #222222, 27px apart; the active link is #6F81FD with a 2px underline. The hero is linear-gradient(50deg, #6F81FD, #00DCE5) with a centred white Poppins 40px / 52px weight-500 headline, a 13px uppercase eyebrow and a white 2px outline button. Under it, four full-width tiles in #7E8EFC, #6F81FD, #5F72FA and #485CF0 with white line icons, 17px titles and 13px / 22px text. Sections are 120px top and bottom, alternating #FFFFFF and #F4F8FC, each with a 12px uppercase #6F81FD eyebrow over a 34px / 40px weight-500 title. Paragraphs are Poppins 13px / 22px in #525A70. Buttons are square, transparent, 2px #6F81FD border, #6F81FD 12px uppercase text with 1px tracking, padding 13px 20px, 50px tall, and fill #6F81FD with white text on hover in 200ms. Cards are square with box-shadow 31px 31px 44px -22px rgba(103,117,130,0.3). Footer is #212129 with a 1px white-15% framed three-column grid. Container 1200px.

# Norma Design System

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

## Overview

Norma is a clean, corporate site for consulting and
financial-services firms. It is bright and orderly: a
white fixed header with small spaced capitals, a
cornflower-to-turquoise gradient hero, and then calm
white and pale blue-grey bands holding content in a

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background, nav, c… |
| surface-1    | #F4F8FC     | Pale blue-grey section … |
| surface-2    | #F7F7F7     | Dropdown link hover, bl… |
| field-ink    | #313137     | Input text; field label… |
| field-label  | #515157     | Input text; field label… |
| inverse-can… | #212129     | Footer                   |
| on-primary   | #FFFFFF     | Text on the hover fill … |
| ink          | #222222     | Nav links, section titl… |
| ink-strong   | #121217     | Body default, dropdown … |
| ink-muted    | #525A70     | Paragraphs (p) on light… |
| ink-subtle   | #616167     | LAYOUT N labels          |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| on-media     | #FFFFFF     |                          |
| primary      | #6F81FD     | Button border and text,… |

## Typography

- display-hero: Poppins 40px / 500
- headline-lg: Poppins 38px / 500
- headline-md: Poppins 34px / 500
- headline-sm: Poppins 32px / 500

{
  "$description": "Norma design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#6F81FD",
      "$description": "Button border and text, hover fill, active nav link, eyebrows, italic links"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#6F81FD"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on the hover fill and on the tiles"
    },
    "accent": {
      "$type": "color",
      "$value": "#00DCE5",
      "$description": "Turquoise end of the hero gradient"
    },
    "tile-1": {
      "$type": "color",
      "$value": "#7E8EFC",
      "$description": "The four feature tiles, left to right"
    },
    "tile-2": {
      "$type": "color",
      "$value": "#6F81FD"
    },
    "tile-3": {
      "$type": "color",
      "$value": "#5F72FA"
    },
    "tile-4": {
      "$type": "color",
      "$value": "#485CF0",
      "$description": "The four feature tiles, left to right"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background, nav, cards, form panel"
    },
    "surface-1": {

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

@theme {
  /* Colors */
  --color-primary: #6F81FD;
  --color-primary-hover: #6F81FD;
  --color-on-primary: #FFFFFF;
  --color-accent: #00DCE5;
  --color-tile-1: #7E8EFC;
  --color-tile-2: #6F81FD;
  --color-tile-3: #5F72FA;
  --color-tile-4: #485CF0;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F4F8FC;
  --color-surface-2: #F7F7F7;
  --color-ink: #222222;
  --color-ink-strong: #121217;
  --color-ink-muted: #525A70;
  --color-ink-subtle: #616167;
  --color-field-ink: #313137;
  --color-field-label: #515157;
  --color-quote-ink: #626270;
  --color-line: #EDEDED;
  --color-line-strong: #E1E1E1;
  --color-nav-line: #21242D1A;
  --color-link-hover-line: #CFCFCF;
  --color-inverse-canvas: #212129;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-muted: #FFFFFFC2;
  --color-inverse-subtle: #B7B7C7;
  --color-inverse-line: #FFFFFF26;
  --color-overlay: #6F81FDF2;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Poppins", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --font-times-new-roman: Times New Roman, serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 40px;
  --text-display-hero--line-height: 1.3;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 500;

/* Norma 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: #6F81FD; /* Button border and text, hover fill, active nav link, eyebrows, italic links */
  --color-primary-hover: #6F81FD;
  --color-on-primary: #FFFFFF; /* Text on the hover fill and on the tiles */
  --color-accent: #00DCE5; /* Turquoise end of the hero gradient */
  --color-tile-1: #7E8EFC; /* The four feature tiles, left to right */
  --color-tile-2: #6F81FD;
  --color-tile-3: #5F72FA;
  --color-tile-4: #485CF0; /* The four feature tiles, left to right */
  --color-canvas: #FFFFFF; /* Page background, nav, cards, form panel */
  --color-surface-1: #F4F8FC; /* Pale blue-grey section bands (.section.gray) */
  --color-surface-2: #F7F7F7; /* Dropdown link hover, blockquote background */
  --color-ink: #222222; /* Nav links, section titles */
  --color-ink-strong: #121217; /* Body default, dropdown links, blog titles */
  --color-ink-muted: #525A70; /* Paragraphs (p) on light backgrounds */
  --color-ink-subtle: #616167; /* LAYOUT N labels */
  --color-field-ink: #313137; /* Input text; field labels, placeholders and select text */
  --color-field-label: #515157; /* Input text; field labels, placeholders and select text */
  --color-quote-ink: #626270; /* Blockquote text */
  --color-line: #EDEDED; /* Dropdown borders and rows; input borders */
  --color-line-strong: #E1E1E1; /* With line: Dropdown borders and rows; input borders */
  --color-nav-line: #21242D1A; /* 1px rule under the fixed nav */
  --color-link-hover-line: #CFCFCF; /* 2px underline under a hovered nav link */
  --color-inverse-canvas: #212129; /* Footer */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-muted: #FFFFFFC2; /* Footer paragraphs; footer dates and meta */
  --color-inverse-subtle: #B7B7C7; /* Footer paragraphs; footer dates and meta */
  --color-inverse-line: #FFFFFF26; /* Footer frame and column dividers */
  --color-overlay: #6F81FDF2; /* Flat blue layer over the photo CTA band */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-poppins: "Poppins", sans-serif;
  --font-times-new-roman: Times New Roman, serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 40px;
  --text-display-hero-font: var(--font-poppins);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.3;
  --text-display-hero-tracking: 0px;
  --text-headline-lg: 38px;

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

Business 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

Poppins · display-hero

Poppins · headline-lg

Poppins · title-lg

Poppins · body

Times New Roman · caption

Poppins · label

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Norma style

More design systems like this

Vānguard

Protection X

Businezz X

Buskit

Bring any of them to your AI tool