Boxkit Design System

Get DESIGN.md Download View template Works with

Boxkit website template preview detail 2

Boxkit website template preview detail 3

Boxkit is a bright, tidy UI-kit site for startups and SaaS. It reads like a well-organised product catalogue: a white page, a soft mint hero band, very bold Inter headlines in deep forest green, and rows of framed page previews with a green label under each. Colour is used in small, confident doses: forest green for type and bands, one royal blue for the main purchase action.

The published home is a "Welcome" index of the kit: it lists every page layout (Landing, Company, Case Study, Blog, Utility, Account) as screenshot cards. The inner pages reuse the same tokens on mint, white, cream and dark-green bands.

Four signatures make it recognisable:

Forest green type on mint. The hero is a full-width tint band (#DDF8D7) with a centred 71px, weight 700 headline in ink-heading (#063E35) and a 25px weight 500 lead in accent (#0F6457) above it.
Blue buy button next to a white one. The main action is a royal-blue (#0052B5) block button with a 7px radius, paired with a white button that has green text (Purchase Boxkit / Style Guide).
Outlined pill tabs. A sticky row of six pill links (30px radius, 2px green border at 32%, 54px tall) jumps between the page groups and stays pinned under the nav as you scroll.
Framed preview cards. Page screenshots at about 1.46:1 sit in 10px-radius frames with a 1px slate hairline, two per row with a 50px gap, each with an 18px weight 700 green label centred beneath (Landing III, Contact II).

Colors

Surfaces

canvas#FFFFFF

Page background, nav, most sections

surface-1#F5F5F7

Category chips, dropdown-link hover fill

field#FFFFFF

Inputs: white with a 1px slate border

field-line#29335C · 20%

With field: Inputs: white with a 1px slate border

field-text#333333

Typed text and placeholder in inputs

inverse-canvas#111111

Footer

Ink

on-primary#FFFFFF

Text on primary

on-secondary#FFFFFF

Text on secondary

on-accent#FFFFFF

ink#000000

Section titles, nav links, body text

ink-muted#000000

Body text is full black (p is #000 at weight 600); same as ink

ink-subtle#000000 · 65%

Dropdown menu links before hover

ink-heading#063E35

The hero headline and the outlined pill tab text

inverse-ink#FFFFFF

Text on inverse-canvas

inverse-ink-muted#FFFFFF · 50%

Footer subscribe note

Action

primary#0052B5

The main filled button (Purchase Boxkit)

primary-hover#1773E2

The Webflow variable --royal-blue-hover, set aside for the blue button's hover

secondary#063E35

The default .button and the search button

secondary-hover#0F6457

.button:hover background

accent#0F6457

Leads, section subtitles, preview labels, top-small-title eyebrows, the CTA band

Lines & effects

tint#DDF8D7

Hero band and light-green page sections

tint-strong#C9E0C4

Deeper mint from the Webflow variables (--honeydew), for mint borders and fills on inner pages

tint-warm#FEEECC

Cream band used on some case-study pages

line#29335C · 10%

1px frames around preview cards and panels

line-strong#0F6457 · 32%

2px border on the pill tabs

placeholder#686868

Typed text and placeholder in inputs

glass#FFFFFF · 95%

The sticky pill-tab bar, so previews show faintly through

inverse-line#FFFFFF · 10%

The 1px rule above the footer copyright

Typography

Inter · display-hero

The quick brown fox jumps

Hero headline, If you can dream it, Boxkit will help you build it!. 71px · 700 · 1.0

Inter · headline-lg

The quick brown fox jumps

Group titles: Landing Pages, Company Pages, Case Study. 50px · 700 · 1.08

Inter · title-lg

The quick brown fox jumps

Hero lead above the headline, in accent. 25px · 500 · 1.28

Inter · body-xl

The quick brown fox jumps

Search overlay input (.search-input). 20px · 400 · 2.1

Inter · label

The quick brown fox jumps

Buttons, pill tabs, dropdown links, footer links. 16px · 600 · 1.25

Inter · caption

The quick brown fox jumps

Default body size, inputs, copyright. 14px · 600 · 1.43

Spacing & shape

Purpose	Value
Container	max 1130px, centred (.container, also used inside the nav)
Section rhythm	100px top and bottom (.section); 80px at ≤767 and 60px at ≤479
Breakpoints	Webflow's 991px (tablet), 767px (landscape phone) and 479px (phone)

Spacing scale

Token	Value	Preview
`xs`	7px
`sm`	10px
`md`	16px
`lg`	30px
`xl`	50px

Layout spacing

Token	Value	Preview
`column-gap`	50px
`footer-top`	60px
`section-cta`	80px
`nav-height`	80px
`section`	100px
`hero-top`	155px

Border radius

xs5px

sm6px

button7px

field8px

md10px

pill30px

Surfaces

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

Level 1canvas

Level 2surface-1

Motion

Button, link and card hover	CSS transition: all 0.3s (ease). Buttons change colour; preview cards fade to 0.7 opacity
Nav link and chip hover	transition: all 0.2s; nav links to 0.6 opacity, chips to 0.49
Dropdown open	Arrow rotate 300ms ease; list shown with display, fade 300–350ms ease
Scroll fade-in	On scroll into view: opacity 0 → 1 and move back to y: 0 over 1000ms outQuart
Menu button lines	Small moves of y: ±6px and rotation, 300ms ease (500ms on some instances)
Mobile menu	Menu open / menu close with a 350ms ease height and opacity change

Do’s and don’ts

Centre group titles in headline-lg (50px, 700) black with a body-lg subtitle in accent #0F6457 right below.
Use primary #0052B5 with white text for the single most important action, and secondary #063E35 for every other filled button.
Set all text in Inter at weight 600 or 700 with no letter spacing.
Frame screenshots and cards with a 1px #29335C1A border and a 10px radius.
Alternate white, tint #DDF8D7 and solid green bands to separate sections.
Keep buttons 58px tall with a 7px radius and 19px 22px padding.
Use the outlined 30px-radius pill (2px #0F645752 border) for tabs and filters.
Add drop shadows, gradients or blur; the measured page has none.
Use blue (#0052B5) for links, icons, bands or headings.
Set paragraphs in grey; body text is black #000000 at weight 600.
Use weights below 500 for any visible text, or add uppercase or tracking.
Round buttons into pills; pills are for the tab row only.
Put ink-subtle (black at 65%) on anything but menu links of 16px or larger.

Example prompt

Any page in the Boxkit style

Prompt

Build your page in the Boxkit style. White #FFFFFF page, Inter everywhere at weight 600 (700 for titles), no letter spacing. Start with a full-width mint #DDF8D7 hero band with 155px top padding: a centred 25px weight-500 lead in #0F6457, a 71px weight-700 headline (line height 1.0) in #063E35, then two 58px buttons with a 7px radius and 19px 22px padding: a #0052B5 one with white text and a white one with #0F6457 text. Sections are 100px top and bottom inside a 1130px container. Each section opens with a centred 50px weight-700 black title and a 17px weight-600 #0F6457 subtitle. Cards have a 1px #29335C1A border and a 10px radius, laid out two per row with a 50px gap. Use a sticky white 80px nav with 16px weight-700 links and a #111111 footer. No shadows. Hovers are 300ms colour or opacity changes only.

# Boxkit Design System

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

## Overview

Boxkit is a bright, tidy UI-kit site for startups and
SaaS. It reads like a well-organised product catalogue:
a white page, a soft mint hero band, very bold Inter
headlines in deep forest green, and rows of framed page
previews with a green label under each. Colour is used

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background, nav, m… |
| surface-1    | #F5F5F7     | Category chips, dropdow… |
| field        | #FFFFFF     | Inputs: white with a 1p… |
| field-line   | #29335C 20% | With field: Inputs: whi… |
| field-text   | #333333     | Typed text and placehol… |
| inverse-can… | #111111     | Footer                   |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #FFFFFF     | Text on secondary        |
| on-accent    | #FFFFFF     |                          |
| ink          | #000000     | Section titles, nav lin… |
| ink-muted    | #000000     | Body text is full black… |
| ink-subtle   | #000000 65% | Dropdown menu links bef… |
| ink-heading  | #063E35     | The hero headline and t… |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |

## Typography

- display-hero: Inter 71px / 700
- headline-lg: Inter 50px / 700
- headline-md: Inter 42px / 700
- title-lg: Inter 25px / 500

{
  "$description": "Boxkit design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#0052B5",
      "$description": "The main filled button (Purchase Boxkit)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#1773E2",
      "$description": "The Webflow variable --royal-blue-hover, set aside for the blue button's hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#063E35",
      "$description": "The default .button and the search button"
    },
    "secondary-hover": {
      "$type": "color",
      "$value": "#0F6457",
      "$description": ".button:hover background"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "accent": {
      "$type": "color",
      "$value": "#0F6457",
      "$description": "Leads, section subtitles, preview labels, top-small-title eyebrows, the CTA band"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#FFFFFF"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background, nav, most sections"

/* Boxkit 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: #0052B5;
  --color-primary-hover: #1773E2;
  --color-on-primary: #FFFFFF;
  --color-secondary: #063E35;
  --color-secondary-hover: #0F6457;
  --color-on-secondary: #FFFFFF;
  --color-accent: #0F6457;
  --color-on-accent: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F5F5F7;
  --color-tint: #DDF8D7;
  --color-tint-strong: #C9E0C4;
  --color-tint-warm: #FEEECC;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-ink-subtle: #000000A6;
  --color-ink-heading: #063E35;
  --color-line: #29335C1A;
  --color-line-strong: #0F645752;
  --color-field: #FFFFFF;
  --color-field-line: #29335C33;
  --color-field-text: #333333;
  --color-placeholder: #686868;
  --color-glass: #FFFFFFF2;
  --color-inverse-canvas: #111111;
  --color-inverse-ink: #FFFFFF;
  --color-inverse-ink-muted: #FFFFFF80;
  --color-inverse-line: #FFFFFF1A;

  /* 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: 71px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 700;
  --text-headline-lg: 50px;
  --text-headline-lg--line-height: 1.08;

/* Boxkit 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: #0052B5; /* The main filled button (Purchase Boxkit) */
  --color-primary-hover: #1773E2; /* The Webflow variable --royal-blue-hover, set aside for the blue button's hover */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #063E35; /* The default .button and the search button */
  --color-secondary-hover: #0F6457; /* .button:hover background */
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-accent: #0F6457; /* Leads, section subtitles, preview labels, top-small-title eyebrows, the CTA band */
  --color-on-accent: #FFFFFF;
  --color-canvas: #FFFFFF; /* Page background, nav, most sections */
  --color-surface-1: #F5F5F7; /* Category chips, dropdown-link hover fill */
  --color-tint: #DDF8D7; /* Hero band and light-green page sections */
  --color-tint-strong: #C9E0C4; /* Deeper mint from the Webflow variables (--honeydew), for mint borders and fills on inner pages */
  --color-tint-warm: #FEEECC; /* Cream band used on some case-study pages */
  --color-ink: #000000; /* Section titles, nav links, body text */
  --color-ink-muted: #000000; /* Body text is full black (p is #000 at weight 600); same as ink */
  --color-ink-subtle: #000000A6; /* Dropdown menu links before hover */
  --color-ink-heading: #063E35; /* The hero headline and the outlined pill tab text */
  --color-line: #29335C1A; /* 1px frames around preview cards and panels */
  --color-line-strong: #0F645752; /* 2px border on the pill tabs */
  --color-field: #FFFFFF; /* Inputs: white with a 1px slate border */
  --color-field-line: #29335C33; /* With field: Inputs: white with a 1px slate border */
  --color-field-text: #333333; /* Typed text and placeholder in inputs */
  --color-placeholder: #686868; /* Typed text and placeholder in inputs */
  --color-glass: #FFFFFFF2; /* The sticky pill-tab bar, so previews show faintly through */
  --color-inverse-canvas: #111111; /* Footer */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-inverse-ink-muted: #FFFFFF80; /* Footer subscribe note */
  --color-inverse-line: #FFFFFF1A; /* The 1px rule above the footer copyright */

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

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 71px;
  --text-display-hero-font: var(--font-inter);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-headline-lg: 50px;
  --text-headline-lg-font: var(--font-inter);
  --text-headline-lg-weight: 700;

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

Inter · body-xl

Inter · label

Inter · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Boxkit style

More design systems like this

Tessel

Autona

Fortis

Munio

Bring any of them to your AI tool