DESIGN.md · measured November 7, 2026

Darwinbox design system

Darwinbox’s website (darwinbox.com) uses the switzer font and #002B54 as its main color on a #001A33 background. Measured by Sitepeel on November 7, 2026.

#001A33
#FFFFFF
#002B54
#BA30F3

Download DESIGN.md

From darwinbox.com/en-us ↗ · 354 elements at 1440×900 and 390×844 Independent analysis, not affiliated with Darwinbox

Darwinbox color palette

10 colors with hex codes, grouped by where each one is used on the page.

Surfaces

Deep Blue#001A33backgroundPage background · 3×

Text

White#FFFFFFon-surface · --tw-ring-offset-colorPrimary text and headings · 20×

Cool Silver#CCD1D6on-surface-variantSecondary text · 4×

Cool Silver#B3BBC2on-surface-mutedMuted text and metadata · 5×

White#FFFFFFon-primaryText and icons on primary

Accents

Deep Blue#002B54primaryMain accent color · 20×

Vivid Purple#BA30F3secondarySecondary buttons · 1×

Vivid Blue#0183FFtertiaryAccent in text, fills and borders · 23×

Status

Amber#FDDB5DwarningWarnings and highlights · 3×

Light Red#FC6A6BerrorErrors and destructive states · 2×

Darwinbox fonts and type scale

3 families.

AaswitzerWeights 300, 400, 700switzer, sans-serif

Aaaktiv-groteskWeights 400, 700aktiv-grotesk, sans-serif

AainterWeights 400inter, sans-serif

headline-displayPage title (h1)Darwinbox48px · 300 · 1.08
mobile 26px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog42px · 700 · 1.4
mobile 24px

headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog40px · 700 · 1.1

headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog36px · 700 · 1.11

title-lgSmall titlesThe quick brown fox jumps over the lazy dog32px · 700 · 1.5

body-mdBody textThe quick brown fox jumps over the lazy dog14px · 400 · 1.5

body-lgLead paragraphsThe quick brown fox jumps over the lazy dog16px · 400 · 1.38 · -0.01em

body-smSecondary and small textThe quick brown fox jumps over the lazy dog13px · 400 · 1.5

label-lgLarge buttons and tabsThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog15px · 700 · 1.5

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog14px · 700 · 1.14 · 0.057em

Contrast

Text on #001A33

AaAAA17.5:1

AaAAA11.4:1

AaAAA9.0:1

Spacing

No strict grid · 61% are multiples of 4px

xs2px

sm8px

md15px

lg20px

xl40px

gutter24px

section128px

Breakpoints: 640px 768px 1024px 1280px 1536px

Shapes

Corner radii, most used first.

full9999px · 72×

lg28px · 24×

md10px · 18×

xs6px · 16×

xl100px · 16×

sm8px · 12×

Depth

Shadow

Darwinbox UI components

Rebuilt from the measured CSS.

Connect with Sales

button-primaryFilled button

Get early access

button-secondaryFilled button

Schedule a Demo

button-tertiaryFilled button

button-ghostText button

Work Email*

input-fieldInput field

Card

cardCard

Inline link

linkInline link

Motion

Interface transitions

0.15s0.5s0.45s0.2s

cubic-bezier(0.4, 0, 0.2, 1)ease

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

Use #001A33 for the page.
Keep text in 3 levels: #FFFFFF, #CCD1D6, #B3BBC2.
Reserve #002B54 for primary actions and key highlights.
Reuse the measured spacing steps (8px, 15px, 20px).
Make buttons and chips fully rounded (9999px); most other elements use 28px corners.
Introduce new font families beyond switzer, aktiv-grotesk and inter.
Use #002B54 for large backgrounds or body text.
Make interface transitions slower than 0.5s.

Darwinbox DESIGN.md242 lines

