Design System

krebsdesign · 2026

A complete token-based design system derived from and powering krebsdesign.com. 22 native Web Components built on CSS custom properties — configurable, composable, and consistent.

Components

Design Tokens

Token Categories

Tiers

Foundations

Color Tokens

All colors are defined as CSS custom properties on :root. Edit them live using the Token Editor.

Primary

--color-accent

#FA3923

Hover states, CTAs, active elements

--color-bg

#F5F5F5

Page background

--color-surface

#FFFFFF

Card & component surface

Text

--color-ink

#000000

Primary text, headings

--color-ink-2

#444444

Secondary text, descriptions

--color-ink-3

#888888

Tertiary text, labels, placeholders

Border

--color-rule

rgba(0,0,0,0.1)

Subtle dividers, light borders

--color-rule-solid

#D8D8D8

Solid borders, input borders

Semantic

--color-success

#1A8A4A

Success states, confirmations

--color-warning

#D4830F

Warnings, caution states

--color-danger

#CC2200

Errors, destructive actions

--color-info

#0066CC

Informational messages

Foundations

Typography

Inter carries the entire interface — body, UI, labels and headlines. A monospace stack (--font-code) is reserved for code only. Every family, size and weight shown here is read live from the design tokens, so this page always equals the site.

Font Families

--font-sans

{ }

--font-code

Type Scale

--text-display

Design Systems

--text-3xl

Selected Work

--text-2xl

Systems beat aesthetics

--text-xl

Section Title

--text-lg

Card heading & subheading

--text-base

Body text — comfortable reading size for descriptions and longer content blocks.

--text-sm

navigation · labels · buttons · metadata

--text-xs

Section Headers · Tags · Tiny Labels

Font Weights

Light display

— --fw-light

Regular text

— --fw-regular

Semibold accent

— --fw-semibold

Bold

— --fw-bold

Foundations

Spacing

An 8-step spacing scale from 4px to 64px. Used consistently for padding, margin, and gap throughout all components.

--space-1 · 4px

--space-2 · 8px

--space-3 · 12px

--space-4 · 16px

--space-5 · 24px

--space-6 · 32px

--space-7 · 48px

--space-8 · 64px

Foundations

Border & Radius

Three border-radius tokens — from sharp corners to full pills. Border styles use semantic color tokens.

0px · no radius

--radius-sm · 4px

--radius-md · 8px

--radius-pill · 999px

Foundations

Shadow & Elevation

Three elevation levels. The default design uses flat aesthetics with border-based separation. Shadows are available as opt-in token overrides.

--shadow-sm · none (flat)

--shadow-md · subtle

--shadow-lg · pronounced

Foundations

Motion

Purposeful, minimal motion. Fast for micro-interactions, base for transitions, slow for entrances.

Token	Value	Use	Demo
`--dur-fast`	0.15s linear	Color changes, hover states, borders
`--dur-base`	0.2s linear	Layout transitions, opacity, width
`--dur-slow`	0.6s ease-out	Page entrances, slide-ins, reveals
`--ease-out`	cubic-bezier(0.16,1,0.3,1)	Natural deceleration for enter animations	—

Tier 1 — Core Components

tier 1 · core

Button

<dk-button>

The primary action element. Four semantic variants cover every context from primary CTAs to destructive operations.

primary

secondary

ghost

danger

small

medium

large

disabled

Attribute	Type	Default	Description
variant	`primary \| secondary \| ghost \| danger`	`primary`	Visual style of the button
size	`sm \| md \| lg`	`md`	Button size affecting padding and font
href	`string`	—	When set, renders as an <a> element
loading	`boolean`	—	Shows spinner, disables interaction
disabled	`boolean`	—	Disables interaction

<dk-button variant="primary">Get started</dk-button>
<dk-button variant="secondary">Learn more</dk-button>
<dk-button variant="ghost">Cancel</dk-button>
<dk-button variant="danger">Delete</dk-button>
<dk-button variant="primary" loading>Saving…</dk-button>
<dk-button variant="primary" href="/page">Navigate</dk-button>

tier 1 · core

Badge

<dk-badge>

Small inline labels for status, categories, and counts. Six variants cover semantic states.

accent

muted

outline

success

warning

danger

Attribute	Type	Default	Description
variant	`accent \| muted \| outline \| success \| warning \| danger`	`accent`	Color and style of the badge

<dk-badge variant="accent">new</dk-badge>
<dk-badge variant="success">active</dk-badge>
<dk-badge variant="warning">pending</dk-badge>
<dk-badge variant="danger">error</dk-badge>

tier 1 · core

Pill

<dk-pill>

Rounded metadata chips for locations, skills, and contextual information. Lighter than badges — no semantic color, just structure.

munich · germany

