Menu
My Site LogoMy Site LogoDesign System
GitHub
๐ŸŒœ
๐ŸŒž
My Site LogoMy Site LogoDesign System
  • GitHub
  • Designing
    • Design kits
    • Accessibility
  • Developing
    • Installing with npm
    • Installing from dist
    • Update using npm
    • Browser support
    • Using it with React
    • Blank page template
    • Typography
    • Colours
    • Sass reference
    • Usage with TypeScript
  • Components
    • Accordion
    • Announcement
    • Back link
    • Back to top
    • Breadcrumbs
    • Button
    • Contact block
    • Conversation
    • Collapsible
    • Character count
    • Checkboxes
    • Cookie banner
    • Date input
    • Details
    • Dialog
    • Error message
    • Error summary
    • Fieldset
    • File upload
    • Header
    • Hint
    • Input
    • Inset text
    • Label
    • Page announcement
    • Pagination
    • Panel
    • Phase banner
    • Radios
    • Search box
    • Select
    • Simple pagination
    • Skip link
    • Summary list
    • Stat
    • Table
    • Tag
    • Tabs
    • Textarea
    • Timeline
    • Tip
    • Warning text
  • Patterns
    • Sign in to a service
    • Navigate around a service
  • Starter kits
    • Prototyping
    • Production
  • Data visualisation
    • Getting started
  • Contributing
    • Ways to contribute
    • Coding standards

Design kits

Our Figma design kit is a work in progress and ever evolving, but you can use it as a starting point for your designs.

See the Figma design kit

For new projects, you should use Figma over other design tools like Sketch, because it's easier for us to work together.

To join our Figma team or for help using this kit, post on #hackit-design-system or email Joy Suthigoseeya.

To contribute components or patterns to these kits, see our contributor guidance.

Edit this page
Next
Accessibility ยป
Made by HackIT.