Simplified Design System

A trimmed surface of the main Design System: fewer colors, fewer variants, dark by default. Derived mechanically from design-system.mdx.

Foundations

Typography

Font families, typographic scale, and text styling guidelines.

Display

Headings

IBM Plex Sans — All headings (H1–H3)

Interface Elements

Inter — Smaller headings (H4–H6), UI components

Body

Body text and paragraphs

Inter — Body text, UI elements

Code

Code and technical values

Example: const x = 42;

JetBrains Mono — Code blocks, technical values

The quick brown fox jumps over the lazy dog

IBM Plex Sans 3rem 700 1.1

Hero sections

The quick brown fox jumps over the lazy dog

IBM Plex Sans 2.25rem 600 1.2

Main sections

The quick brown fox jumps over the lazy dog

IBM Plex Sans 1.75rem 600 1.3

Subsections, cards

The quick brown fox jumps over the lazy dog

Inter 1.25rem 500 1.4

Smaller headings

The quick brown fox jumps over the lazy dog

Inter 1.125rem 600 1.5

UI components

The quick brown fox jumps over the lazy dog

Inter 1rem 600 1.5

Inline headings

The quick brown fox jumps over the lazy dog

Inter 1rem 400 1.6

Body text

Typographic scale

Element	Size	Font / Weight	Line-height	Usage
H1	`48px / 3rem`	`IBM Plex Sans` Bold (700)	`1.1`	Hero sections
H2	`36px / 2.25rem`	`IBM Plex Sans` SemiBold (600)	`1.2`	Main sections
H3	`28px / 1.75rem`	`IBM Plex Sans` SemiBold (600)	`1.3`	Subsections, cards
H4	`20px / 1.25rem`	`Inter` Medium (500)	`1.4`	Smaller headings
H5	`18px / 1.125rem`	`Inter` SemiBold (600)	`1.5`	UI components
H6	`16px / 1rem`	`Inter` SemiBold (600)	`1.5`	Inline headings
P	`16px / 1rem`	`Inter` Regular (400)	`1.6`	Body text
SMALL	`14px / 0.875rem`	`Inter` Regular (400)	`1.5`	Captions, metadata

Link styles

Dark background

Link on dark background

Responsive scaling: Desktop 100% • Tablet 90% (H1–H3) • Mobile 80% (H1–H3, min 24px)

Colors & palette

Trimmed brand palette. Page-chrome zinc shades are listed at the bottom for reference.

Primary

Orange-500

HEX: #f97316
RGB: 249, 115, 22
TW: Orange-500