design systems

2024 · ongoing

<dk-pill>munich · germany</dk-pill>
<dk-pill>design systems</dk-pill>

tier 1 · core

Tag

<dk-tag>

Category tags for filtering and labelling. Supports a dismissible variant that emits a dk-dismiss event when removed.

brand

design system

UX Research

removable

Attribute	Type	Default	Description
variant	`default \| bordered`	`default`	bordered adds a border around the tag
dismissible	`boolean`	—	Shows × button, emits dk-dismiss on click

<dk-tag>brand</dk-tag>
<dk-tag variant="bordered">UX Research</dk-tag>
<dk-tag dismissible>removable</dk-tag>

tier 1 · core

Divider

<dk-divider>

Horizontal separator with optional centered label. Adapts to the --color-rule token.

Attribute	Type	Default	Description
label	`string`	—	Optional text shown in the center of the line

<dk-divider></dk-divider>
<dk-divider label="or"></dk-divider>

tier 1 · core

Section Header

<dk-section-header>

Consistent page section headings with an optional category label and accent badge.

Attribute	Type	Default	Description
label	`string`	—	Small monospace category label
badge	`string`	—	Accent-colored badge next to label
title	`string`	—	Main heading text

<dk-section-header label="work" badge="visual" title="Case Studies"></dk-section-header>

tier 1 · core

Card

<dk-card>

Versatile container for grouped content. Supports attribute-based shortcuts for common patterns and named slots for custom layouts.

Attribute	Type	Default	Description
tag	`string`	—	Small category label above the title
title	`string`	—	Card heading
desc	`string`	—	Body text

<dk-card tag="brand" title="Project Name" desc="Description text."></dk-card>

Tier 2 — Forms & Feedback

tier 2 · forms & feedback

Input

<dk-input>

Text input field with label, helper text, and validation state. Supports all standard HTML input types.

Attribute	Type	Default	Description
label	`string`	—	Input label text
type	`text \| email \| password \| number \| search`	`text`	HTML input type
placeholder	`string`	—	Placeholder text
value	`string`	—	Current value
helper	`string`	—	Helper text below input
error	`string`	—	Error message; also sets error visual state
required	`boolean`	—	Shows required indicator
disabled	`boolean`	—	Disables the field

<dk-input label="Email" type="email" placeholder="you@example.com"></dk-input>
<dk-input label="Name" required error="This field is required."></dk-input>

tier 2 · forms & feedback

Textarea

<dk-textarea>

Multi-line text input for longer content like messages, descriptions, and notes.

Attribute	Type	Default	Description
label	`string`	—	Textarea label
placeholder	`string`	—	Placeholder text
rows	`number`	`4`	Visible rows height
helper	`string`	—	Helper text below
error	`string`	—	Error message
disabled	`boolean`	—	Disables the field

<dk-textarea label="Message" placeholder="Your message…" rows="5"></dk-textarea>

tier 2 · forms & feedback

Select

<dk-select>

Styled dropdown selector consistent with the Input component. Options passed as JSON attribute.

Attribute	Type	Default	Description
label	`string`	—	Select label
placeholder	`string`	—	Placeholder option text
options	`JSON string`	—	Array of {value, label} objects
value	`string`	—	Currently selected value
error	`string`	—	Error message
disabled	`boolean`	—	Disables the field

<dk-select label="Country" options='[{"value":"de","label":"Germany"}]'></dk-select>

tier 2 · forms & feedback

Checkbox

<dk-checkbox>

Custom-styled checkbox with label. Supports checked, indeterminate, and disabled states.

Attribute	Type	Default	Description
label	`string`	—	Label text beside the checkbox
checked	`boolean`	—	Checked state
indeterminate	`boolean`	—	Indeterminate state (partial selection)
disabled	`boolean`	—	Disables interaction
name	`string`	—	Form field name
value	`string`	—	Form field value

<dk-checkbox label="Accept terms" checked></dk-checkbox>

tier 2 · forms & feedback

Radio Group

<dk-radio-group>

Mutually exclusive selection from a set of options. Options are passed as a JSON attribute.

Attribute	Type	Default	Description
label	`string`	—	Group label
name	`string`	—	Form field name shared by all radios
options	`JSON string`	—	Array of {value, label} objects
value	`string`	—	Currently selected value

<dk-radio-group name="size" options='[{"value":"s","label":"Small"},{"value":"m","label":"Medium"}]'></dk-radio-group>

tier 2 · forms & feedback

Toggle

<dk-toggle>

On/off switch for boolean settings. Ideal for feature flags, preferences, and settings panels.

Attribute	Type	Default	Description
label	`string`	—	Label text
checked	`boolean`	—	Current on/off state
disabled	`boolean`	—	Disables interaction

