Design System

Complete visual style specification. This document serves as the single source of truth for design and web development.

Foundations

Typography

Font families, typographic scale, and text styling guidelines.

Display

Headings

IBM Plex Sans — All headings (H1–H3)

UI

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
A Inherit Inter Medium (500) Inherit Amber-800 #92400E

Link Styles

Light background
Link on light background
Dark background
Link on dark background

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

Colors & Palette

Brand colors, text palette, and background combinations.

Primary Color

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.

Orange-600

HEX
#ea580c
TW
Orange-600

Primary button hover state.

Text Accent

Amber-800

HEX
#92400E
RGB
146, 64, 14
TW
Amber-800

Text links on white background, highlighted text, interactive text, labels. WCAG AA contrast.

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 backgrounds, error state fills, danger callout background.

Dark Background

Zinc-900

HEX
#18181B
TW
Zinc-900

Headings (h1-h5), dark section backgrounds (hero, footer), code blocks.

Zinc-100

HEX
#F4F4F5
TW
Zinc-100

Text on dark background.

Zinc Text Palette

Zinc-700

HEX
#3F3F46
TW
Zinc-700

Body text on light background.

Zinc-500

HEX
#71717A
TW
Zinc-500

Secondary text, captions (small).

Zinc-100

HEX
#F4F4F5
TW
Zinc-100

Text on dark background (Zinc-900).

Zinc-300

HEX
#D4D4D8
TW
Zinc-300

Secondary text on dark background.

Background Combinations

Light background

Block on light background

Dark background

Block on dark 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

Hero Section

Hero Structure

Page Title with Accent

Description text that summarizes the page content. The left column holds the heading, description, and optional CTA buttons.

Value

stat label

Value

stat label

Structure: Dark background (Zinc-900) → Two-column flex layout (lg:flex-row lg:justify-between) → Left: heading + description + buttons → Right: stats with orange left border. Homepage uses light background (Zinc-100) with avatar image instead of stats.

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)

Animations

Motion tokens and live animation demos.

Fade In Up

Duration: 0.6s / 1.2s (slow) Easing: ease-out Offset: 30px bottom-to-top
Live Demo — Scroll into view

This element fades in

animation: fadeInUp 0.6s ease-out

Typewriter Text

Duration: 3s (configurable) Steps: steps(37, end) Cursor: blink 0.8s
Live Demo — Typewriter
We code precisely. We deliver fast.

Hover Highlight

