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 engineering on the contract between a data model and the SVG markup. 
• Proficient in Figma (component/variant system) and Illustrator or Affinity Designer. 
• Comfortable working directly with frontend engineers — reviewing implementation, flagging rendering issues, iterating against technical constraints. 
• Design-systems thinking: reusability, consistency, token-based theming, documentation. 
• Working knowledge of WCAG / accessible interactive interfaces. 

Nice to have 

• Background in medical, dental, or healthcare visual documentation. 
• Familiarity with dental tooth-numbering systems (FDI/ISO-3950, Universal, Palmer) and surface notation. 
• Experience with After Effects or similar for future animation/motion work. 
• Basic-to-advanced 3D modeling for reference asset creation. 
• Familiarity with AI-assisted or generative design workflows. 
• Experience meeting accessibility standards specifically in regulated/medical interfaces. 

How we work 

UX/UI design is already strongly established in our pre-development process. You will not be defining UX from scratch — you will operate within an existing design system alongside designers who handle interaction architecture. Your domain is the SVG layer system and its technical integrity from design through implementation. 

We work in an agile product team. Iteration is expected, and direct communication with engineers is the norm. Early in onboarding you and engineering will align on the shared contract — surface naming, ID scheme, state hooks, SVGO config — before large-scale asset production begins. 

 What we offer 

• High ownership of a core clinical interface in a next-generation dental platform. 
• Close collaboration with a product-driven team at the intersection of AI and healthcare. 
• Flexible working model (remote or hybrid). 
• Competitive compensation aligned with experience and scope. 
• Long-term collaboration potential within a growing product ecosystem. 

How to apply 

Send your CV and portfolio to [email protected]. 

• Portfolio requirement: Include at least one example of SVG work delivered into a live product or developer handoff — not just visual output, but the actual SVG file or a walkthrough of its structure (layer grouping, naming, how state was hooked, how it was optimized). Screenshots of Figma components or exported assets alongside a brief explanation of how they were implemented are also welcome. We review portfolios for technical structure, not just visual quality.