Nayla Design System

Get DESIGN.md Download View template Works with

Nayla is a crisp, monochrome studio site: a white page, black semibold Inter Tight, buttons with small 6px corners, and imagery that stays in black, white and soft pastels. It reads like a tidy portfolio rather than a loud agency, with big two-tone statements and a lot of white space between sections.

Four signatures make it recognisable:

The MENU badge. Top right, the word MENU is set four times around a circle with a thin + cross in the middle. It turns as you scroll and opens a full-screen white menu of 90px links, each with a small numbered circle beside it.
Centred-logo nav with social icons. A 95% white bar: X, Instagram, LinkedIn and Dribbble icons on the left, the Nayla wordmark centred, the badge on the right. There are no text nav links in the bar.
Two-tone statements. Lead paragraphs start in black and finish in grey: In the realm of Webflow templates, (black) Nayla takes the lead with designs favored by users. (#2C2C2C at 50%).
Square 6px buttons. In the hero a filled black Contact Us sits next to a 2px black outline All works ↗; elsewhere outline buttons stand alone. All have a 6px radius, never pills.

Nayla is light, with a black footer and a black cart drawer.

Colors

Surfaces

canvas#FFFFFF

Page, hero, full-screen menu

surface-1#F1F1F1

Testimonial cards (--gray-main)

surface-2#FAFAFA

The block that wipes across headings on reveal

field-ink#333333

Text typed into inputs

field#FFFFFF

inverse-canvas#000000

Footer and cart drawer (#090909 in the cart CSS)

Ink

on-primary#FFFFFF

Text on primary

ink#000000

Headlines, buttons, borders, icons

ink-muted#000000

Body text is full black, the same as ink

ink-soft#2C2C2C

Testimonial author names, small top labels

ink-subtle#2C2C2C · 50%

Grey second half of statements, author roles

inverse-ink#FFFFFF

Text on inverse-canvas

inverse-ink-muted#FFFFFF · 65%

Footer paragraphs (.white-paragraph)

Action

primary#000000

The filled button and the submit

Lines & effects

line#000000

2px borders on outline buttons, inputs and tags; the 2px rule under services

glass#FFFFFF · 95%

Fixed nav bar

inverse-line#FFFFFF · 20%

Cart border and footer rule

Typography

Inter Tight · display-menu

The quick brown fox jumps

Full-screen menu links (.text-line, capitalised). 90px · 600 · 0.9

Inter Tight · headline-lg

The quick brown fox jumps

Who we are, Our Work (.about-title, mix-blend-mode: soft-light). 70px · 600 · 1.1

Inter Tight · title-lg

The quick brown fox jumps

Blog card titles. 29px · 600 · 1.3

Inter Tight · body-lg

The quick brown fox jumps

Hero lead (We love user-focused design, thoughtfully crafted brands.). 24px · 600 · 1.5

Inter Tight · label

The quick brown fox jumps

Outline button labels. 17px · 600 · 1.18

Inter Tight · caption

The quick brown fox jumps

Input text. 15px · 500 · 1.3

Spacing & shape

Purpose	Value
Container	max 1200px, centred
Breakpoints	991px, 767px and 479px (max-width), plus min-width 768px and 1440px

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	15px
`md`	30px
`lg`	35px
`xl`	40px
`2xl`	80px
`3xl`	100px

Layout spacing

Token	Value	Preview
`gutter`	72px
`footer-top`	90px
`section`	100px
`nav-height`	120px
`hero-top`	200px

Border radius

sm6px

md12px

tag30px

pill50px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-2

Level 3surface-1

Motion

Headline reveal	Lines rise from y 100% / 200% with skewY 7° → 0°, settling to y 0% over 1100ms outQuint
Scroll fade-in	opacity 0 → 1, 1000ms outQuart; quicker 400ms ease fades on UI
Pop-in	scale 0.7 → 1, 500ms ease
Heading wipe	A #FAFAFA block slides off from translate(-100%)
Menu badge	Rotation, 500ms ease, and turning with scroll
Menu link roll	Label moves up one line inside an 87px mask
Button	Background colour 200ms cubic-bezier(.645, .045, .355, 1) / 300ms ease; press scale 0.95, 300ms outSine
Image hover	scale back to 1, 500ms outQuint; filter change 300ms ease
Hero slider	Slides swap with opacity

Do’s and don’ts

Keep the page #FFFFFF with #000000 Inter Tight weight 600 headlines and weight 500 body.
Pair a filled #000000 button with a 2px black outline button, both with a 6px radius.
Split statements into a black clause and a #2C2C2C 50% clause.
Use #F1F1F1 cards with a 12px radius for quotes; keep images square.
Close the page with the black footer.
Reveal headlines with the skewed line rise (1100ms outQuint).
Use pill-shaped buttons; only tags are rounded 30–50px.
Add colour to the UI or use the unused pastels #F3EAF7, #F0F5FF and #ECFCF4.
Add shadows to cards or buttons.
Use ink-subtle (#2C2C2C at 50%) below 16px or on #F1F1F1 for long text; it is for the second half of large statements and short roles only.
Put text nav links in the bar; navigation lives behind the MENU badge.
Use Oswald or a second family.

Example prompt

Any page in the Nayla style

Prompt

Build your page in the Nayla style. White #FFFFFF page, black #000000 text, font Inter Tight. Headlines weight 600: hero 76px line height 1.1, section titles 70px line height 1.1, short lines ending with a full stop. Body 18px weight 500, line height 1.3. Sections pad 100px top and bottom and 5% at the sides, content max 1200px. Buttons have a 6px radius: filled black with white 16px weight 600 text (49px tall, padding 15px 21px), or transparent with a 2px black border and a ↗ arrow (52px tall, padding 14px 20px). Write lead statements at 26px weight 600 with the second half in #2C2C2C at 50%. Quote cards are #F1F1F1 with a 12px radius and padding 40px 45px 20px. Images are square-cornered soft 3D renders on white. Fixed 95% white nav with social icons left, centred wordmark, a circular rotating MENU badge right. Black footer. No shadows.

# Nayla Design System

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

## Overview

Nayla is a crisp, monochrome studio site: a white page,
black semibold Inter Tight, buttons with small 6px
corners, and imagery that stays in black, white and soft
pastels. It reads like a tidy portfolio rather than a
loud agency, with big two-tone statements and a lot of

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page, hero, full-screen… |
| surface-1    | #F1F1F1     | Testimonial cards (--gr… |
| surface-2    | #FAFAFA     | The block that wipes ac… |
| field-ink    | #333333     | Text typed into inputs   |
| field        | #FFFFFF     |                          |
| inverse-can… | #000000     | Footer and cart drawer … |
| on-primary   | #FFFFFF     | Text on primary          |
| ink          | #000000     | Headlines, buttons, bor… |
| ink-muted    | #000000     | Body text is full black… |
| ink-soft     | #2C2C2C     | Testimonial author name… |
| ink-subtle   | #2C2C2C 50% | Grey second half of sta… |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| inverse-ink… | #FFFFFF 65% | Footer paragraphs (.whi… |
| primary      | #000000     | The filled button and t… |

## Typography

- display-menu: Inter Tight 90px / 600
- display-hero: Inter Tight 76px / 600
- headline-lg: Inter Tight 70px / 600
- headline-marquee: Inter Tight 57px / 600

{
  "$description": "Nayla design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "The filled button and the submit"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page, hero, full-screen menu"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F1F1F1",
      "$description": "Testimonial cards (--gray-main)"
    },
    "surface-2": {
      "$type": "color",
      "$value": "#FAFAFA",
      "$description": "The block that wipes across headings on reveal"
    },
    "ink": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Headlines, buttons, borders, icons"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Body text is full black, the same as ink"
    },
    "ink-soft": {
      "$type": "color",
      "$value": "#2C2C2C",
      "$description": "Testimonial author names, small top labels"
    },
    "ink-subtle": {
      "$type": "color",
      "$value": "#2C2C2C80",

/* Nayla 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: #000000;
  --color-on-primary: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F1F1F1;
  --color-surface-2: #FAFAFA;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-ink-soft: #2C2C2C;
  --color-ink-subtle: #2C2C2C80;
  --color-field-ink: #333333;
  --color-line: #000000;
  --color-glass: #FFFFFFF2;
  --color-field: #FFFFFF;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #FFFFFFA6;
  --color-inverse-line: #FFFFFF33;

  /* 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-menu: 90px;
  --text-display-menu--line-height: 0.9;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 600;
  --text-display-hero: 76px;
  --text-display-hero--line-height: 1.1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;
  --text-headline-lg: 70px;
  --text-headline-lg--line-height: 1.1;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 600;
  --text-headline-marquee: 57px;
  --text-headline-marquee--line-height: 1.4;
  --text-headline-marquee--letter-spacing: 0px;
  --text-headline-marquee--font-weight: 600;
  --text-headline-md: 50px;

/* Nayla 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: #000000; /* The filled button and the submit */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #FFFFFF; /* Page, hero, full-screen menu */
  --color-surface-1: #F1F1F1; /* Testimonial cards (--gray-main) */
  --color-surface-2: #FAFAFA; /* The block that wipes across headings on reveal */
  --color-ink: #000000; /* Headlines, buttons, borders, icons */
  --color-ink-muted: #000000; /* Body text is full black, the same as ink */
  --color-ink-soft: #2C2C2C; /* Testimonial author names, small top labels */
  --color-ink-subtle: #2C2C2C80; /* Grey second half of statements, author roles */
  --color-field-ink: #333333; /* Text typed into inputs */
  --color-line: #000000; /* 2px borders on outline buttons, inputs and tags; the 2px rule under services */
  --color-glass: #FFFFFFF2; /* Fixed nav bar */
  --color-field: #FFFFFF;
  --color-inverse-canvas: #000000; /* Footer and cart drawer (#090909 in the cart CSS) */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-ink-muted: #FFFFFFA6; /* Footer paragraphs (.white-paragraph) */
  --color-inverse-line: #FFFFFF33; /* Cart border and footer rule */

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

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-menu: 90px;
  --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-display-hero: 76px;
  --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-headline-lg: 70px;
  --text-headline-lg-font: var(--font-inter-tight);
  --text-headline-lg-weight: 600;
  --text-headline-lg-line-height: 1.1;
  --text-headline-lg-tracking: 0px;
  --text-headline-marquee: 57px;
  --text-headline-marquee-font: var(--font-inter-tight);
  --text-headline-marquee-weight: 600;
  --text-headline-marquee-line-height: 1.4;

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

Agency 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-menu

Inter Tight · headline-lg

Inter Tight · title-lg

Inter Tight · body-lg

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

More design systems like this

Mōno™

Omnera

Nuvin

Moon Studio

Bring any of them to your AI tool