Dele Design System

Get DESIGN.md Download View template Works with

Dele is a dark, high-energy marketing template. The page is pure black with white Inter Tight in weight 600, and one blue-to-magenta gradient does all the accent work: buttons, icon tiles, play buttons and a full-width quote band. Iridescent liquid-chrome 3D objects in cyan, violet and pink sit behind the biggest headlines, and the UI has hard square corners throughout.

Four signatures make it recognisable:

One gradient, everywhere. linear-gradient(36deg, #008EFF, #FF27FF) fills the main buttons, the square icon tiles on service cards, the square play buttons on video testimonials, and the container-wide testimonial band (at 45°). The small arrow button is white.
Headlines over chrome blobs. The hero title "Optimize, Innovate, Elevate." runs into a glossy 3D shape on the right so the last word overlaps it; later, "Empower your vision" is set across a twisting chrome form.
Square everything. Buttons, cards, tiles, images and play buttons have 0px corners. Only the arrow button, inputs and badges are rounded.
Two-tone sentences. Leads begin in white and finish in grey: "Discover the full potential of your business with our Webflow template, designed for professional excellence."

Dele is a dark-only design.

Colors

Surfaces

canvas#000000

Page background

surface-1#121212

The testimonial grid (quote cells next to image cells)

surface-2#141414

Service cards and contact inputs

surface-3#222222

The round count badge

field#141414

field-tint#81818B · 20%

The subscribe field and its button well

Ink

on-primary#FFFFFF

Text and icons on the gradient

on-secondary#000000

Text on secondary

on-accent#FFFFFF

ink#FFFFFF

Headlines, labels, metrics

ink-muted#FFFFFF · 60%

Paragraphs (p has opacity: .6), footer links at rest

ink-subtle#FFFFFF · 50%

The faded half of two-tone sentences, client company names

ink-faint#999999

List items and subscribe placeholder

on-media#FFFFFF

Action

primary#008EFF

The gradient: buttons at 36°, the band at 45°, other tiles at 49–56°

primary-end#FF27FF

With primary: The gradient: buttons at 36°, the band at 45°, other tiles at 49–56°

primary-hover#008EFF

secondary#FFFFFF

The 55px square arrow button in the subscribe field

accent#FF27FF

Lines & effects

line#FFFFFF · 15%

Hairline borders; a short 1px white rule divides the band quote from the name

glass#000000 · 60%

The nav bar fill behind logo and icons

Typography

Inter Tight · display-cta

The quick brown fox jumps

Footer title "Let's discuss.". 86px · 600 · 1.3

Inter Tight · headline-lg

The quick brown fox jumps

Large centred statements (2 uses). 44px · 600 · 1.3

Inter Tight · body-quote

The quick brown fox jumps

Testimonial quotes in curly quotes, and the band quote. 32px · 600 · 1.2

Inter Tight · title-lg

The quick brown fox jumps

Blog titles. 25px · 600 · 1.4

Inter Tight · label

The quick brown fox jumps

Buttons. 18px · 600 · 1.1

Inter Tight · footer-title

The quick brown fox jumps

Footer column titles. 18px · 700 · 1.1

Spacing & shape

Purpose	Value
Container	max 1200px, centred; sections pad 5% on the sides (72px at 1440)
Section rhythm	100px top and bottom
Breakpoints	991px, 767px and 479px (desktop-first), plus min-width steps at 768 and 1440px

Spacing scale

Token	Value	Preview
`xs`	10px
`sm`	15px
`md`	16px
`lg`	30px
`xl`	50px
`2xl`	60px
`3xl`	96px
`4xl`	100px
`5xl`	150px

Layout spacing

Token	Value	Preview
`footer-bottom`	30px
`gutter`	72px
`section`	100px
`hero-bottom`	130px
`hero-top`	150px

Border radius

sm7px

field9px

md10px

lg30px

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

Level 4surface-3

Motion

Text rise	y 200% → 0% and skewY 7° → 0° in an overflow mask, 1100ms outQuint (move), 500ms (skew)
Scroll-in fade	opacity 0 → 1, 1000ms outQuart
Button roll	Label out, arrow in from y 100px, 300ms ease
Hover filters and borders	filter and border changes, 300ms ease
Mouse parallax	3D objects drift ±5–10px on x and y with the mouse, 500ms
Scroll parallax	Objects move y ±80px across the viewport
Link fades	Footer links 60% → 100% opacity, 300ms (transition: all .3s)
Arrow button	Opacity 80% on hover, 200ms cubic-bezier(0.645, 0.045, 0.355, 1)

Do’s and don’ts

Keep the canvas #000000 and cards #141414 with 0px corners.
Use the 36° gradient (#008EFF → #FF27FF) for every filled action, icon tile and play button.
Set headlines in Inter Tight 600 white; paragraphs 18px / 500 at 60%.
Write leads and quotes two-tone, ending at 50% white.
Place a cut-out chrome 3D object behind or beside each big headline and let the type overlap it.
Keep button labels at 18px / 600 or larger: white on the blue end of the gradient is only about 3.3:1.
Use the gradient colours flat, or introduce the unused orange, green or red variables.
Round cards, images or buttons; only the arrow button (7px), inputs (9–10px) and badges are rounded.
Add drop shadows or coloured glows; the imagery supplies the light.
Put small grey text (#999999) on #141414 for anything but placeholders.
Leave Webflow's default #3898EC submit button in a form.
Run animations longer than 1.1s or loop anything.

Example prompt

Any page in the Dele style

Prompt

Build your page in the Dele style. Pure black #000000 background, Inter Tight everywhere: headings 600 white with no letter spacing (hero 79px / 1.3, section intros 35px / 1.3, big numbers 86px / 1.0); paragraphs 18px / 500 / 1.3 at 60% white. Write leads as two-tone sentences that end at 50% white. Every filled action uses linear-gradient(36deg, #008EFF, #FF27FF) with white 18px / 600 text, 0px radius, padding 18px 28px. Cards are #141414 squares with 0px corners and a gradient icon tile flush in the top-right corner. Put an iridescent cut-out 3D chrome object behind the hero title so the last word overlaps it. Sections use 100px vertical padding, 5% side padding and a 1200px container. Animate text in with an 1100ms outQuint rise from y 200% with a 7° skew; parallax 3D objects by ±10px with the mouse.

# Dele Design System

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

## Overview

Dele is a dark, high-energy marketing template. The page
is pure black with white Inter Tight in weight 600, and
one blue-to-magenta gradient does all the accent work:
buttons, icon tiles, play buttons and a full-width quote
band. Iridescent liquid-chrome 3D objects in cyan,

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #000000     | Page background          |
| surface-1    | #121212     | The testimonial grid (q… |
| surface-2    | #141414     | Service cards and conta… |
| surface-3    | #222222     | The round count badge    |
| field        | #141414     |                          |
| field-tint   | #81818B 20% | The subscribe field and… |
| on-primary   | #FFFFFF     | Text and icons on the g… |
| on-secondary | #000000     | Text on secondary        |
| on-accent    | #FFFFFF     |                          |
| ink          | #FFFFFF     | Headlines, labels, metr… |
| ink-muted    | #FFFFFF 60% | Paragraphs (p has opaci… |
| ink-subtle   | #FFFFFF 50% | The faded half of two-t… |
| ink-faint    | #999999     | List items and subscrib… |
| on-media     | #FFFFFF     |                          |

## Typography

- display-cta: Inter Tight 86px / 600
- display-metric: Inter Tight 86px / 600
- display-menu: Inter Tight 80px / 600
- display-hero: Inter Tight 79px / 600

{
  "$description": "Dele design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#008EFF",
      "$description": "The gradient: buttons at 36°, the band at 45°, other tiles at 49–56°"
    },
    "primary-end": {
      "$type": "color",
      "$value": "#FF27FF",
      "$description": "With primary: The gradient: buttons at 36°, the band at 45°, other tiles at 49–56°"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#008EFF"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text and icons on the gradient"
    },
    "secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "The 55px square arrow button in the subscribe field"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on secondary"
    },
    "accent": {
      "$type": "color",
      "$value": "#FF27FF"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "canvas": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Page background"
    },
    "surface-1": {

/* Dele 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: #008EFF;
  --color-primary-end: #FF27FF;
  --color-primary-hover: #008EFF;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFFFFF;
  --color-on-secondary: #000000;
  --color-accent: #FF27FF;
  --color-on-accent: #FFFFFF;
  --color-canvas: #000000;
  --color-surface-1: #121212;
  --color-surface-2: #141414;
  --color-surface-3: #222222;
  --color-ink: #FFFFFF;
  --color-ink-muted: #FFFFFF99;
  --color-ink-subtle: #FFFFFF80;
  --color-ink-faint: #999999;
  --color-line: #FFFFFF26;
  --color-glass: #00000099;
  --color-field: #141414;
  --color-field-tint: #81818B33;
  --color-on-media: #FFFFFF;

  /* 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-cta: 86px;
  --text-display-cta--line-height: 1.3;
  --text-display-cta--letter-spacing: 0px;
  --text-display-cta--font-weight: 600;
  --text-display-metric: 86px;
  --text-display-metric--line-height: 1;
  --text-display-metric--letter-spacing: 0px;
  --text-display-metric--font-weight: 600;
  --text-display-menu: 80px;
  --text-display-menu--line-height: 0.9;
  --text-display-menu--letter-spacing: 0px;
  --text-display-menu--font-weight: 600;
  --text-display-hero: 79px;

/* Dele 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: #008EFF; /* The gradient: buttons at 36°, the band at 45°, other tiles at 49–56° */
  --color-primary-end: #FF27FF; /* With primary: The gradient: buttons at 36°, the band at 45°, other tiles at 49–56° */
  --color-primary-hover: #008EFF;
  --color-on-primary: #FFFFFF; /* Text and icons on the gradient */
  --color-secondary: #FFFFFF; /* The 55px square arrow button in the subscribe field */
  --color-on-secondary: #000000; /* Text on secondary */
  --color-accent: #FF27FF;
  --color-on-accent: #FFFFFF;
  --color-canvas: #000000; /* Page background */
  --color-surface-1: #121212; /* The testimonial grid (quote cells next to image cells) */
  --color-surface-2: #141414; /* Service cards and contact inputs */
  --color-surface-3: #222222; /* The round count badge */
  --color-ink: #FFFFFF; /* Headlines, labels, metrics */
  --color-ink-muted: #FFFFFF99; /* Paragraphs (p has opacity: .6), footer links at rest */
  --color-ink-subtle: #FFFFFF80; /* The faded half of two-tone sentences, client company names */
  --color-ink-faint: #999999; /* List items and subscribe placeholder */
  --color-line: #FFFFFF26; /* Hairline borders; a short 1px white rule divides the band quote from the name */
  --color-glass: #00000099; /* The nav bar fill behind logo and icons */
  --color-field: #141414;
  --color-field-tint: #81818B33; /* The subscribe field and its button well */
  --color-on-media: #FFFFFF;

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

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-cta: 86px;
  --text-display-cta-font: var(--font-inter-tight);
  --text-display-cta-weight: 600;
  --text-display-cta-line-height: 1.3;
  --text-display-cta-tracking: 0px;
  --text-display-metric: 86px;
  --text-display-metric-font: var(--font-inter-tight);
  --text-display-metric-weight: 600;
  --text-display-metric-line-height: 1;
  --text-display-metric-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;

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-cta

Inter Tight · headline-lg

Inter Tight · body-quote

Inter Tight · title-lg

Inter Tight · label

Inter Tight · footer-title

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Dele style

More design systems like this

Nordlys

Appify

Enterprise X

Invest X

Bring any of them to your AI tool