Design systems that adapt to your look.

A sample design you can apply themes to. Ten palettes — each pairs a design-system token set with a distinct heading typeface. Toggle a palette and every component, card and piece of content shifts together.

See the work Sample design

Work

Real projects — each one themed with the same token-driven system.

1

10-palette theme system

A sample design system with headings plus ten paired typefaces — toggle any palette and everything shifts.

2

Sample design deck

Feature card, form, table, buttons and toast — every component themed to one palette.

3

Design-token driven

One set of CSS variables keeps colors, surfaces, borders and shadows, easy to fork and hand off.

Sample design — apply the theme

A realistic product UI built with real components. Toggle any palette and the whole page — colors, surfaces, borders, type and content — shifts together.

Tag design system — in use.

A mobile-first interface that reads like a real product — header, feature cards, a quick-add form, a data table, actions and a toast. Switch palette to see every layer change together.

Try the form View projects
📦

Feature card

Collections of sample content wrap around your product worth — each one a self-contained block on a team.

⚡

Quick-add form

Fast entry fields for your workflow — text, number, select, checkbox — all themed.

📋

Data table

Clean tabular data ready for pagination, sorting and status badges.

ProjectStatusOwnerDue
Design systemDonePriyaOct 28
Theme deckDoneLenaOct 25
Sample UIDoneMarcusOct 24
DeployWaitingHishamNov 1
« Prev 1 2 3 Next »
✓ Theme switched — the palette now matches your look.

The type sample

Body text at 1.6 line-height... link sample — with a bold and an emphasis inside.

:root { --color-bg: #eff1f5; --color-text: #4c4f69; }

“Themeable UI that ships on time.”

Latte

Elegant light: Lora headings.

:root {
  --color-bg: #eff1f5;
  --color-text: #4c4f69;
  --font-heading: "Lora";
}

Nord

One dark, JetBrains Mono.

Dracula

Vampire dark, Bebas Neue.

Gruvbox

Retro earth, Crimson Pro.

Solarized Light

Muted light, Outfit.

What I build for

Interfaces and design systems that survive a real product cycle.

1

Color + type together

Every theme couples a design-system palette with a purposeful heading typeface — never just color.

2

Instant switching

Pick a palette from the header and the whole page shifts — colors, depth, even typography.

3

Design-token driven

One set of CSS variables keeps colors, surfaces and shadows, easy to fork and hand off.

What collaborators say

Professional scenarios that ship.

“The theme system cut our design QA time in half.”

— Leila K., Product Design

“A themeable UI I can hand off without a style guide.”

— Omar M., Engineering Lead

“From blank page to shipped in days, not weeks.”

— Sara A., UX Research

Get in touch

hello@veloxai.work · X · GitHub