Darkly Design System

Get DESIGN.md Download View template Works with

Darkly website template preview detail 2

Darkly website template preview detail 3

Darkly is a calm, dark agency template. The whole site sits on one deep slate-teal (#264653), with white text everywhere. Headlines are a high-contrast serif, Playfair Display, set large; labels, buttons and navigation switch to a bold geometric sans, DM Sans 700. Everything is square: buttons, frames, tabs and form fields have no radius. The only soft shapes are some photos, which are cut into organic blobs and circles.

The live preview's home page is a showcase: a hero, then two-column grids of framed page screenshots (Homepages, Inner Pages), each under a small square tab. The thumbnails show the real template pages, and they share the same system.

Four signatures make it recognisable:

Serif on slate. Playfair Display headlines in white on #264653: You deserve a stunning website at 110px weight 700, section titles at 50px weight 500. In the hero, a leaf photo shows through part of the letters (website).
Square, hairline UI. Buttons are 0px-radius boxes: either a petrol-teal fill (#016576) or a transparent box with a 1px white-20% border. Frames and dividers are 1px white at 15%.
Blob-masked photos. Many inner-page hero photos are cropped into soft organic blobs or circles (blog and project images stay rectangular), often with a darker blob shape sitting behind them.
The social rail. A thin column at the left edge of the hero holds stacked square icon cells (Facebook, Twitter, Instagram, phone, mail), each about 50px, divided by hairlines.

Darkly is a dark-only design.

Colors

Surfaces

canvas#264653

Page background (--dark-slate-grey-2), also the fixed nav

surface-1#FFFFFF · 15%

The one raised fill measured on the page; over the canvas it reads as #47626D

field#264653

Inputs are transparent on the canvas

Ink

on-primary#FFFFFF

Text on primary

ink#FFFFFF

Headlines, labels, links

ink-muted#FFFFFF

Body copy

Action

primary#016576

The filled button (View on Webflow, Subscribe, Contact Us in the thumbnails), --dark-slate-grey-3

primary-hover#FFFFFF

Button hover: white fill with #264653 text (.button:hover)

link-hover#FFFFFF · 50%

Dropdown links on hover

Lines & effects

nav-hover#888888

Typography

Playfair Display · display-hero

The quick brown fox jumps

Home hero You deserve a stunning website. 110px · 700 · 1.0

Playfair Display · headline-lg

The quick brown fox jumps

Section titles (.section-title): Homepages, Inner Pages, Create stunning websites with Darkly. 50px · 500 · 1.1

Playfair Display · title-lg

The quick brown fox jumps

The footer call-to-action title (.footer-title-button). 30px · 600 · 1.17

Playfair Display · body-lg

The quick brown fox jumps

Paragraphs (p), Playfair Display. 18px · 500 · 1.44

Playfair Display · label-serif

The quick brown fox jumps

Footer links (Playfair Display). 16px · 600 · 1.25

DM Sans · eyebrow

The quick brown fox jumps

DM Sans kicker above a title: Select yours, Build your, Darkly - UI Kit Template. 18px · 700 · 1.11

Spacing & shape

Purpose	Value
Container	max 1200px, centred (.container)
Section rhythm	.section pads 100px top and bottom (60px at ≤767px) with a 1px line bottom border
Breakpoints	991px, 767px and 479px (Webflow defaults), plus a few min-width: 768px rules

Spacing scale

Token	Value	Preview
`xs`	7px
`sm`	15px
`md`	20px
`lg`	30px
`xl`	40px
`2xl`	60px

Layout spacing

Token	Value	Preview
`grid-gap`	30px
`rail`	50px
`section`	100px
`hero-bottom`	120px
`hero-top`	160px

Border radius

full9999px

Motion

Fade-up on scroll	opacity 0 → 1 and move to y 0, 1000ms outQuart (scroll-into-view)
Dropdown open / close	Opacity 300ms ease
Button hover	Background and text colour, all 200ms
Nav and footer link hover	Colour or opacity, 200ms

Do’s and don’ts

Keep every page on canvas #264653 with white text, including body copy.
Set headlines and paragraphs in Playfair Display; keep DM Sans 700 for nav, buttons, tabs and kickers.
Open sections with a DM Sans eyebrow and a centred headline-lg (50px/500) title.
Use square buttons: #016576 fill or a 1px white-20% outline, both 0px radius, 17px 20px padding.
Separate sections and frame content with 1px white-15% hairlines.
Crop feature photos into blobs or circles, and keep everything else square.
Round buttons, inputs or frames.
Add the unused CSS colours (#F64D52 red, #2E856E green) as accents.
Use grey body text; Darkly's paragraphs are full white.
Add drop shadows, gradients or glass effects.
Set headlines in DM Sans or paragraphs in a sans; the serif is the voice.
Use nav-hover #888888 (2.8:1 on the canvas) or link-hover white 50% (3.9:1) for resting text. They are brief hover states on 16–17px bold links only.

Example prompt

Any page in the Darkly style

Prompt

Build your page in the Darkly style. Use a #264653 background with white text everywhere, including paragraphs. Headlines are Playfair Display: hero 110px weight 700 line height 1.0, section titles 50px weight 500 line height 1.1; paragraphs are Playfair Display 18px weight 500 line height 26px. Nav, buttons and small labels are DM Sans 700 (17px nav, 16px buttons, 18px kickers). Open each section with a centred DM Sans kicker and a Playfair title. Buttons are square (0px radius, 17px 20px padding): a #016576 fill or a transparent box with a 1px rgba(255,255,255,0.2) border, both turning white with #264653 text on hover in 200ms. Use 1px rgba(255,255,255,0.15) hairlines for dividers and frames, a 1200px container, 100px section padding, and natural team photos cropped into blobs or circles. No shadows, no rounded UI.

# Darkly Design System

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

## Overview

Darkly is a calm, dark agency template. The whole site
sits on one deep slate-teal (#264653), with white text
everywhere. Headlines are a high-contrast serif,
Playfair Display, set large; labels, buttons and
navigation switch to a bold geometric sans, DM Sans 700.

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #264653     | Page background (--dark… |
| surface-1    | #FFFFFF 15% | The one raised fill mea… |
| field        | #264653     | Inputs are transparent … |
| on-primary   | #FFFFFF     | Text on primary          |
| ink          | #FFFFFF     | Headlines, labels, links |
| ink-muted    | #FFFFFF     | Body copy                |
| primary      | #016576     | The filled button (View… |
| primary-hov… | #FFFFFF     | Button hover: white fil… |
| link-hover   | #FFFFFF 50% | Dropdown links on hover  |
| nav-hover    | #888888     | Top nav links on hover   |
| line         | #FFFFFF 15% | Nav bottom border, hero… |
| line-strong  | #FFFFFF 20% | The outline button bord… |
| line-solid   | #4D616C     | Borders of the square p… |

## Typography

- display-hero: Playfair Display 110px / 700
- display-page: Playfair Display 80px / 500
- headline-lg: Playfair Display 50px / 500
- headline-md: Playfair Display 32px / 700

{
  "$description": "Darkly design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#016576",
      "$description": "The filled button (View on Webflow, Subscribe, Contact Us in the thumbnails), --dark-slate-grey-3"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Button hover: white fill with #264653 text (.button:hover)"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#264653",
      "$description": "Page background (--dark-slate-grey-2), also the fixed nav"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFFFFF26",
      "$description": "The one raised fill measured on the page; over the canvas it reads as #47626D"
    },
    "ink": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Headlines, labels, links"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Body copy"
    },
    "link-hover": {
      "$type": "color",
      "$value": "#FFFFFF80",
      "$description": "Dropdown links on hover"
    },
    "nav-hover": {
      "$type": "color",
      "$value": "#888888",

/* Darkly 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: #016576;
  --color-primary-hover: #FFFFFF;
  --color-on-primary: #FFFFFF;
  --color-canvas: #264653;
  --color-surface-1: #FFFFFF26;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFF;
  --color-link-hover: #FFFFFF80;
  --color-nav-hover: #888888;
  --color-line: #FFFFFF26;
  --color-line-strong: #FFFFFF33;
  --color-line-solid: #4D616C;
  --color-field: #264653;

  /* Fonts */
  --font-sans: "Playfair Display", serif;
  --font-playfair-display: "Playfair Display", serif;
  --font-dm-sans: "DM Sans", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 110px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-display-page: 80px;
  --text-display-page--line-height: 1.0;
  --text-display-page--letter-spacing: 0px;
  --text-display-page--font-weight: 500;
  --text-headline-lg: 50px;
  --text-headline-lg--line-height: 1.1;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 500;
  --text-headline-md: 32px;
  --text-headline-md--line-height: 1.13;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 700;
  --text-title-lg: 30px;
  --text-title-lg--line-height: 1.17;
  --text-title-lg--letter-spacing: 0px;
  --text-title-lg--font-weight: 600;

/* Darkly 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: #016576; /* The filled button (View on Webflow, Subscribe, Contact Us in the thumbnails), --dark-slate-grey-3 */
  --color-primary-hover: #FFFFFF; /* Button hover: white fill with #264653 text (.button:hover) */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-canvas: #264653; /* Page background (--dark-slate-grey-2), also the fixed nav */
  --color-surface-1: #FFFFFF26; /* The one raised fill measured on the page; over the canvas it reads as #47626D */
  --color-ink: #FFFFFF; /* Headlines, labels, links */
  --color-ink-muted: #FFFFFF; /* Body copy */
  --color-link-hover: #FFFFFF80; /* Dropdown links on hover */
  --color-nav-hover: #888888; /* Top nav links on hover */
  --color-line: #FFFFFF26; /* Nav bottom border, hero and section bottom borders, preview frames, the subscribe underline */
  --color-line-strong: #FFFFFF33; /* The outline button border */
  --color-line-solid: #4D616C; /* Borders of the square page tabs (.text-block) */
  --color-field: #264653; /* Inputs are transparent on the canvas */

  /* Fonts */
  --font-playfair-display: "Playfair Display", serif;
  --font-dm-sans: "DM Sans", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 110px;
  --text-display-hero-font: var(--font-playfair-display);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-display-page: 80px;
  --text-display-page-font: var(--font-playfair-display);
  --text-display-page-weight: 500;
  --text-display-page-line-height: 1.0;
  --text-display-page-tracking: 0px;
  --text-headline-lg: 50px;
  --text-headline-lg-font: var(--font-playfair-display);
  --text-headline-lg-weight: 500;
  --text-headline-lg-line-height: 1.1;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 32px;
  --text-headline-md-font: var(--font-playfair-display);
  --text-headline-md-weight: 700;
  --text-headline-md-line-height: 1.13;
  --text-headline-md-tracking: 0px;
  --text-title-lg: 30px;
  --text-title-lg-font: var(--font-playfair-display);

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

Playfair Display · display-hero

Playfair Display · headline-lg

Playfair Display · title-lg

Playfair Display · body-lg

Playfair Display · label-serif

DM Sans · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Darkly style

More design systems like this

Found

Agencē X

Agencix

Agencō

Bring any of them to your AI tool