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)

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

White background. Used for standard content sections.

Surface

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

Inverse

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

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 Listing

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

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

Address (Structured)

Street Address

City

State / Region

ZIP / Postal Code

Country

Textarea

Message

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

ⓘ Password is too short

Do's & Don'ts

Contrast and accessibility guidelines.

Black text

✓ DO

High contrast on orange.

Don't

White text

✗ DON'T

Low contrast (poor readability).

Password

ⓘ Password is too short

✓ DO

Border outline + inline error text is sufficient.

Don't

Password

ⓘ Password is too short

✗ DON'T

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

Design System

Typography

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Typographic Scale

Link Styles

Colors & Palette

Primary Color

Orange-500

Orange-50

Orange-600

Text Accent

Amber-800

Danger

Red-500

Red-50

Dark Background

Zinc-900

Zinc-100

Zinc Text Palette

Zinc-700

Zinc-500

Zinc-100

Zinc-300

Background Combinations

Code Colors

Blue-300

Emerald-300

Orange-300

Amber-300

Purple-300

Code Example

Container & Spacing

Container System

Hero Section

Page Title with Accent

Grid Layout

Shapes & Radius

Animations

Fade In Up

Typewriter Text

Hover Highlight

Section

Default

Surface

Inverse

Accent

Variants

Hero

I'mVojtěch Mareš,DevOps architect.

DevOps services tailored

Talks at conferences

Blog

Replacing Kubernetes Ingress-NGINX

Kubernetes training

Styling Guidelines

Layout Pattern

Homepage Avatar

Typography

Stats Pattern

Button Alignment in Heroes

Variant Reference

Orange Accent Text

Card

Default card

Surface card

Inverse card

Accent card

Accent Light card

Hoverable card

Kubernetes

Konzultace

Skoleni

DevOps spoluprace

Variant Reference

Hover Effect

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