Sergeant Design System
v1.0 · Sergeant AG · 2026

Design System.

Tokens, components, and patterns from SGT-2025-Rebranding. Single source of truth across web, slides, email, and print. HTML / CSS / JS — no framework.

Foundation

Brand Colors

Sergeant Purple
--sgt-purple · #754CFF
Purple Light
--sgt-purple-light · #D2C1FF
Purple Gradient
radial #8972FC → #754CFF

Neutrals

Black
--sgt-black · #1E1E1E
Grey Dark
--sgt-grey-dark · #AAAAAA
Grey
--sgt-grey · #767676
Grey Mid
--sgt-grey-mid · #CCCCCC
Grey Light
--sgt-grey-light · #F5F5F5
Warm White
--sgt-warm-white · #FAF8F5
White
--sgt-white · #FFFFFF

Department · Light Mode

Strategy
--sgt-strategy · #D9E530
Creativity
--sgt-creativity · #FFD129
Technology
--sgt-technology · #629CFA

Department · Dark Mode

Strategy Light
--sgt-strategy-light · #D3F030
Creativity Light
--sgt-creativity-light · #FFC800
Technology Light
--sgt-technology-light · #7DAFFF

System

Success
--sgt-green · #1D862D
Error
--sgt-red · #EC1111

Typography

DM Sans · weight 400 (always) · letter-spacing 0.01em · min size 18px. Size creates hierarchy, never weight.

--text-8xl
160px
Ab
--text-7xl
120px
Abc
--text-6xl
80px
Abcdef
--text-5xl
70px
Abcdefg
--text-4xl
60px
Abcdefghij
--text-3xl
50px
Abcdefghijklmno
--text-2xl
40px
The quick brown fox jumps over
--text-xl
30px
The quick brown fox jumps over the lazy dog
--text-lg
24px
The quick brown fox jumps over the lazy dog
--text-md
18px
The quick brown fox jumps over the lazy dog · minimum size
--text-sm
14px
Captions, table headers, labels (uppercase, tracking-loose)

Spacing

--sp-1
4px
--sp-2
8px
--sp-3
12px
--sp-4
16px
--sp-5
20px
--sp-6
24px
--sp-8
32px
--sp-10
40px
--sp-12
48px
--sp-15
60px
--sp-20
80px

Radius & Shadow

sm
6px
md
10px
lg
16px
xl
24px
full
9999px
shadow-sm
subtle
shadow-md
card
shadow-lg
modal

Core Components

Buttons

Primary Outline Purple Strategy Creativity Technology Ghost
Small Default Large 
<a href="#" class="sgt-btn">Primary</a>
<a href="#" class="sgt-btn outline">Outline</a>
<a href="#" class="sgt-btn purple">Purple</a>
<a href="#" class="sgt-btn ghost sm">Ghost · Small</a>

Tags & Pills

Default Purple Strategy Creativity Technology Success Error Dark
Default Purple Purple Light Strategy Technology Dark 
<span class="sgt-tag strategy">Strategy</span>
<span class="sgt-pill purple">Purple</span>

Cards

Default
Service Card

Border + radius. Padding sp-6. White background.

Flat
Flat Card

Borderless on grey-light background.

Elevated
Elevated Card

Shadow-md elevation. No border.

Accent · Purple
Highlight Card

Left border in brand purple.

Accent · Strategy
Department Card

Use accent variants per department.

Dark
Dark Card

Black background, white text. Compatible with dark sections.

<div class="sgt-card accent-purple">
  <span class="sgt-label">Label</span>
  <div class="sgt-h4">Card Title</div>
  <p class="sgt-copy">Body copy.</p>
</div>

Table

ProjectPhaseOwnerStatus
SGT-BrandingFoundationMichelActive
AVEN Website RelaunchPrototypingSGT TeamIn Progress
HOGU Brand RefreshDiscoveryLauraPending

Dividers

<hr class="sgt-divider">            <!-- 1px line -->
<hr class="sgt-divider thick">      <!-- 2px black -->
<hr class="sgt-divider-brand">      <!-- purple → technology gradient -->
<hr class="sgt-divider-brand tri">  <!-- strategy → creativity → purple -->

Pull Quote

Niemand wird bei der Arbeit unterbrochen, da man selbst bestimmen kann, wann man antwortet.

— Michel Müller, Sergeant AG

Forms

Typography Classes

Headline · sgt-h1
Section · sgt-h2
Sub-Section · sgt-h3
Lead paragraph · sgt-lead
Subtitle · sgt-subtitle

Body copy · sgt-copy. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.

Caption · sgt-caption

Label · sgt-label

Inline highlight on body text. Also an underline link with hover.

Slide-Specific Components

Reveal.js-only components — bento grids, animated stat slides, gradient backgrounds, glass cards, donut/bar charts, architecture boxes. These live in sgt-presentation-v4.css (preferred, Figma Slides style) and sgt-presentation.css (v3, legacy dark-first).

Reveal v3
showcase-v3.html

Living reference of all 29 slide components: cover, section, impact, stat, gradient, bento, glass, charts.

 Reveal v4
template-v4.html

Figma Slides style: 10 slide types, left-aligned, editorial. Copy as starting point.

 Reference
brand-manual.html

Full design-system reference with colors, typography, components.

Usage

Web Page

<link rel="stylesheet" href="../../SGT-Branding/tokens.css">
<link rel="stylesheet" href="../../SGT-Branding/sgt-ds-core.css">

<body class="sgt-body">
  <div class="sgt-container">
    <h1 class="sgt-h1">Hello.</h1>
    <p  class="sgt-copy">Body content.</p>
    <a  class="sgt-btn purple" href="#">Get in touch</a>
  </div>
</body>

Reveal.js Slides (v4 — preferred)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
<link rel="stylesheet" href="../../SGT-Branding/sgt-presentation-v4.css">
<!-- Do NOT include a reveal.js theme like white.css -->

Marp CLI

marp --no-stdin --html \
  --theme-set ../../SGT-Branding/sgt-marp.css \
  -o output.pdf -- input.md

Email Template

<!-- Inline critical styles, then load tokens via <style> -->
<style>
  @import url("https://sergeant.agency/ds/tokens.css");
  @import url("https://sergeant.agency/ds/sgt-ds-core.css");
</style>

For email use case: import via absolute URL once we publish the DS to CF Pages (see roadmap).