Visual Design Book

Pracovní Časomíra
Design System

A comprehensive visual language reference for a glassmorphism-based time tracking application built with React. Dark teal palette, layered transparency, and monospace precision.

12
Design Tokens
2
Font Families
8
Components
3
Animations
Scroll to explore
01 — Color Palette

Colors & Tokens

A deep oceanic palette grounded in dark teals and cyans. The system uses CSS custom properties for theming consistency. The intentional low-saturation backgrounds let the accent teal glow stand out — creating visual depth without overwhelming the user.

AA ✓ w/ text
Background Primary
--bg-primary
#011826 rgb(1, 24, 38)
AA ✓ w/ text
Background Secondary
--bg-secondary
#012a3a rgb(1, 42, 58)
4.5:1 on dark
Accent Primary
--accent-primary
#03A6A6 rgb(3, 166, 166)
5.5:1 on dark ✓
Accent Secondary
--accent-secondary
#049DA5 rgb(4, 157, 165)
gradient end
Accent Tertiary
--accent-tertiary
#025940 rgb(2, 89, 64)
14:1 on dark
Text Primary
--text-primary
#e6f4f5 rgb(230, 244, 245)
7.2:1 on dark
Text Secondary
--text-secondary
#8bc9d0 rgb(139, 201, 208)
danger / stop
Danger
--danger
#ff4757 rgb(255, 71, 87)
warning / pause
Warning
--warning
#ffa502 rgb(255, 165, 2)
Glassmorphism Layers
Three transparency levels create visual hierarchy. Each uses backdrop-filter: blur(20px) saturate(180%) for the frosted effect.
Level 1 — Subtle
rgba(3, 127, 140, 0.08)
Level 2 — Default
rgba(3, 127, 140, 0.15)
Level 3 — Emphasized
rgba(3, 127, 140, 0.25)
02 — Typography

Type System

Two fonts with distinct roles: DM Sans for readability in UI text, JetBrains Mono for numerical precision and technical labels. The pairing creates a clear split between "human" and "data" layers.

DM Sans
UI / Body / Headings
3rem / 700
H1 Title
Pracovní Časomíra
1.8rem / 700
H2 Section
Historie práce
1.3rem / 700
Card Title
Vývoj webové aplikace
1.1rem / 500
Subtitle
Sledujte více projektů současně
1rem / 400
Body
Nový projekt pro sledování pracovní doby
0.95rem / 600
Button
▶ Start
0.9rem / 400
Label
Aktivní projekty
Aa Regular 400
Aa Medium 500
Aa SemiBold 600
Aa Bold 700
JetBrains Mono
Timer / Data / Stats
2.5rem / 700
Timer Main
01:42:37
2rem / 700
Stat Value
5
1.5rem / 700
Duration
02:15:00
0.9rem / 400
Timestamp
06.03.2026 14:30 → 06.03.2026 16:45
0.85rem / 600
Status
● BĚŽÍ
01:00 Regular 400
01:00 SemiBold 600
01:00 Bold 700
03 — Components

UI Components

Every interactive element extracted and documented. Components use consistent border-radius, shadow depth, and glass layering across all states.

Buttons
Eight button variants across three systematic sizes. Gradient fills signal primary actions; ghost/outline styles for secondary. All share the same radius (0.75rem), font weight (600), and uppercase treatment.
Size scale
.btn-sm — 0.5rem 1rem
.btn-md — 0.9rem 1.75rem
.btn-lg — 1.1rem 2.25rem
All variants (default size: md)
.btn-start
.btn-stop
.btn-pause
.btn-resume
.btn-add (lg)
.btn-delete (sm)
.btn-export
.btn-clear
Text Input
Glass-layered input with subtle backdrop blur. The focus state adds a teal glow ring (box-shadow) and shifts the background for a clear active signal.
Default
Focused
Project Card — States
The central component. Three states control border color and timer indicator: idle (default border), running (teal border + animated top bar), paused (amber border + static bar).
Design System
00:00:00
○ ZASTAVENO
API Integration
01:42:37
● BĚŽÍ
Bug Fixes
00:35:12
⏸ POZASTAVENO
Stat Cards
Dashboard metrics in a 4-column grid. Hover lifts the card to invite interaction. Monospace values ensure numerical alignment.
3
Aktivní projekty
1
Běží nyní
04:22:15
Dnes celkem
12
Dokončeno
History Item
Completed work sessions in a list layout. The hover slides right for a subtle directional cue, reinforcing the chronological flow.
Frontend Refactor
06.03.2026 09:00 → 06.03.2026 11:30 (pauza: 00:15:00)
02:15:00
Database Migration
05.03.2026 14:00 → 05.03.2026 16:45
02:45:00
Focus States
All interactive elements use :focus-visible for keyboard navigation. The combo approach: color-matched glow ring + subtle scale pulse. Tab through the buttons below to see it live.
Tab through these → teal glow + scale pulse
Destructive actions → color-matched rings
Implementation
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(3,166,166,0.3), 0 0 20px rgba(3,166,166,0.15);
  animation: focusPulse 0.3s ease-out;
}