Primary button backgrounds, action icons, call-to-action areas. Text must be black (#000).

Orange-50

HEX: #fff7ed
TW: Orange-50

Secondary buttons, light accents, accent callout background.

Orange-600

HEX: #ea580c
TW: Orange-600

Primary button hover state.

Danger

Red-500

HEX: #EF4444
RGB: 239, 68, 68
TW: Red-500

Danger borders, error highlights, destructive action buttons, form validation borders.

Red-50

HEX: #FEF2F2
RGB: 254, 242, 242
TW: Red-50

Danger callout background (the only place red-50 appears on the simplified surface).

Dark / default

Zinc-900

HEX: #18181B
TW: Zinc-900

Page background, dark button background, default surface.

Implicit shades

Used implicitly by the dark page chrome for text, borders, and elevated surfaces. Not part of the brand palette but required to render the page.

Zinc-100

HEX: #F4F4F5
TW: Zinc-100

Primary text on dark.

Zinc-300

HEX: #D4D4D8
TW: Zinc-300

Secondary text on dark.

Zinc-700

HEX: #3F3F46
TW: Zinc-700

Borders, dividers.

Zinc-800

HEX: #27272A
TW: Zinc-800

Elevated surfaces, input backgrounds, code background.

Code colors

Syntax highlighting palette for code blocks and inline code.

Blue-300

HEX: #93C5FD
RGB: 147, 197, 253
TW: Blue-300
CMYK: 42%, 22%, 0%, 1%
OKLCH: 0.809 0.105 251.8

Functions, methods, procedures.

Emerald-300

HEX: #6EE7B7
RGB: 110, 231, 183
TW: Emerald-300
CMYK: 52%, 0%, 21%, 9%
OKLCH: 0.845 0.143 165.0

Strings, text values.

Orange-300

HEX: #FDBA74
RGB: 253, 186, 116
TW: Orange-300
CMYK: 0%, 26%, 54%, 1%
OKLCH: 0.83 0.16 70.0

Important: keywords, HTML tags.

Amber-300

HEX: #FCD34D
RGB: 252, 211, 77
TW: Amber-300
CMYK: 0%, 16%, 69%, 1%
OKLCH: 0.879 0.169 91.6

Numbers, constants, boolean values.

Purple-300

HEX: #D8B4FE
RGB: 216, 180, 254
TW: Purple-300
CMYK: 15%, 29%, 0%, 0%
OKLCH: 0.811 0.111 293.6

Classes, types, special objects.

Code example

Syntax highlighting preview

function calculateTotal(items) {
  const TAX_RATE = 0.21;
  let total = 0;

  for (const item of items) {
    console.log('Processing:', item);
    total += item.price;
  }

  return total * (1 + TAX_RATE);
}

Container & spacing

Container system, hero structure, and grid layouts.

Container system

Standard Container

max-width: 1280px

Homepage, portfolio, contact, general pages

Prose Mode

max-width: 65ch

Blog posts, talks, documentation — text-heavy content for optimal readability

Standard Container: 1280px Prose (Content): 65ch Breakpoint: 1024px

Grid layout

Columns: 12, --grid-col: 12 Gap: 32px, --grid-gap: 32px

3-6-3 (Three columns)

Sidebar L

Main Content

Sidebar R

8-4 (Content + Sidebar)

Main Content

Sidebar

9-3 (Wide + Narrow)

Main Content

Sidebar

4-4-4 (Three equal)

Column 1

Column 2

Column 3

6-6 (Two equal)

Column 1

Column 2

Mobile first

The site is mobile-first. Grid layout is optional for specific cases, the primary system is containers with responsive widths.

Shapes & radius

Sharp design system — 0px border radius everywhere.

Sharp edges everywhere. No rounding. Technical, modern look inspired by PlanetScale and OpenStatus.

Actions

Radius: 0px (Sharp)

Data

Radius: 0px (Sharp)

Components

Hero

Dark service-page hero — the single SDS variant.

The simplified surface keeps only the Service Page hero: dark background, two-column layout, orange-accented heading, and three stats with an orange left border. Buttons in heroes are left-aligned with the content flow.

Service Page

DevOps services tailored

I help companies build and manage modern infrastructure. From one-time consulting through hands-on training to long-term partnerships — always with emphasis on automation, security, and transferring know-how to your team.

6+ years

of DevOps and cloud infrastructure experience

20+ projects

successfully completed across industries

8 courses

regularly scheduled topics

Section

Full-width layout block — dark variant only on the simplified surface.

The simplified surface keeps only the inverse variant (zinc-900). Light, surface, and accent variants are dropped.

Inverse

Dark zinc-900 background. The only section variant on the simplified surface — used for hero sections, footers, and high-contrast areas.

Card

Inverse and Accent only, with an optional hover highlight.

The simplified surface keeps two card variants — Inverse (dark) and Accent (orange) — plus an optional Hover Highlight add-on. Default, Surface, and Accent Light are dropped.

Inverse

Inverse card

Dark background with a subtle zinc-800 border. The primary card variant on the simplified surface.

Accent

Accent card

Orange background for pricing blocks, CTAs, or highlighted content that demands attention.

Hover Highlight (on Inverse)

Hoverable card

Hover to see the lift and orange ring. Use on clickable cards like training listings or service links.

Hover Highlight (on Accent)

Hoverable accent card

The hover add-on works on the Accent variant too.

Variant reference

Variant	Background	Text	Tailwind classes
Inverse	zinc-900	zinc-100 / zinc-300	`bg-zinc-900 text-zinc-100 p-6 border border-zinc-800`
Accent	orange-500	black / black/80	`bg-orange-500 text-black p-6`

Hover highlight

Add the hover add-on to either card variant for interactive lift and an orange ring.

transition-all duration-300 hover:-translate-y-0.5 ring-1 ring-transparent hover:ring-orange-500

Buttons

Three colours: Dark (default), Accent, White.

Dark is the default button on the simplified surface. Use Accent for primary brand emphasis, White for inverted CTAs. Buttons use font-mono (JetBrains Mono) and are always right-aligned within their parent container.

Normal

Small

On Dark Background

Hover & active states

Variant	Default	Hover	Active	Text
Dark	zinc-900	zinc-700	zinc-800	white
Accent	orange-500	orange-600	orange-500	black
White	white	orange-50	orange-500	zinc-900

Sizing

Size	Padding	Font size	Tailwind classes
Normal	16px 32px	16px (base)	`px-8 py-4 text-base`
Small	8px 16px	14px (sm)	`px-4 py-2 text-sm`

Alignment

Buttons are always right-aligned within their parent container (cards, forms, dialogs). Use flex justify-end on the button wrapper.

Forms & inputs

Dark assembly only. Sharp corners, zinc-600 border, zinc-800 fill.

All form elements use sharp corners (0px border-radius). On the simplified surface only the dark assembly is documented — border-zinc-600 bg-zinc-800 text-zinc-100.

Text Input

Full Name

Email Input

Email Address

Phone Number

Checkbox

I agree to the Terms of Service Subscribe to newsletter

Radio Button

Preferred ContactEmail Phone

Toggle / Switch

Enable notifications Dark mode

Textarea

Message

Address (Structured)

Street Address

City

State / Region

ZIP / Postal Code

Country

Assembled form

Contact Us

We'd love to hear from you. Fill out the form below.

Token reference

Element	Dark classes
Input	`border border-zinc-600 bg-zinc-800 px-4 py-2.5 text-sm text-zinc-100`
Label	`block font-heading text-sm font-semibold text-zinc-100 mb-1.5`
Helper text	`text-xs text-zinc-400 mt-1`
Placeholder	`placeholder:text-zinc-500`
Focus border	`focus:border-zinc-400`

Loading & skeletons

Skeleton placeholders and shimmer animations.

Skeleton Loading

Callout

Four light-fill variants. Intentional bright islands on the dark page.

Callouts are deliberately light: they sit as bright islands on the dark page to draw attention. The Accent Dark variant from the main Design System is dropped — callouts here are always light-filled.

Accent

Important update

This is the primary callout variant. Use it to draw attention to key information.

Accent Light

Subtle emphasis

A minimal variant for when the callout should blend with a neutral surface while still providing a clear visual marker.

Neutral

Side note

A neutral callout for supplementary information that doesn't require strong emphasis.

Danger

Breaking change

Use this variant for warnings, errors, or destructive action notices that require immediate attention.

Variant reference

Variant	Border	Background	Label	Text
Accent	orange-500	orange-50	zinc-900	zinc-700
Accent Light	orange-500	white	zinc-900	zinc-700
Neutral	zinc-900	zinc-100	zinc-900	zinc-700
Danger	red-500	red-50	zinc-900	zinc-700

Guidelines

States

Form validation and interactive states — dark error recipe.

Danger / error states

On the simplified surface, error inputs keep the dark fill — the soft red wash from the main Design System is dropped here. The border and inline message carry the red signal.

Element	Token	Usage
Error border	Red-500 (2px)	Input borders, callout left border
Error text	Red-300	Inline error messages (lighter on dark)
Input fill	Zinc-800	Stays dark — no red background fill

Form Validation — Error

Please enter a valid email address.

Do's & don'ts

Contrast and accessibility guidelines on the dark surface.

Black text

✓ DO

High contrast on orange — black text wins.

Don't

White text

✗ DON'T

Low contrast (poor readability).

Please enter a valid email address.

✓ DO

Border outline + inline error text is sufficient.

Don't

Please enter a valid email address.

✗ DON'T

Solid red fill is too heavy — it breaks visual hierarchy.