Design direction · Tommy Roldan

A small operating system in a browser tab.

The work is the apps. The desktop is the home page. Every icon opens a project and every project window carries Open ↗ to the live URL. Nothing here is a scrolling brochure — the page itself does not scroll; windows and sheets do. macOS-shaped on desktop, iOS-shaped on the phone. Every word in the mocks below is copy from content.json.

Mock 1 · the home

Desktop, 1280 × 760

Menu bar 28px, icon column at 58px squircles, WrapMe open in a 760×560 window, dock pill at 19px radius with 52px tiles. Hover a dock tile: it magnifies by changing size, so the pill reflows and neighbours never overlap.

TRFinderFileEditViewGoWindowHelp
—
Canary
WrapMe
Clear Care Dental
Versatile Customs
World Resort Rescue
RG
Roldan Group
Clear Care Dental's Enterprise Website
Alexandra Rossi Portal
Work
About

WrapMe

weblive2026 Open ↗
WrapMe, live

Let them see the wrap
before they book it.

Real-time 3D configurator for wrap and paint shops. Customers orbit their own car in the browser, try real films across six independently painted zones, and send the shop the exact build - rendered live in WebGL, no AI and no guesswork.

Next.jsWebGLNeon

On the live app

  • Most configurators tint a photo.This one renders the film.
  • Three steps to a booked job
  • One extra job pays for the year
  • Questions shops ask
  • Put it in front of a customer today
Finder
Brave
B
Music
♪
Paint
✎
Little River
LR
Terminal
>_
Trash
🗑
Mock 2 · the menu and Launchpad

TR menu open, Launchpad over the desktop

The TR menu is the site map. Launchpad is every app at once — the same icons at 58px, with live search. Both are glass over the wallpaper, not a new page.

Mock 3 · the phone

Launcher and app sheet, 390px

iOS-shaped: status bar, identity widget, search, 4-column grid, page dots, floating dock, home indicator. No Android back/home/recents bar — that is the specific thing that went wrong last time. Tapping an app slides a sheet up; the launcher behind scales to .94 and dims.

—
TR
Tommy RoldanWeb Developer & CreativeMiami, FL
⌕Search
Work
Canary
WrapMe
Clear Care Dental
Versatile Customs
RG
Roldan Group
World Resort Rescue
Alexandra Rossi Portal
Clear Care Dental's Enterprise Website
About
Tools
Contact
B
♪
>_
✉
—

Canary

Done
Canary, live

Canary

toollive2026

Windows diagnostic tool that finds failing drives and crash causes vendor software reports as healthy. Reads the SMART counters other tools skip, explains every finding in plain English, and says “could not verify” rather than pretending a check passed.

PowerShellWPFWMI/CIM

On the live app

  • Samsung’s own tool called this drive Good.
  • What it looks at.
  • Four things it refuses to do.
  • Before you wipe the whole machine.
  • Find out what your PC isn’t telling you.
Open ↗
Tokens

Palette & roles

Paper inside the windows, glass outside. #4A54DC is the one accent — the site's own rgb(90,100,232) darkened until it clears AA as both a fill and small text. #00907B is status only. Every pair below is measured against its own background.

--canvas#FAF9F6 · page & window body
kept from the live site

--surface-1#F4F2EC · cards, toolbars

--surface-2#EDEAE2 · hover, chips

--surface-3#E4E0D6 · pressed, placeholder

--border#DFDBD1 · hairlines

--text#161616 · body & headings
17.3:1 on canvas · kept

--text-222,22,22 @ .66
5.68:1

--text-322,22,22 @ .46
3.02:1 · meta only

--accent#4A54DC · fill, focus, active
5.35:1 on canvas · white on it 5.59:1

--accent-text#3B44BE · links, small text
7.29:1

--live#00907B · status dot & badge
3.81:1 · never body copy

--night#0E0E10 · wallpaper base
cream on it 18.5:1

--cyan#00E0C6 · dark chrome only
11.5:1 on night

--accent-on-dark#8A92F0 · accent as text on glass
6.86:1

Type

Space Grotesk + Archivo, at real scale

Both families are already in the live DOM — 392 and 106 uses — and they are the pairing the recommended system asked for, so nothing new is introduced. Display tightens as it grows; body never does.

H1 · 600
Building products that move the work forward.
H2 · 600
Builder, rider, Miami native.
H3 · 500
Straight answers to what people ask most.
Body · 400
Storefront for a vehicle wrap studio, built around the 3D visualizer I developed for the shop. Customers design a wrap in the browser, browse films and services, and book the job or check out - PPF, colour-change wraps, ceramic tint and lighting all in one flow.
Label · 500
Apps · Web · AI Agents · Tools
Numerals
13+   6   2015  projects shipped · live products · building since
Map

Every app, and what feeds it

App / routeWhat it showsSource
/ DesktopWallpaper, icon column, dock, menu bar, live clock. Work opens on first visit.projects, dock
Work · /work/Every project as a card, filtered by all · apps · web · ai · tool · archivedprojects, categories
/work/<key>/Shot, title, year, badges, description, tech, quoted live headings, Open ↗one project
About · /about/Photo, role, location, taglines, 13+/6/2015, capabilities, Strava · Steam · Discordbrand
Mail · /contact/Compose layout: troldan@terryco.com, Miami FL, six social rowsbrand.email, socials
Tools · /tools/The tool-category projectsprojects
Help · /faq/Ten questions and answers, verbatimfaq
Terminalwhoami · ls capabilities · cat taglinesbrand
MusicNow spinning: Midnight City — M83 → Apple Music profilebrand.nowSpinning
BraveBrowser window, URL bar tommyroldan.com, renders the routes aboveroutes
PaintCanvas, palette, Clear — saves to the wall—
Little Riverlittleriver.site in a browser windowdock
TrashArchived projects as greyed rowsprojects (archived)
Finder → DocumentsPrivacy policy, Rehab Pro privacy, GRVT — open inside the windowexisting pages