krebsdesign · 2026

Design System

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

Two font families — a system sans-serif for body and UI, and a monospace for code, labels, and metadata. All sizes use CSS custom properties.

Font Families

--font-sans

system-ui, -apple-system,
BlinkMacSystemFont, "SF Pro Text",
sans-serif

--font-mono

"SF Mono", ui-monospace,
Menlo, Monaco, Consolas,
"Liberation Mono", monospace

Type Scale

--text-2xl
clamp(32px→60px)

Design Systems

--text-xl
clamp(22px→36px)

Section Title

--text-lg
clamp(16px→24px)

Card Heading & Subheading

--text-base
15px

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

--text-sm
11px · mono

navigation · labels · buttons · metadata

--text-xs
9px · mono

SECTION HEADERS · TAGS · TINY LABELS

Font Weights

Regular text

400 — --fw-regular

Semibold heading

600 — --fw-semibold

Bold display

700 — --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. Supports loading states, icons, and renders as an anchor when href is set.

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`	`false`	Shows spinner, disables interaction
disabled	`boolean`	`false`	Disables interaction

Token overrides — scoped to this preview

Background (primary)

Hover color

Text color

Border radius 999px

primary

secondary

ghost

<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. Always uses monospace font with wide letter-spacing.

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`	`false`	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. Used to open each major content area.

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`	`false`	Shows required indicator
disabled	`boolean`	`false`	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`	`false`	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`	`false`	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`	`false`	Checked state
indeterminate	`boolean`	`false`	Indeterminate state (partial selection)
disabled	`boolean`	`false`	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. More prominent than a checkbox — ideal for feature flags, preferences, and settings panels.

Attribute	Type	Default	Description
label	`string`	—	Label text
checked	`boolean`	`false`	Current on/off state
disabled	`boolean`	`false`	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`	`false`	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)`	`0`	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`	`false`	Alternating row background
bordered	`boolean`	`false`	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 (no link). 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>