UI CRAFT

Design systems, built down to the pixel

TODO(Pedro): one confident line on what this page proves that the case studies don't — UI depth, not just UX process.

100+ Design system components
8 years Desktop and mobile UI
Light + dark Themes built into every demo
Dev-ready Specs a developer can build from

TODO(Pedro): note that the examples below are rebuilt with fictional brands and data because the originals (energy, healthcare, enterprise clients) are under NDA.

DESIGN SYSTEM

How I structure a design system

Nodal DS: the same five-layer structure I use to keep a component library organized as it grows.

Done In progress Planned
Layer

Docs

TODO(Pedro): what lives in Docs and who reads it before opening Figma.

Button
Primary interactive control for actions, in four variants and two sizes.
Updated 3 Sep 2026
Usage example
Primary action inside a form footer
Building blocks
Label, optional icon, focus ring, state layer
COMPONENT ANATOMY

Anatomy of a component: Button

Every state, every variant, documented and live — not just a screenshot of one happy path.

State × variant matrix · Medium

Primary Secondary Tertiary Text Default Hover Pressed Disabled

Live · these actually respond to hover, focus and click

Semantic variants

Segmented button

Icon buttons

Spacing redlines

Show spacing
padding: 12px 20px height: 44px radius: 8px
COMPONENT → MODULE

From component to module

Voltly: a full consumption chart module built from the same buttons, tabs and tokens shown above.

app.voltly.example / consumption
Cumulative consumption
PeriodDay
Total consumption—
Total production—
Last updated14 Sep, 23:50
Filters & comparison
Rebuilt concept · fictional brand and data

Documented variants

Line · cumulative
Grouped bars · measured
Compact · mobile bars
MODULE → SCREEN

From module to screen

TODO(Pedro): one line framing this as the "can this person survive a real enterprise screen" section.

Healthcare

Chair scheduling board

Live view of every chair, consult room and X-ray slot in one clinic, with a running-late indicator and a movable now-line.

app.dentora.example / schedule
Search patients
Prague · Vinohrady
3 running 15m late
JNJana Nová
Chair 01Notes
1h 11m left
Chair 02Prep
24m left
Chair 03
—
Chair 04Notes
48m left
Chair 05Break
12m left
Chair 06
1h 30m left
Chair 07Prep
6m left
Chair 08
—
C1Notes
35m left
C2Break
10m left
X-ray
50m left
Now
Nováková T.
Filling
Dvořák M.
Cleaning
×Horáková L.
Extraction
Locked
Beneš J.
Checkup
Svobodová K.
Whitening
Malý P.
Consult
Locked
King R.
X-ray

Walk-in

Nováková R.
Waiting 8m
2 checks
Petr H.
Waiting 15m
1 check
Tichá M.
Waiting 3m
New patient
Král J.
Waiting 22m
2 checksUrgent

Scheduled · 7:00–10:00

All chairs
7:008:009:00
Chair 01
FillingNováková0m
Chair 02
CleaningDvořák-5m
Chair 03
CheckupMalá15m
Chair 04
ExtractionHoráková0m
Chair 05
WhiteningKrál0m
Chair 06
FillingBeneš-5m
Chair 07
CleaningSvobodová0m
Chair 08
CheckupNová0m
C1
ConsultMalý15m
C2
ConsultDvořáková0m
X-ray
X-rayKing-5m
7:55
Rebuilt concept · fictional brand and data
Healthcare

Front desk queue

Check-in flow for reception: who's booked, who's waiting, and how long they've been waiting.

app.dentora.example / front-desk

Front desk

Scheduled patients, grouped by arrival window.

Search scheduled patients
NameStart
Nováková Tereza08:00
Dvořák Martin08:30
Horáková Lucie09:15
NameStart
Beneš Jakub10:00
Svobodová Klára10:45
Malý Petr11:30
NameStart
Král Jan13:00
Tichá Michaela13:30
Nová Adéla14:15

Waiting patients

NameStartArrived / Waiting
Dvořák Martin08:3008:32 · 4 min
Horáková Lucie09:1509:10 · 9 min
Malý Petr11:3011:12 · 19 min
Král Jan13:0012:58 · 2 min
Rebuilt concept · fictional brand and data

By procedure

Whitening · Svobodová Klára
Consult · Malý Petr
Extraction · Horáková Lucie
Checkup · Nová Adéla
Filling · Král Jan
Rebuilt concept · fictional brand and data
Energy

Notification preferences

Global, account and per-location controls with real cascade logic: turn a parent off and its children grey out and disable.

app.voltly.example / notifications
Settings
User settings Notifications
Contacts
Help & support Branches Partner electricians
About
Ratings Guide App info
Company
About us Website
Documents
Documents
Settings / Notifications

Notifications

Choose what you hear about, and where.

Rebuilt concept · fictional brand and data
Energy

Outage lookup

Public tool to check planned and unplanned interruptions by address, meter or municipality.

voltly.example / outages

