UX/UI designer - Dental component system

About the role

We are building a production-ready, interactive dental charting system at the core of an AI-native dental practice management platform. The odontogram (dental chart) is a primary clinical interface, and we need it designed to production standard. 

Your output is consumed directly by frontend engineers: structured, optimized, developer-ready SVG that drops into a live component library. You will work inside an established design system, collaborating closely with designers and engineers throughout prototyping and implementation. 

This is a product role as much as a design role. If you care about how your SVG actually behaves in a browser — class structures, CSS variables, addressable regions, state composition, component boundaries — we want to talk. 

The role can be performed remotely or in a hybrid setup. 

What you'll build

A complete SVG odontogram component library covering all permanent teeth, deciduous (primary) teeth, and mixed/transitional dentition. Schematic-clinical style optimized for legibility and fast state-reading at chart scale. 

Surface-level addressing on every tooth. Each tooth exposes individually addressable, consistently named surface regions — mesial, distal, occlusal/incisal, buccal/facial, lingual/palatal — with a stable local coordinate system so overlays land predictably. 

A full overlay library: caries, restorations (by material), crowns, implants, prosthetics, endodontic/RCT indicators, orthodontic elements, and pathology markers, positionable against the surface regions above. 

Composable visual states implemented as orthogonal CSS hooks. A single surface can simultaneously carry a clinical condition, a treatment-workflow status, and a UI interaction state. These axes must be independent and combinable — not multiplied into an unmaintainable class matrix. No hardcoded values; full CSS variable / token compliance. 

Numbering-system-agnostic structure. Tooth elements carry stable internal IDs independent of any numbering scheme. Human-facing labels (FDI/ISO-3950, Universal/US, Palmer) live in a separate, swappable layer mapped to those IDs. 

Clean, optimized SVG architecture: logical layer grouping, BEM naming, and a shared SVGO configuration tuned so optimization does not strip or mangle the IDs, classes, and hooks engineering depends on. Reuse via <symbol>/<use>where it reduces node count. Developer-documented structure throughout. SVG file optimization is a first-class deliverable — you own the SVGO config and the optimization workflow, not just the artwork. 

A Figma component library aligned to the SVG system. Figma is our reference tool and design/handoff layer; the hand-authored, optimized SVG is canonical. You should be comfortable keeping the two in sync under that model. 

Accessible output as a baseline: never-color-alone encoding, sensible SVG semantics (<title>/<desc>, ARIA where appropriate), and adequate contrast. Red/green colorblindness is common among clinicians and the chart's signal must survive it. 

Contribution to interaction design and prototyping in collaboration with our UX/UI designers. 

What we're looking for

Required

• 5+ years in high-precision vector design, SVG systems, or technical illustration — with demonstrable experience shipping SVG into a live product or component library.
• Deep understanding of SVG structure for interactive use: path optimization, layer naming, grouping for scripted/data-driven state changes, CSS variable integration, and designing markup that survives optimization.
• Hands-on experience with SVGO: configuring and maintaining an optimization pipeline that preserves developer-critical structure (IDs, class names, hooks) while reducing file size.
• Ability to think in composable state and stable hooks, and to collaborate with engine