Good software is drawnbefore it’s built.

Phöenix Group is the contracting practice of László Simon, a frontend and design-system architect. Every engagement starts on paper: the layers, the contracts between them and the budgets they have to hold — so the product can grow without a rewrite.

NoteBooking new engagements from 2027.

Request availability See how I work

UX note 1 This button sits in the header, here and at the end, with the same words every time, so it is never more than a screen away.

Fig. 01Section through a design-system platformScale 1:1

What I plan and build

4 details

For teams building web applications, and the platform teams whose components they run on.

Application architecture

Where state lives, where the backend’s model ends and yours begins, which feature owns what: decisions your team can build to.

Detail A1Scale 1:1

UX and information architecture

Research, user flows and structure: who needs what, in which order, in the fewest steps, settled before anything is drawn.

Detail A2 · see Fig. 02Scale 1:1

Delivery, end to end

Pipelines from pull-request previews to releases, tests that guard behaviour, and the API and data work when needed.

Detail A3Scale 1:1

Design systems

Tokens, web components and their docs: one library for every framework you run, accessible by default.

Detail A4Scale 1:1

Fig. 02User flow, an example: one step removed before anything is designedUX note 2

Then — design

Then it’s designedto be used.

I design in Figma with the same rules I code by: tokens instead of hex values, every state of every component drawn, and accessibility checked on the canvas — not after launch.

Request availability See the components

Client · on Fig. 02
Looks right. Will the button stay reachable on a phone?

You · now
Yes — pinned to the bottom, 48 px tall, and it never covers the text you’re reading.

UI design
Layouts, type and colour systems, and component libraries drawn to be reused, not redrawn.
Interaction details
Hover, focus, empty and error states; sensible defaults, undo, keyboard paths — the details people feel.
Accessibility
WCAG 2.2 AA from the first frame: contrast, focus order, target sizes and reduced motion.
Design-to-code handoff
Figma variables mapped one-to-one to design tokens, so the design and the code never drift.

How the work runs

Small steps, in order, each one finished before the next depends on it. When the job needs it, I take it end to end — API, data and deployment included.

primarysecondarydefaultRequest availabilitySee the componentshoverRequest availabilitySee the componentsfocusRequest availabilitySee the componentsdisabledRequest availabilitySee the components

DiscoveryGoals, users, constraints — and what “done” means.
ArchitectureThe structure, written down as decisions before any code.
Design and tokensEvery state drawn; design decisions stored as data.

Network

4components.jsWeb components, tested in real browsers
5integration.tsWired into your framework and your CI
6auditAccessibility, performance, visual diffs
7handover.mdDocs and Storybook — your team owns it

7 steps0 blockingfinished when your team owns it

Then it’s built, and tested.

Tested in real browsers, written down as decisions, measured against budgets. The toolbox, and the habits that come with it.

Styles

body.engineer {engineer.css:1

--languages: TypeScript, HTML, CSS
--components: Lit, custom elements
--frameworks: Angular
--testing: Vitest, Playwright
--docs: Storybook, decision records
--backend: Node, Hono, PostgreSQL
--ships: Docker, CI

}

Console

engineer.principles()

Accessibility is a requirement, not a ticket.engineer.js:3

Every component ships with tests and docs.engineer.js:4

Decisions are written down before they are coded.engineer.js:5

Rewrite requested — proposing a refactor plan instead.plan.js:9

ux.check(page)

Focus order follows reading order; every control has a name and a 24 px+ target. UX note 4ux.js:1

Principles that ship with every component

Small, reversible steps
Every change is small enough to review and safe to roll back.
Gates on every commit
Lint, types, unit and real-browser tests run before anything merges.
Decisions on record
Decision records say why, so the next developer doesn’t have to guess.

TESTING · CI/CD

❯ phoenix test --explain
  how a change is checked, fastest first — the same layers on every project
 
▾ static         lint · types · format                       pre-commit
  catches        ✘ a typo in a prop, an unused import
▾ unit           vitest · logic, tokens, utilities           every PR
  catches        ✘ an off-by-one in a date range
▾ component      real browsers: Chromium · Firefox · WebKit  every PR
  catches        ✘ a focus trap that never lets go
▾ visual         VRT: every story × 3 widths × light/dark    every PR
  catches        ✘ a 2 px shift in dark mode, a lost focus ring
▾ accessibility  axe on every story · contrast gate · keys   every PR
  catches        ✘ a button with no name, 3.9 : 1 body text
▾ end-to-end     playwright · the journeys that matter       every PR
  catches        ✘ a form that submits twice
▾ contract       API schema checked against the types        every PR
  catches        ✘ a field renamed on the backend
▾ smoke          after deploy · health, key pages, vitals    production
  catches        ✘ a missing env var, a 500 on one route
 
✔ 8 layers  a red check blocks the merge · flaky tests get fixed
 
❯ phoenix availability
  2027 — request a slot below ↓
❯ 

❯ phoenix test --explain
  how a change is checked, fastest first
 
▾ static · pre-commit
  lint · types · format
  ✘ a typo in a prop, an unused import
▾ unit · every PR
  vitest · logic, tokens, utilities
  ✘ an off-by-one in a date range
▾ component · every PR
  real browsers: Chromium · Firefox · WebKit
  ✘ a focus trap that never lets go
▾ visual · every PR
  VRT: every story × 3 widths × light/dark
  ✘ a 2 px shift in dark mode, a lost focus ring
▾ accessibility · every PR
  axe on every story · contrast gate · keys
  ✘ a button with no name, 3.9 : 1 body text
▾ end-to-end · every PR
  playwright · the journeys that matter
  ✘ a form that submits twice
▾ contract · every PR
  API schema checked against the types
  ✘ a field renamed on the backend
▾ smoke · production
  after deploy · health, key pages, vitals
  ✘ a missing env var, a 500 on one route
 
✔ 8 layers
  a red check blocks the merge · flaky tests get fixed
 
❯ phoenix availability
  2027 — request a slot below ↓
❯ 