Check outages and faults

See planned and unplanned interruptions at your address, meter or in your municipality.

×

Try: Na Poříčí 12, Prague

Events at Na Poříčí 12, Prague 1

Planned outage
18 Sep 08:00–14:00
Ongoing outage
started 15 Sep, 06:40
Finished outage
12 Sep, 21:10
Cancelled outage
was 10 Sep
Ongoing fault
reported 15 Sep, 09:02
Resolved fault
9 Sep, 17:45

Also nearby

Increased faults in the area
More reports than usual in the last 24 hours.
Emergency state
Declared for Prague 1 – Old Town.
Fault already reported nearby
Our team is aware and investigating.
Weather warning
Storm expected to affect overhead lines.
Rebuilt concept · fictional brand and data
Compliance

Module overview

Landing screen for a compliance suite: every module as a card, with record counts and what's awaiting approval.

app.complia.example / modules
Overview Apps & modules Calendar Contacts File storage
Your modules
Legal requirements Nonconformities Audits
Governance docs Internal audits Work tools Favorites
Search
EN
Apps / Modules

Integrated management system

02. Legal requirements
341
Total records · +2 this week
4
Awaiting approval
REQ-2291yesterday at 16:21
REQ-22882 days ago
Show all →
07. Minor nonconformity
128
Total records · +1 this week
2
Awaiting approval
NC-05123 days ago
Show all →
09. Major nonconformity
19
Total records · +0 this week
1
Awaiting approval
NC-00911 week ago
Show all →
Archive
902
Total records
0
Awaiting approval
Show all →
Rebuilt concept · fictional brand and data
Energy

Customer home, mobile

Mobile landing screen: announcements, per-address consumption, active service requests and quick actions.

Welcome back, Jana
3 new
Overflow detected
Cottage · 14 Sep, 22:10 — consumption spike outside your usual pattern.
Higher consumption
Home · this month is running 18% above your average.
Guide for connecting your own solar
New to self-generation? Start here.
Document needed
Upload proof of address to finish your tariff change.
My places
Home
Na Poříčí 12, Prague
Weekly consumption142 kWh
Low tariff activeuntil 6:00
Water heatingstarts at 14:00
Cottage
Lipno nad Vltavou
Weekly consumption38 kWh
Active requests
In progress#REQ-48213
Change of contracted capacity
Created 2 SepDeadline 30 SepNa Poříčí 12
65% complete
Scheduled#REQ-48390
Smart meter installation
Created 10 SepDeadline 28 SepCottage, Lipno
20% complete
What do you need?
No power
Submit meter reading
Planned outages
App settings
Find an electrician
Company website
Get advice
Meter unsealing
Rebuilt concept · fictional brand and data
Compliance

Reporting dashboard

Nonconformity trend, category breakdown and department ranking in one reporting view: a trend chart, a donut and a ranked bar list together, the density a compliance lead actually needs.

app.complia.example / reports
Apps / Reports

Nonconformity reporting

42
Open nonconformities
↑ 4 vs last month
6.2 days
Avg. resolution time
↓ 0.8 days
5
Overdue
↑ 2 vs last month
18
Closed this month
↓ 3 vs last month
Minor vs major, by month
Solid: minor nonconformities. Dashed: major.
Minor Major
By category
Share of all open nonconformities
42Open
By department
Open nonconformities assigned per department
Production
16
Quality
11
Logistics
9
Maintenance
6
Rebuilt concept · fictional brand and data
Admin / back office

Form builder

Not just filling in records, building the templates other people fill in. A drag-free field builder for compliance intake forms: a live canvas on the left, a field palette on the right, add and remove fields and see the preview update immediately.

admin.complia.example / templates / new
Templates / Intake forms
TEMPLATE

Nonconformity intake Draft

Section 1
Field name
Heading
Field name
Long text
Field name
Heading
Field name
Heading
Field name
Long text
Field name
Dropdown

Add a field

Rebuilt concept · fictional brand and data
Clear this section?

Every field in Section 1 will be removed from the template. This can't be undone.

Saved
HANDOFF

Handoff: annotated spec

The same notification module, with the annotations and redlines a developer would actually get.

Show annotations
Show spacing
app.voltly.example / notifications
Rebuilt concept · fictional brand and data
PUBLIC WORK

Case studies you can read in full

The UX process, research and outcomes behind four shipped products, with no NDA in the way.

Intimmo e-commerce site

Intimmo

Lingerie e-commerce redesign built around getting the size right.

View case study →
Mandlárna e-commerce site

Mandlárna

UX research and redesign for a food and nut e-commerce brand.

View case study →
Kávovník e-commerce site

Kávovník

Conversion-focused redesign informed by usability testing and analytics.

View case study →
Tritius library system

Tritius

Library system UI redesigned around how librarians actually work.

View case study →

Let's talk

Have a UI problem worth solving?

Open to full-time, contract and selected project work on complex B2B and enterprise products.

Get in touch