Human Interface Guidelines

HIG is Autodesk's unified design system, so we can build better products faster.

• Getting started
• Theme data and theming components
• React components
  • Basics
  • Components
• Contributing

Getting started

Add a component to your app:

yarn add @hig/button

Import and render the component:

import Button from '@hig/button';

function MyComponent() {
  return <Button title="Hello, world!" />
}

Theme data and theming components

Theme data is a representation of the HIG visual design language in the form of data. With @hig/theme-data, we publish the data in ECMAScript module, JSON, and SCSS formats. This data includes 8 themes that can be used on any platform. There are four color schemes including...

• Light gray
• Dark gray
• Dark blue

...with two densities–high and low–for each scheme. See how to provide a theme to components.

• @hig/theme-data - HIG design spec as data
• <ThemeContext> - A component to ease consumption of theme data from within React components.

React components

Basics

• Typography - See <Typography> and <RichText>
• Layout - See <Spacer>
• Icons - See <Icons> to easily render icons in React and the @hig/icons package for svg data

Components

Each HIG pattern is implemented as a set of React components. Each pattern is published to NPM individually under the @hig namespace.

• <Accordion> - Make content-heavy pages appear less so by vertically stacking items in lists that users can expand or contract
• <Avatar> - A visual representation of a customer's identity
• <Banner> - An alert that requires a user action
• <Button> - Trigger actions or changes
• <Checkbox> - A control to select from non-exclusive options
• <Dropdown> - A menu to select one or many from a list
• <Flyout> - A lightweight popup container
• <Icons> - Represents a concept in graphical form
• <IconButton> - Action buttons that include an icon only
• <Menu> - Display a list of choices through interaction with a button, icon or other controls
• <Modal> - An overlay that focuses the customer's attention
• <NotificationsFlyout> - A less intrusive way of announcing an event of potential interest to the user
• <NotificationsToast> - Floating message boxes that appear
• <NumericInput> - For numerical values that allows freehand text entries or toggling values up and down
• <ProfileFlyout> - A flyout containing customer's name, email, and account info
• <ProgressBar> - An indication of content loading, presented horizontally
• <ProgressRing> - An indication of content loading, presented circularly
• <ProjectAccountSwitcher> - Switches the context to different projects or accounts
• <RadioButton> - A control to select one exclusively from a list
• <RichText> - Applies the HIG typography styles to whatever is passed to it
• <SideNav> - Provides high-level navigation
• <SkeletonItem> - A placeholder for loading content
• <Slider> - A control for selecting a single numeric value from a range
• <Spacer> - A square of empty space, meant to add space between other components
• <Surface> - A themable container with the appropriate background color for the current theme
• <Table> - A collection of data in rows and columns
• <Tabs> - Keeps related content in a single container
• <TextArea> - A control to provide a large amount of freeform text
• <TextLink> - Directs visitors to another location
• <Timestamp> - Presents a date with humanized phrasing
• <Toggle> - A control for a single action with a clear on/off or start/stop.
• <Tooltip> - Provides context in a small popup container
• <TopNav> - Navigation across the top of the screen
• <TreeView> - A way to view and manipulate a list of data
• <Typography> - A set of components in many typographical variations

Contributing

Read our contribution guidelines here: CONTRIBUTING.md