# Darwinbox design system

> Darwinbox design system measured from darwinbox.com: switzer font, #002B54 primary on #001A33, 10 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/darwinbox.com/en-us/

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.

## 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.

- switzer (weights 300, 400, 700)
- aktiv-grotesk (weights 400, 700)
- inter (weights 400)

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

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

## Questions and answers

### 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.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/darwinbox.com/en-us/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Darwinbox.

## The DESIGN.md file

```markdown
---
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).

```