---
version: alpha
name: Darwinbox
description: "Dark interface measured from darwinbox.com: switzer type with aktiv-grotesk, deep blue accents, flat surfaces and pill-shaped controls."
colors:
  background: "#001A33"
  surface: "#001A33"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  on-surface-variant: "#CCD1D6"
  on-surface-muted: "#B3BBC2"
  primary: "#002B54"
  on-primary: "#FFFFFF"
  secondary: "#BA30F3"
  tertiary: "#0183FF"
  warning: "#FDDB5D"
  error: "#FC6A6B"
typography:
  headline-display:
    fontFamily: switzer
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.08
  headline-lg:
    fontFamily: aktiv-grotesk
    fontSize: 42px
    fontWeight: 700
    lineHeight: 1.4
  headline-md:
    fontFamily: switzer
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
  headline-sm:
    fontFamily: aktiv-grotesk
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.11
  title-lg:
    fontFamily: switzer
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.5
  body-md:
    fontFamily: aktiv-grotesk
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: -0.01em
  body-sm:
    fontFamily: switzer
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label-lg:
    fontFamily: aktiv-grotesk
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: aktiv-grotesk
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.5
  label-sm:
    fontFamily: aktiv-grotesk
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.14
    letterSpacing: 0.057em
  headline-display-mobile:
    fontFamily: switzer
    fontSize: 26px
    fontWeight: 300
    lineHeight: 1.15
  headline-lg-mobile:
    fontFamily: aktiv-grotesk
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
rounded:
  xs: 6px
  sm: 8px
  md: 10px
  lg: 28px
  xl: 100px
  full: 9999px
spacing:
  xs: 2px
  sm: 8px
  md: 15px
  lg: 20px
  xl: 40px
  gutter: 24px
  section: 128px
components:
  button-primary:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.primary}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.xl}"
    padding: 11px 20px
    height: 45px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-lg}"
    rounded: 50px
    padding: 14px 24px
    height: 48px
  button-tertiary:
    backgroundColor: "#FF6058"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.xs}"
    padding: 12px
    height: 37px
  button-ghost:
    textColor: "#070707"
    rounded: 0px
    padding: 0px
  input-field:
    backgroundColor: "#011B35"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.xl}"
    padding: 14px 157.5px 15px 20px
  card:
    backgroundColor: "{colors.background}"
    textColor: "#000000"
    typography: "{typography.body-lg}"
    rounded: "{rounded.full}"
    padding: 8px
  link:
    textColor: "{colors.tertiary}"
---

# Darwinbox Design System

## Overview

Darwinbox describes itself as: “Make your enterprise change-ready for now and the next chapter with Darwinbox's end-to-end, agile HCM platform for the evolving world of work.” The interface is dark, built on **Deep Blue (#001A33)** with **White (#FFFFFF)** text, and **Deep Blue (#002B54)** as the main accent.

Type is set in **switzer** and **aktiv-grotesk**. Headlines run large; body text is 14px. Depth comes from soft drop shadows. Controls are pill-shaped.