@keyframes focusPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
Animations
Three CSS keyframe animations plus hover transforms. Hover each card below to preview.
fadeIn
opacity 0→1, 0.4s ease-out
slideUp
Y +30px→0, 0.6s ease-out
pulse
opacity 1↔0.5, 2s infinite
hover lift
Y -2px to -4px + shadow
04 — Layout & Spacing

Spatial System

A container-based layout at 1400px max-width with 2rem body padding. Spacing uses rem-based values for scalability. The grid system is flexible — auto-fill with 400px minimum card width.

Spacing Scale

xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2rem
2xl
2.5rem
section
3rem

Border Radius

4px
contrast badge
0.5rem
btn-delete
0.75rem
buttons, inputs, stat cards
1rem
timer display
1.5rem
cards, sections

Page Structure

Header (h1 + subtitle + total time) Date Card
Stats Grid (4 columns, auto-fit minmax 200px)
Input — New Project + Add Button
Project Card
Project Card
Project Card
History Section (header + list)
grid: auto-fill, minmax(400px, 1fr)
05 — UX Recommendations

Improvement Opportunities

Observations and actionable suggestions to elevate the interface. Ordered by impact — from accessibility essentials to polish details.

✅
Accent Secondary contrast is below AA
Resolved. Updated from #037F8C (3.8:1) to #049DA5 (5.5:1) — comfortably above WCAG AA's 4.5:1 threshold while maintaining clear visual separation from accent-primary (#03A6A6, 6.0:1). The hue shift is minimal, preserving the original teal character.
Accessibility — Fixed
✅
No keyboard navigation support
Resolved. Added :focus-visible to all interactive elements with a combo approach: teal glow ring (consistent with input focus) plus a subtle scale pulse animation (1.03x over 0.3s). Destructive buttons (delete, stop, clear) use color-matched red/amber rings instead. Uses :focus-visible over :focus to avoid showing outlines on mouse clicks.
Accessibility — Fixed
✅
Pause button text has critical contrast failure
Resolved. White text on amber/orange gradient (#ffa502) yielded ~1.5:1 contrast — deeply failing WCAG. Changed to color: var(--bg-primary) (#011826), matching the same dark-on-light logic already used on the Start button. Consistent pattern: light backgrounds always get dark text.
Accessibility — Fixed
✅
Timer glow causes eye strain on running digits
Resolved. Removed text-shadow from timer digits — the 30px+60px blur was visually slurring ticking seconds and creating eye fatigue. Moved the ambient glow to the timer container (box-shadow on .preview-timer.active) to keep the "active energy" feel without compromising digit legibility. The pulsing top bar remains as the primary activity indicator.
Readability — Fixed
✅
Button padding is inconsistent across variants
Resolved. Replaced ad-hoc padding overrides with a systematic three-tier size scale: .btn-sm (0.5rem 1rem), .btn-md (0.9rem 1.75rem — default), .btn-lg (1.1rem 2.25rem). Delete uses sm, primary actions use md, prominent CTAs (Add Project) use lg. Sizes are now intentional, not arbitrary.
Design System — Fixed
💡
Destructive actions need confirmation hierarchy
Delete and Clear use window.confirm() — a jarring browser dialog that breaks the glass aesthetic. Replace with an inline confirmation pattern: first click changes the button to "Confirm? / Cancel" state within the same card. This keeps the user in context and matches the visual language.
Interaction Design
💡
Timer precision creates cognitive load
The HH:MM:SS format with seconds ticking every 1s is visually noisy, especially with multiple cards running. Consider showing only HH:MM in the main display and revealing seconds on hover or in an expanded state. The constant motion competes with the user's focus.
Cognitive Load
💡
Empty state is a missed opportunity
The current empty state is just an icon and text. This is the first thing new users see — make it an onboarding moment. Add a subtle animation, a sample project name suggestion, or a quick "Try it: click Add to start" micro-tutorial to reduce time-to-first-action.
Onboarding
✨
Add haptic feedback for state transitions
When a timer starts, pauses, or stops, the only feedback is the visual state change. Adding a subtle CSS shake on stop, a scale pulse on start (e.g. card briefly scales to 1.02), and an amber flash on pause would reinforce the action without audio.
Micro-interactions
✨
History lacks filtering and search
As the history grows, finding specific entries becomes difficult. Add a date range filter and task name search. The existing glass input style can be reused — maintain consistency while adding utility. Consider grouping by day with collapsible sections.
Scalability
✨
Consider localStorage persistence UX
Data lives only in localStorage — if users clear browser data, everything is lost. Add an export reminder after N completed sessions, or show a subtle "last saved" timestamp in the footer to build trust that data is being preserved.
Data Safety
Copied!