Design System
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.
DM Sans · weight 400 (always) · letter-spacing 0.01em · min size 18px. Size creates hierarchy, never weight.
<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>
<span class="sgt-tag strategy">Strategy</span> <span class="sgt-pill purple">Purple</span>
Border + radius. Padding sp-6. White background.
Borderless on grey-light background.
Shadow-md elevation. No border.
Left border in brand purple.
Use accent variants per department.
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>
| Project | Phase | Owner | Status |
|---|---|---|---|
| SGT-Branding | Foundation | Michel | Active |
| AVEN Website Relaunch | Prototyping | SGT Team | In Progress |
| HOGU Brand Refresh | Discovery | Laura | Pending |
<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 -->
Niemand wird bei der Arbeit unterbrochen, da man selbst bestimmen kann, wann man antwortet.
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-labelInline highlight on body text. Also an underline link with hover.
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).
Living reference of all 29 slide components: cover, section, impact, stat, gradient, bento, glass, charts.
Reveal v4Figma Slides style: 10 slide types, left-aligned, editorial. Copy as starting point.
ReferenceFull design-system reference with colors, typography, components.
<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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/reveal.css"> <link rel="stylesheet" href="../../SGT-Branding/sgt-presentation-v4.css"> <!-- Do NOT include a reveal.js theme like white.css -->
marp --no-stdin --html \ --theme-set ../../SGT-Branding/sgt-marp.css \ -o output.pdf -- input.md
<!-- 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).