Digi Design System

Get DESIGN.md Download View template Works with

Digi is a dark SaaS and startup template with a night-violet mood. The page is a near-black purple (#120620), text is a cool silver rather than white, and the only bright colour is a diagonal gradient from violet #5132C0 to tomato #FF715B that fills every primary pill and, on inner pages, whole hero panels and comparison tables. Type is Inter 500 throughout, calm and even, with no uppercase and no tracking tricks.

Four signatures make it recognisable:

The violet-to-tomato gradient pill. linear-gradient(60deg, #5132C0 20%, #FF715B) with white 15px text, 30px radius. It appears in the nav (Get Digi Now →) and as the hero button (View All Demo).
Silver, not white. Headlines and paragraphs are #C3C8CC. Pure white is held back for the logo, the big closing CTA title and hover states.
Gradient small text. The eyebrow above the hero headline (A stunning, multi layout template) and the small kicker above the closing CTA (Design anything, build everything) are filled with the same violet-to-pink gradient.
Device and screenshot framing. The hero shows the product inside a black tablet mockup that bleeds off the right edge; the rest of the home page is a three-column grid of 10px-rounded page screenshots.

Digi is a dark-only design.

Colors

Surfaces

canvas#120620

Page background (--black)

surface-1#FFFFFF · 5%

The long showcase band (section intro-color), about #1D142A on screen

surface-sunken#0E0419

The darker band behind the closing CTA on inner pages, as seen in the page thumbnails (--black-2)

field#170D26

Input background (--black-3)

Ink

on-primary#FFFFFF

Text on primary

ink#C3C8CC

Headlines, nav, list items (--silver)

ink-muted#C3C8CC

Paragraphs

ink-soft#C3C8CC · 90%

The All Templates text link

ink-subtle#C3C8CC · 70%

Dropdown links and footer links

ink-bright#FFFFFF

Logo, closing CTA title, hover text, white button

Action

primary#5132C0

Gradient start, solid fallback of the pill, text on it; also the blockquote rule and link hover colour

secondary#FF715B

Gradient end (--tomato)

Lines & effects

line#FFFFFF · 15%

1px input border

Typography

Inter · display-hero

The quick brown fox jumps

Hero headline Build designs that scale with Digi. 70px · 500 · 1.1

Inter · headline-lg

The quick brown fox jumps

h1 on inner pages. 38px · 500 · 1.16

Inter · title-quote

The quick brown fox jumps

Blockquote with a 4px violet left rule. 30px · 400 · 1.07

Inter · body-lg

The quick brown fox jumps

Paragraphs. 17px · 500 · 1.4

Inter · label

The quick brown fox jumps

Nav links, dropdown links, text links. 16px · 500 · 1.25

Inter · eyebrow

The quick brown fox jumps

Kicker above hero and CTA titles. 16px · 500 · 1.25

Spacing & shape

Purpose	Value
Container	max 1200px, centred; a 700px narrow container for centred text blocks
Breakpoints	991px, 767px and 479px (most rules at 479px), plus small min-width: 768px and min-width: 1440px steps

Spacing scale

Token	Value	Preview
`xs`	7px
`sm`	13px
`md`	15px
`lg`	25px
`xl`	30px
`2xl`	50px

Layout spacing

Token	Value	Preview
`column-gap`	30px
`section-x`	72px
`footer-top`	80px
`section`	100px

Border radius

md10px

pill30px

full9999px

Surfaces

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

Level 1canvas

Level 2field

Motion

Link and button hover	transition: all 0.2s (colour to white or violet, opacity to 0.7 on social icons)
Dropdown open	Caret rotate, 100ms ease; list fades opacity 0 → 1 and moves up from y 50%, 350ms ease
Underline grow	width change, 500ms ease
Icon hover	scale 1 → 1.1, 100ms ease, back on mouse-out

Do’s and don’ts

Use the canvas #120620 page with silver ink #C3C8CC text.
Fill every primary action with the 60° #5132C0 → #FF715B gradient pill, 30px radius, white 15px 500 text.
Keep Inter weight 500 for headlines and labels; break headlines into short lines ending with a full stop.
Use 10px radii on cards and images and 30px pills on buttons and inputs.
Group content on a white-5% surface-1 band rather than with borders or shadows.
Set the typed text of inputs to ink.
Set resting text in violet #5132C0 on the dark canvas (2.4:1); keep it for hover only.
Put text on the tomato end of the gradient alone; white on #FF715B is only 2.7:1, so keep labels over the violet part or on a full gradient.
Keep Webflow's default #333333 input text: on #170D26 it is unreadable.
Use pure white for paragraphs; it is for the logo, the closing CTA and hover.
Add drop shadows, glass blur or a second accent colour.
Use Switzer: it is declared but not loaded.

Example prompt

Any page in the Digi style

Prompt

Build your page in the Digi style. Background #120620; text Inter 500 in silver #C3C8CC (white #FFFFFF only for the logo, the closing CTA title and hovers). Hero: a two-column grid inside a 1200px container, padding 100px 5%; on the left a 16px eyebrow filled with a violet-to-pink gradient, a 70px weight-500 headline at line height 1.1 over three short lines, and a gradient pill button; on the right a product screenshot in a dark tablet frame that bleeds off the right edge. Buttons: linear-gradient(60deg, #5132C0 20%, #FF715B), white 15px 500 text, padding 12px 20px, height 44px, radius 30px, transition all 0.2s. Cards: 10px-radius images in a 3-column grid with a 30px gap and an 18px title below. Group sections on a band of white at 5%. Inputs: #170D26, 1px white-15% border, 30px radius, 50px tall. No shadows.

# Digi Design System

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

## Overview

Digi is a dark SaaS and startup template with a
night-violet mood. The page is a near-black purple
(#120620), text is a cool silver rather than white, and
the only bright colour is a diagonal gradient from
violet #5132C0 to tomato #FF715B that fills every

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #120620     | Page background (--blac… |
| surface-1    | #FFFFFF 5%  | The long showcase band … |
| surface-sun… | #0E0419     | The darker band behind … |
| field        | #170D26     | Input background (--bla… |
| on-primary   | #FFFFFF     | Text on primary          |
| ink          | #C3C8CC     | Headlines, nav, list it… |
| ink-muted    | #C3C8CC     | Paragraphs               |
| ink-soft     | #C3C8CC 90% | The All Templates text … |
| ink-subtle   | #C3C8CC 70% | Dropdown links and foot… |
| ink-bright   | #FFFFFF     | Logo, closing CTA title… |
| primary      | #5132C0     | Gradient start, solid f… |
| secondary    | #FF715B     | Gradient end (--tomato)  |
| line         | #FFFFFF 15% | 1px input border         |

## Typography

- display-hero: Inter 70px / 500
- display-cta: Inter 65px / 500
- headline-lg: Inter 38px / 500
- headline-md: Inter 32px / 500

{
  "$description": "Digi design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#5132C0",
      "$description": "Gradient start, solid fallback of the pill, text on it; also the blockquote rule and link hover colour"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#FF715B",
      "$description": "Gradient end (--tomato)"
    },
    "canvas": {
      "$type": "color",
      "$value": "#120620",
      "$description": "Page background (--black)"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFFFFF0D",
      "$description": "The long showcase band (section intro-color), about #1D142A on screen"
    },
    "surface-sunken": {
      "$type": "color",
      "$value": "#0E0419",
      "$description": "The darker band behind the closing CTA on inner pages, as seen in the page thumbnails (--black-2)"
    },
    "field": {
      "$type": "color",
      "$value": "#170D26",
      "$description": "Input background (--black-3)"
    },
    "ink": {
      "$type": "color",
      "$value": "#C3C8CC",
      "$description": "Headlines, nav, list items (--silver)"
    },
    "ink-muted": {
      "$type": "color",
      "$value": "#C3C8CC",

/* Digi 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: #5132C0;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FF715B;
  --color-canvas: #120620;
  --color-surface-1: #FFFFFF0D;
  --color-surface-sunken: #0E0419;
  --color-field: #170D26;
  --color-ink: #C3C8CC;
  --color-ink-muted: #C3C8CC;
  --color-ink-soft: #C3C8CCE6;
  --color-ink-subtle: #C3C8CCB3;
  --color-ink-bright: #FFFFFF;
  --color-line: #FFFFFF26;

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

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 70px;
  --text-display-hero--line-height: 1.1;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 500;
  --text-display-cta: 65px;
  --text-display-cta--line-height: 1.0;
  --text-display-cta--letter-spacing: 0px;
  --text-display-cta--font-weight: 500;
  --text-headline-lg: 38px;
  --text-headline-lg--line-height: 1.16;
  --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: 500;
  --text-headline-sm: 28px;
  --text-headline-sm--line-height: 1.29;
  --text-headline-sm--letter-spacing: 0px;
  --text-headline-sm--font-weight: 500;
  --text-title-quote: 30px;

/* Digi 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: #5132C0; /* Gradient start, solid fallback of the pill, text on it; also the blockquote rule and link hover colour */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #FF715B; /* Gradient end (--tomato) */
  --color-canvas: #120620; /* Page background (--black) */
  --color-surface-1: #FFFFFF0D; /* The long showcase band (section intro-color), about #1D142A on screen */
  --color-surface-sunken: #0E0419; /* The darker band behind the closing CTA on inner pages, as seen in the page thumbnails (--black-2) */
  --color-field: #170D26; /* Input background (--black-3) */
  --color-ink: #C3C8CC; /* Headlines, nav, list items (--silver) */
  --color-ink-muted: #C3C8CC; /* Paragraphs */
  --color-ink-soft: #C3C8CCE6; /* The All Templates text link */
  --color-ink-subtle: #C3C8CCB3; /* Dropdown links and footer links */
  --color-ink-bright: #FFFFFF; /* Logo, closing CTA title, hover text, white button */
  --color-line: #FFFFFF26; /* 1px input border */

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

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 70px;
  --text-display-hero-font: var(--font-inter);
  --text-display-hero-weight: 500;
  --text-display-hero-line-height: 1.1;
  --text-display-hero-tracking: 0px;
  --text-display-cta: 65px;
  --text-display-cta-font: var(--font-inter);
  --text-display-cta-weight: 500;
  --text-display-cta-line-height: 1.0;
  --text-display-cta-tracking: 0px;
  --text-headline-lg: 38px;
  --text-headline-lg-font: var(--font-inter);
  --text-headline-lg-weight: 500;
  --text-headline-lg-line-height: 1.16;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 32px;
  --text-headline-md-font: var(--font-inter);
  --text-headline-md-weight: 500;
  --text-headline-md-line-height: 1.13;
  --text-headline-md-tracking: 0px;
  --text-headline-sm: 28px;
  --text-headline-sm-font: var(--font-inter);
  --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

SaaS 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 · display-hero

Inter · headline-lg

Inter · title-quote

Inter · body-lg

Inter · label

Inter · eyebrow

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Digi style

More design systems like this

Card

Dolce

Kliko

Landkit

Bring any of them to your AI tool