Design Engineer

About Onyx Graphics

Onyx Graphics builds production software for the wide-format print industry. Our users are print professionals who work with precision, color, and visual detail every day. They notice when an interface is thoughtful, and they notice when it isn’t.

We’re building a new generation of products and need someone who can own the design and implementation of how they look, feel, and behave — across everything we ship.

About the Role

This role sits at the intersection of design and engineering. You’ll design interfaces in Figma and build them in React — the full loop from concept to production code. You won’t hand off designs to someone else to implement, and you won’t implement designs you had no part in creating. You do both.

The Director of Product & Engineering sets the product vision and design direction. You translate that vision into polished Figma designs, build a component library and design system in React, and ensure visual consistency across every product in the portfolio. As the product line grows, you’re the person who makes sure it all feels like one family.

We work AI-first — Claude Code is part of the daily workflow. You’ll use it to build components faster and help other engineers with their frontend work.

What You’ll DoDesign

• Create UI designs in Figma based on product vision and direction from the Director of Product & Engineering.
• Design workflows, screens, and interactions for production tools used by technical operators.
• Establish and maintain the visual language: typography, color, spacing, iconography, motion.
• Create prototypes for user testing and stakeholder review.
• Collaborate with product managers to understand user needs and translate them into clear, efficient interfaces.

Build

• Build and maintain a shared React component library that all products consume.
• Turn your Figma designs into production TypeScript/React code with exact fidelity.
• Define design tokens (colors, spacing, typography, shadows) that bridge Figma and code.
• Ensure every component works across Chrome, Edge, Firefox, Opera, and Safari.
• Write automated tests for components — visual regression, cross-browser, accessibility.

Govern

• Own the design system. Document components, usage patterns, and composition guidelines.
• Review frontend implementations across the team for consistency with the design system.
• Evolve the system as the product portfolio grows without breaking what’s already built.
• Be the quality bar for how the product looks and feels.

What We’re Looking ForRequired

• You design and you code. You’re fluent in Figma and fluent in React/TypeScript. You move between both without friction.
• Design system experience. You’ve built or led a component library used by other engineers. You can show us the system.
• Visual precision. You care about the details — spacing, alignment, typography, transitions. You can tell when something is 2px off.
• Deep CSS. You solve cross-browser problems. You understand the layouts, the edge cases, and why Safari does that thing it does.
• Accessibility. You build with WCAG in mind from the start, not as a cleanup pass later.
• Clear documentation. Your components come with usage guidelines that other engineers can follow without asking you.
• Communication. You can discuss design tradeoffs with leadership and explain component APIs to engineers.

Preferred

• Experience designing and building data-dense, technical interfaces — dashboards, production tools, monitoring systems.
• Experience with Tailwind CSS, Storybook, or design token pipelines.
• Experience with animation and micro-interactions (Framer Motion or similar).
• Claude Code proficiency or strong willingness to adopt AI-assisted development.
• Experience in manufacturing, industrial, or production software.

How We Work

• AI-first development. Claude Code is a daily tool. Automated tests enforce quality.
• 1-week sprints. Working software demonstrated every Friday.
• Figma to code, end to end. You design it, you build it, the Director reviews it.
• Cross-browser from day one. Five browsers, no exceptions.
• Your work is the foundation. Every feature the team builds uses your components.

Benefits:

• 401(k)
• 401(k) matching
• Dental insurance
• Employee assistance program
• Flexible spending account
• Health insurance
• Health savings account
• Life insurance
• Paid time off
• Professional development assistance
• Referral program
• Tuition reimbursement
• Vision insurance

Work Location: In person