Border color: Orange-500 (#f97316) Border width: 1px Transition: 0.3s ease
Light bg / Light block
Hover me
Light bg / Dark block
Hover me
Dark bg / Light block
Hover me
Dark bg / Dark block
Hover me
Components

Section

Full-width layout block with background variants for structuring page content.

Default

Default

White background. Used for standard content sections.

Surface

Surface

Subtle zinc-50 background. Used to differentiate content areas without strong contrast.

Inverse

Inverse

Dark zinc-900 background. Used for hero sections, footers, or high-contrast areas.

Accent

Accent

Orange-500 background. Used for call-to-action blocks or highlight sections.

Variants

Variant Background Use case
default White Standard content
surface Zinc-50 Subtle content separation
inverse Zinc-900 Hero, footer, high-contrast
accent Orange-500 CTA blocks, highlights

Hero

Full-width page header sections for different page types.

Heroes use a two-column flex layout on desktop (lg:flex-row) that stacks on mobile. Most variants use the inverse (dark) background. Unlike cards and forms, buttons in heroes are left-aligned with the content flow.

Homepage

I'm
Vojtěch Mareš,
DevOps architect.

Together we'll reduce your infrastructure costs, eliminate technical debt, and prepare your IT infrastructure for rapid scaling.

Avatar
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

Content Page

Talks at conferences

I regularly speak at professional conferences in the Czech Republic and abroad. I share practical experience in DevOps, cloud-native technologies, and modern infrastructure.

8 talks

at professional conferences

7 conferences

in CZ and abroad

4+ years

of speaking experience

Blog Article

Replacing Kubernetes Ingress-NGINX

Finding a simple replacement for Kubernetes Ingress-NGINX. Ingress controllers are complex, and matching the simplicity of NGINX is hard.

March 5, 2026

published

#kubernetes

topic

6 min

reading time

Training / Product
Logo

Kubernetes training

Learn to deploy and run containerized apps at scale. Manage clusters, deploy with Helm, and handle everyday Kubernetes operations.

2 days

training duration

€220

price per person excl. VAT

Styling Guidelines

Layout Pattern

All hero variants (except Blog Listing) use a two-column flex layout: flex flex-col gap-y-8 lg:flex-row lg:justify-between. Content stacks vertically on mobile and splits horizontally at the lg breakpoint (1024px). The left column holds text content (max-w-xl), the right column holds stats or an image.

Homepage Avatar

The homepage hero avatar is allowed to overflow horizontally to the right edge of the section. It also extends to the bottom edge with no padding. Use negative margins (-mb-16 -mr-6) to offset the section padding. The parent section should use overflow-hidden to clip any excess.

Typography

Element Font Size Color
Page heading IBM Plex Sans (font-display) 3xl – 4xl (responsive) white (dark) / zinc-900 (light)
Homepage heading IBM Plex Sans (font-display) 3xl – 6xl (responsive) white
Article heading IBM Plex Sans (font-display) 2xl – 3xl (responsive) white
Accent phrase (inherits) (inherits) orange-500
Description Inter (font-body) base (16px) zinc-400 (dark) / zinc-600 (light)
Stat value Inter (font-body) 3xl (page) / xl (article) white
Stat label Inter (font-body) sm (14px) zinc-400

Stats Pattern

Stats use the compact callout pattern with an orange left border: border-l-2 border-orange-500 pl-6. The value uses font-body text-3xl font-bold text-white and the label uses text-sm text-zinc-400. A dedicated Stats component will be implemented separately.

Button Alignment in Heroes

Unlike cards and forms where buttons are right-aligned (flex justify-end), hero buttons are left-aligned with the content flow using flex flex-wrap gap-4. The CTA should be visually connected to the preceding copy, not pulled away from it.

Variant Reference

Variant Background Stats Buttons Image / Icon
Homepage light (zinc-100) — 1 (CTA) Avatar
Service Page dark 3 3 —
Content Page dark 3 — —
Blog Listing dark — — —
Blog Article dark 3 (metadata) — —
Training dark 2 — Logo / Icon

Orange Accent Text

Key phrases in hero headings use text-orange-500 to highlight the most important word or name. This is consistent across all hero variants — the homepage highlights the name, service/content pages highlight the key topic.

Card

Container component with background variants, shadows, and hover effects.

Cards use overflow-hidden p-6 as base classes. Border-radius is 0px from the global reset. Five background variants cover light, dark, and accent contexts. An optional hover effect adds lift and an orange ring.

Default

Default card

White background with a subtle inset shadow. The primary card variant for content on light pages.

Surface

Surface card

Elevated card with a prominent outer shadow. Use for featured content or cards that need visual prominence.

Inverse

Inverse card

Dark background for use on light sections. Pairs well with white or accent buttons.

Accent

Accent card

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

Accent Light

Accent Light card

Soft orange tint for gentle emphasis without the full accent weight.

Hover Effect

Hoverable card

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

With Content

Kubernetes

Learn to deploy and operate containerized applications at scale. Cluster management, Helm, and day-to-day operations.

od 5 400 CZK

Card Grid

Konzultace

2 500 CZK / hod

Expert review of your infrastructure, audit, or strategic consulting for one-off needs.

Skoleni

od 5 400 CZK

Hands-on workshops with practical examples. All materials and sample code included.

DevOps spoluprace

cena dle domluvy

Long-term partnership for infrastructure management, platform development, and team support.

Variant Reference

Variant Background Shadow Text Tailwind Classes
Default white inset-shadow-sm zinc-900 / zinc-600 bg-white inset-shadow-sm inset-shadow-zinc-900/10
Surface white shadow-xl zinc-900 / zinc-600 bg-white shadow-xl shadow-zinc-900/10
Inverse zinc-900 none white / zinc-300 bg-zinc-900
Accent orange-500 none black / black/80 bg-orange-500
Accent Light orange-50 none zinc-900 / zinc-600 bg-orange-50

Hover Effect

Add the hover addon to any card variant for interactive lift and orange ring. Use on clickable cards (training listings, service links).

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

Buttons

Button styles and interactive element guidelines.

Buttons use font-mono (JetBrains Mono) to stand out and differentiate from badges which use Inter (font-sans). All buttons have 0px border-radius consistent with the design system. Buttons are always right-aligned within their parent container.

Normal
Small
On Dark Background

Hover & Active States

Variant Default Hover Active Text
Accent orange-500 orange-600 orange-500 black
Dark zinc-900 zinc-700 zinc-800 white
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.

In a Card

Card content goes here with some descriptive text.

In a Form

Forms & Inputs

Input fields, form controls, and validation guidelines.

All form elements use sharp corners (0px border-radius) consistent with the design system. Inputs use a 1px zinc border with a subtle focus transition.

Text Input
Email Input
Phone Number
Checkbox
Radio Button
Preferred Contact
Toggle / Switch
Address (Structured)
Textarea

Assembled Form

Light
Contact Us

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

Dark
Contact Us

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

Styling Guidelines

Input Tokens

Classes for text-based inputs (text, email, tel, textarea).

Element Light Classes Dark Classes
Input border border-zinc-300 bg-white px-4 py-2.5 text-sm text-zinc-700 border border-zinc-600 bg-zinc-800 px-4 py-2.5 text-sm text-zinc-100
Textarea Same as input + resize-y Same as input + resize-y
Label block font-heading text-sm font-semibold text-zinc-900 mb-1.5 block font-heading text-sm font-semibold text-zinc-100 mb-1.5
Helper text text-xs text-zinc-500 mt-1 text-xs text-zinc-400 mt-1
Placeholder Default browser (zinc-400) placeholder:text-zinc-500

Control Tokens

Checkbox, radio, and toggle all use appearance-none to strip browser defaults. Toggle uses the peer pattern with a hidden sr-only checkbox.

Control Default State Checked State Notes
Checkbox w-5 h-5 border border-zinc-300 bg-white checked:bg-orange-500 checked:border-orange-500 SVG checkmark via CSS background-image
Radio w-5 h-5 border border-zinc-300 bg-white bg-orange-500 + inset box-shadow Square shape (0px radius), inset dot via box-shadow
Toggle w-11 h-6 bg-zinc-300 peer-checked:bg-orange-500 + translate-x-5 Hidden sr-only checkbox + peer siblings for track and knob

States

State Border Background Label Color Description
Default zinc-300 white zinc-900 Resting state
Focus zinc-500 white zinc-900 focus:border-zinc-500, no outline
Error red-500 (2px) red-50 zinc-900 Label stays default; use border-2 border-red-500, error message in red-700
Disabled zinc-200 zinc-50 zinc-400 opacity-50 cursor-not-allowed

Spacing Rules

Relationship Value Class
Label to input 6px mb-1.5
Between fields 20px space-y-5
Inline field gap 16px gap-4
Form padding (in card) 32px p-8
Helper text to input 4px mt-1

Dark Mode Token Swap

When placing forms on dark backgrounds (hero, footer), swap these tokens.

Element Light Dark
Card background bg-white border-zinc-200 bg-zinc-900 border-zinc-700
Input border border-zinc-300 border-zinc-600
Input background bg-white bg-zinc-800
Input text text-zinc-700 text-zinc-100
Placeholder Default placeholder:text-zinc-500
Focus border focus:border-zinc-500 focus:border-zinc-400
Toggle track (off) bg-zinc-300 bg-zinc-600
Checkbox (unchecked) border-zinc-300 bg-white border-zinc-600 bg-zinc-800

Loading & Skeletons

Skeleton placeholders and shimmer animations.

Skeleton Loading

Callout

Highlighted content blocks for important information.

Accent

Important update

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

Accent Dark

Dark section callout

Use this variant on dark backgrounds such as hero sections or footers. The orange border remains the accent anchor.

Accent Light

Subtle emphasis

A minimal variant for when the callout should blend with a white page 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.

The sidebar active link uses a compact version of the accent callout pattern: border-l-2 border-orange-500 bg-orange-50

Styling Guidelines

Structure

Every callout uses a strong left border (border-l-4) with p-6 padding and sharp corners (border-radius: 0).

Typography

Element Font Weight Notes
Label Inter (font-heading) 600 (semibold) Optional heading line
Text Inter (font-heading) 400 (normal) Body content

Color Combinations

Variant Border Background Label Color Text Color
Accent orange-500 orange-50 zinc-900 zinc-700
Accent Dark orange-500 zinc-900 white zinc-300
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

Context Rules

Light backgrounds

Use Accent, Accent Light, Neutral, or Danger variants. Label text is zinc-900, paragraph text is zinc-700.

Dark backgrounds

Use the Accent Dark variant. Label text is white, paragraph text is zinc-300.

Danger Styling

Use the danger palette (Red-500 for borders/highlights, Red-50 for backgrounds) for destructive actions, error states, and critical warnings. Apply consistently across callouts, form validation, buttons, and alerts.

Destructive action warning

This action cannot be undone. All data associated with this account will be permanently deleted.

Compact Variant: Sidebar

The sidebar active link uses a compact callout pattern with a thinner border (border-l-2 instead of border-l-4) and the accent color scheme. This demonstrates how the callout pattern scales down for inline or navigation contexts.

Guidelines

States

Form validation and interactive states.

Danger / Error States

Error and danger states use the red palette consistently across all interactive elements: form inputs, inline messages, and background fills.

Element Token Usage
Error border Red-500 Input borders, callout left border
Error text Red-700 Inline error messages
Error background Red-50 Input group fills, danger callout background
Form Validation — Error

ⓘ Password is too short

Do's & Don'ts

Contrast and accessibility guidelines.

Do
Black text
✓ DO

High contrast on orange.

Don't
White text
✗ DON'T

Low contrast (poor readability).

Do

ⓘ Password is too short

✓ DO

Border outline + inline error text is sufficient.

Don't

ⓘ Password is too short

✗ DON'T

Red background fill is too heavy — it breaks visual hierarchy.