<dk-toggle label="Enable notifications"></dk-toggle>
<dk-toggle label="Dark mode" checked></dk-toggle>

tier 2 · forms & feedback

Alert

<dk-alert>

Inline feedback banners for communicating status to users. Supports a dismissible variant with an optional title.

Your session will expire in 10 minutes.

Your changes have been saved successfully.

Some features may be unavailable in your region.

Unable to save — please check your connection.

Attribute	Type	Default	Description
variant	`info \| success \| warning \| danger`	`info`	Semantic color of the alert
title	`string`	—	Bold heading above the content
dismissible	`boolean`	—	Shows × button to hide the alert

<dk-alert variant="success" title="Saved">Your changes were saved.</dk-alert>
<dk-alert variant="danger" dismissible>Something went wrong.</dk-alert>

tier 2 · forms & feedback

Tooltip

<dk-tooltip>

Contextual information shown on hover. Wraps any content — hover the examples below to see them in action.

hover me (top)

hover me (bottom)

⌘K

Attribute	Type	Default	Description
content	`string`	—	Tooltip text content
placement	`top \| bottom \| left \| right`	`top`	Preferred position relative to trigger

<dk-tooltip content="Helpful context" placement="top">
  <dk-button>hover me</dk-button>
</dk-tooltip>

tier 2 · forms & feedback

Spinner

<dk-spinner>

Animated loading indicator. Three sizes for different contexts.

Attribute	Type	Default	Description
size	`sm \| md \| lg`	`md`	Spinner diameter (16 / 24 / 40px)

<dk-spinner size="md"></dk-spinner>

tier 2 · forms & feedback

Progress

<dk-progress>

Linear progress bar for upload states, multi-step forms, and loading sequences.

Attribute	Type	Default	Description
value	`number (0–100)`	—	Current progress percentage
label	`string`	—	Label shown above the bar

<dk-progress value="60" label="Uploading…"></dk-progress>

tier 2 · forms & feedback

Avatar

<dk-avatar>

User representation as initials or image. Falls back gracefully to initials when no image source is provided.

Attribute	Type	Default	Description
initials	`string`	—	1–2 character abbreviation
src	`string`	—	Image URL; shows image instead of initials
size	`sm \| md \| lg`	`md`	Avatar diameter (28 / 40 / 56px)
alt	`string`	—	Alt text for image variant

<dk-avatar initials="DK" size="md"></dk-avatar>
<dk-avatar src="/avatar.jpg" alt="David Krebs" size="lg"></dk-avatar>

Tier 3 — Advanced Interaction

tier 3 · advanced

Tabs

<dk-tabs> / <dk-tab>

Content organized into selectable panels. Uses slot composition — each dk-tab child becomes a panel.

This is the overview panel with general information about the project and its scope.

Detailed specifications, requirements, and technical notes live here.

A chronological log of changes, decisions, and milestones.

<dk-tabs>
  <dk-tab label="Overview">Content A</dk-tab>
  <dk-tab label="Details">Content B</dk-tab>
  <dk-tab label="History">Content C</dk-tab>
</dk-tabs>

tier 3 · advanced

Accordion

<dk-accordion> / <dk-accordion-item>

Vertically stacked expandable sections. Useful for FAQs, settings panels, and content that benefits from progressive disclosure.

A design system is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.

Tokens are named values — like colors, spacing, and typography — stored as CSS custom properties that components reference instead of hard-coded values.

Yes. These are native Web Components (Custom Elements v1) and work in any HTML environment, with or without a JavaScript framework.

<dk-accordion>
  <dk-accordion-item title="Question one?">Answer text here.</dk-accordion-item>
  <dk-accordion-item title="Question two?">Another answer.</dk-accordion-item>
</dk-accordion>

tier 3 · advanced

Table

<dk-table>

Structured data display with sortable columns, striped rows, and hover states. Columns and rows passed as JSON attributes.

Attribute	Type	Default	Description
columns	`JSON string`	—	Array of {key, label} column definitions
rows	`JSON string`	—	Array of data objects matching column keys
striped	`boolean`	—	Alternating row background
bordered	`boolean`	—	Full cell borders

<dk-table
  columns='[{"key":"name","label":"Name"},{"key":"role","label":"Role"}]'
  rows='[{"name":"David","role":"Designer"},{"name":"Alex","role":"Developer"}]'
  striped>
</dk-table>

tier 3 · advanced

Breadcrumb

<dk-breadcrumb>

Navigation path indicator. Last item is the current page. Items passed as JSON.

Attribute	Type	Default	Description
items	`JSON string`	—	Array of {label, href?} — last item has no link

<dk-breadcrumb items='[{"label":"Home","href":"/"},{"label":"Current Page"}]'></dk-breadcrumb>