Measured from [darwinbox.com](https://darwinbox.com/en-us) on November 7, 2026 at 1440×900 and 390×844 from 354 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 10 roles.

- **Deep Blue (#001A33):** Page background, seen 3 times. Token `background`.
- **White (#FFFFFF):** Primary text and headings, seen 20 times. Token `on-surface`, CSS `--tw-ring-offset-color`.
- **Cool Silver (#CCD1D6):** Secondary text, seen 4 times. Token `on-surface-variant`.
- **Cool Silver (#B3BBC2):** Muted text and metadata, seen 5 times. Token `on-surface-muted`.
- **Deep Blue (#002B54):** Main accent color, seen 20 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Vivid Purple (#BA30F3):** Secondary buttons, seen 1 time. Token `secondary`.
- **Vivid Blue (#0183FF):** Accent in text, fills and borders, seen 23 times. Token `tertiary`.
- **Amber (#FDDB5D):** Warnings and highlights, seen 3 times. Token `warning`.
- **Light Red (#FC6A6B):** Errors and destructive states, seen 2 times. Token `error`.

## Typography

**switzer**, **aktiv-grotesk** and **inter** share the interface. Fallback stack: `switzer, sans-serif`. Other loaded fonts: roca, rig-sans.

- **headline-display:** switzer 48px at weight 300, line height 1.08 (26px on mobile). Page title (h1).
- **headline-lg:** aktiv-grotesk 42px at weight 700, line height 1.4 (24px on mobile). Section headings (h2).
- **headline-md:** switzer 40px at weight 700, line height 1.1. Sub-section headings.
- **headline-sm:** aktiv-grotesk 36px at weight 700, line height 1.11. Card and feature titles.
- **title-lg:** switzer 32px at weight 700, line height 1.5. Small titles.
- **body-md:** aktiv-grotesk 14px at weight 400, line height 1.5. Body text.
- **body-lg:** inter 16px at weight 400, line height 1.38, tracking -0.01em. Lead paragraphs.
- **body-sm:** switzer 13px at weight 400, line height 1.5. Secondary and small text.
- **label-lg:** aktiv-grotesk 16px at weight 400, line height 1.5. Large buttons and tabs.
- **label-md:** aktiv-grotesk 15px at weight 700, line height 1.5. Buttons, navigation and labels.
- **label-sm:** aktiv-grotesk 14px at weight 700, line height 1.14, tracking 0.057em. Small labels and badges.

## Layout

Spacing does not follow a strict grid: 61% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2px, sm 8px, md 15px, lg 20px, xl 40px.
- **Sections:** 128px vertical padding between major sections.
- **Gaps:** 24px is the most common gap in flex and grid layouts.
- **Breakpoints:** 640px, 768px, 1024px, 1280px, 1536px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(253, 219, 93, 0.04) 0px 2.767px 2.214px 0px, rgba(253, 219, 93, 0.06) 0px 12.522px 10.017px 0px, rgba(253, 219, 93, 0.09) 0px 41.778px 33.422px 0px`
- `rgba(1, 131, 255, 0.04) 0px 2.767px 2.214px 0px, rgba(1, 131, 255, 0.06) 0px 12.522px 10.017px 0px, rgba(1, 131, 255, 0.09) 0px 41.778px 33.422px 0px`
- `rgba(252, 106, 107, 0.04) 0px 2.767px 2.214px 0px, rgba(252, 106, 107, 0.06) 0px 12.522px 10.017px 0px, rgba(252, 106, 107, 0.09) 0px 41.778px 33.422px 0px`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 72 elements.
- **lg (28px):** 24 elements.
- **md (10px):** 18 elements.
- **xs (6px):** 16 elements.
- **xl (100px):** 16 elements.
- **sm (8px):** 12 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Connect with Sales”):** #FDDB5D fill, #002B54 text, 16px/700, 100px radius, padding 11px 20px.
- **button-secondary (“Get early access”):** #BA30F3 fill, #FFFFFF text, 16px/700, 50px radius, padding 14px 24px, border 1px solid #FFFFFF99.
- **button-tertiary (“Schedule a Demo”):** #FF6058 fill, #FFFFFF text, 13px/600, 6px radius, padding 12px.
- **button-ghost (“x”):** transparent fill, #070707 text, 18px/300, padding 0px.
- **input-field (“Work Email*”):** #011B35 fill, #FFFFFF text, 14px/400, 100px radius, padding 14px 157.5px 15px 20px, border 1px solid #FFFFFF66.
- **card:** #001A33 fill, #000000 text, 16px/400, 9999px radius, padding 8px.
- **link:** transparent fill, #0183FF text, padding 0px.

## Do's and Don'ts

- Do use #001A33 for the page.
- Do keep text in 3 levels: #FFFFFF, #CCD1D6, #B3BBC2.
- Do reserve #002B54 for primary actions and key highlights.
- Do reuse the measured spacing steps (8px, 15px, 20px).
- Do make buttons and chips fully rounded (9999px); most other elements use 28px corners.
- Don't introduce new font families beyond switzer, aktiv-grotesk and inter.
- Don't use #002B54 for large backgrounds or body text.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.15s, 0.5s, 0.45s, 0.2s. Longer ambient animations run 3s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `ease`, `cubic-bezier(0.4, 0.25, 0.3, 1.3)`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/darwinbox.com/en-us/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

Fonts

What font does Darwinbox use?

Darwinbox uses switzer (weights 300, 400 and 700) and aktiv-grotesk (weights 400 and 700) on darwinbox.com. Page titles are 48px at weight 300 (26px on phones) and body text is 14px. Measured on November 7, 2026.

Aaswitzer · 300, 400, 700
Aaaktiv-grotesk · 400, 700
Aainter · 400

Find every font on darwinbox.com with Font finder →

Colors

Darwinbox colors: palette and hex codes

Darwinbox’s main colors are #001A33 (deep blue) for the background, #FFFFFF (white) for text and #002B54 (deep blue) as the main accent, with #BA30F3 (vivid purple) and #0183FF (vivid blue) as other accents. Measured on November 7, 2026.

#001A33 · deep blue
#FFFFFF · white
#CCD1D6 · cool silver
#B3BBC2 · cool silver
#002B54 · deep blue
#BA30F3 · vivid purple
#0183FF · vivid blue

Get darwinbox.com’s palette as CSS or Tailwind with Colors →

Tech stack

What is Darwinbox built with?

Darwinbox’s website (darwinbox.com) is built with Storyblok, Next.js, React, CSS Modules and Tailwind CSS. Measured on November 7, 2026.

JavaScript framework: Next.js 14.1.3, React 18.3.1
Animation & 3D: GSAP 3.13.0
Analytics: Meta Pixel 2.9.438, TikTok Pixel, Microsoft Advertising, Microsoft Clarity 0.8.75
Fonts & icons: Adobe Fonts
Marketing & support: HubSpot, VWO
Site builder & CMS: Storyblok

Check darwinbox.com live with Tech stack →

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need a page behind a login?

The DESIGN.md generator Chrome extension makes one from any page you have open, including dashboards and pages behind a login.

See the Chrome extension

More designs

Brand examples →

Petrillo.studio petrillo.studio · Clash Grotesk

Folioxa folioxa.framer.website · Outfit

AI Website Detector aiwebsitedetector.com · system-ui

ViteBrand vite.dev · APK Protocol

ChainlinkBrand chain.link · TASA Orbiter VF

BlenderBrand blender.org · Inter

Another site? Make a DESIGN.md from any link.

FAQ

Darwinbox design system questions

What font does Darwinbox use?

Darwinbox’s website uses switzer (weights 300, 400 and 700) and aktiv-grotesk (weights 400 and 700). Page titles are 48px at weight 300 (26px on phones) and body text is 14px. Measured on November 7, 2026.

What are the Darwinbox colors and hex codes?

On darwinbox.com: #001A33 (deep blue) for the background, #FFFFFF (white) for text and #002B54 (deep blue) as the main accent, with #BA30F3 (vivid purple) and #0183FF (vivid blue) as other accents. The color palette above lists all 10 colors with their hex codes and where each one is used.

What is the Darwinbox design system?

The design system on this page is darwinbox.com’s, as measured on November 7, 2026: switzer type, #002B54 as the main color and pill-shaped corners, written down as a DESIGN.md. It is not Darwinbox’s own documentation.

What is Darwinbox built with?

Darwinbox’s website (darwinbox.com) is built with Storyblok, Next.js, React, CSS Modules and Tailwind CSS. The full tech stack Sitepeel found: Next.js, React, GSAP, Meta Pixel, TikTok Pixel, Adobe Fonts, Microsoft Advertising, Microsoft Clarity, Reddit Pixel and X Pixel. Measured on November 7, 2026.

What is the Darwinbox DESIGN.md?

A plain-text file with Darwinbox’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

Is this Darwinbox’s official design system?

No. Sitepeel measured it from darwinbox.com’s public page on November 7, 2026. It is an independent analysis, not made or approved by Darwinbox.

Can I use Darwinbox’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Darwinbox’s logo, name, pictures or text.

How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.