UI Design System Documentation Specialist

Responsibilities:

• Create and maintain authoritative documentation that helps consumers of the design system understand what's available and how to use it:
  • Foundational Styles: Document how to implement HUK's foundational styles colors, typography, spacing, etc. using CSS variables, SCSS tokens, and Bootstrap 5 classes.
  • Figma Code Mapping: Clarify how Figma v2.x components relate to HUK tokens and components, including naming conventions, variants, and breakpoints.
  • Designer-Facing Component Documentation: Document configuration and customization options, properties, usage guidance, accessibility notes for the components to inform designers on what's possible
  • Design Tokens: Document token taxonomy, usage rules, and how tokens map to components and Figma assets.
  • Implementation Guidance: Provide examples and best practices for integrating HUK components
  • Accessibility Patterns: Document accessible usage patterns aligned to WCAG 2.x.
  • Discoverability & IA: Organize documentation for easy navigation and search across SharePoint/Pages; define editorial style and templates.
  • Training & Enablement: Create quick-start guides, onboarding checklists, and workshop materials for designers and developers.

Skills:

• Hands-on experience with design systems (tokens, components, guidelines) and fluency in front-end code (TypeScript/JavaScript, HTML/CSS).
• Experience documenting Web Components or React/Angular APIs.
• Familiarity with Bootstrap 5 layout, grids, and breakpoints.
• Proven ability to write clear, concise component documentation and reference content.
• Strong grasp of design tokens and their role in implementation and change management.
• Excellent collaboration skills across UX, engineering, and QA.
• Working knowledge of accessibility standards (WCAG 2.x).

Benefits:

• 💡 New and emerging design system based on design tokens
• 📚 Define best practices/standards, template, and format for our design system's documentation

Qualifications:

• Design systems

Nice to Have:

• Experience documenting Stencil components or similar compiler-based toolchains.
• Familiarity with large-scale Figma libraries (variants, theming, tokens).
• Exposure to migration documentation and change-management playbooks.
• Experience creating internal FAQs, knowledge bases, and release communications.

Key Deliverables:

• Foundational Styles Documentation: Complete documentation for all Foundational styles - colors, typography, spacing, etc. using CSS variables, SCSS tokens, and Bootstrap 5 classes
• Designer-Facing Component Doc: Complete documentation for existing component library (usage, props, events, accessibility, code samples)
• Design Dev Bridge: Mapped guide from Figma v2.x components to HUK tokens and components.
• Token Reference: Clear documentation of token taxonomy and usage rules.
• Docs IA & Style Guide: Information architecture and editorial style for HUK docs

Success Metrics:

• Adoption & Satisfaction: Increased integration success and positive feedback from UX/Eng teams.
• Time-to-Integrate: Reduced time to implement HUK components and styles
• Doc Quality: Improved freshness, search success, and reduced unresolved questions.
• Migration Progress: % of target apps migrated from HUK1 to HUK2.x supported by your documentation