Skip to content
/ hig Public
forked from Autodesk/hig

Autodesk's unified design system

License

Notifications You must be signed in to change notification settings

DevFoncy/hig

 
 

Repository files navigation

Human Interface Guidelines

Greenkeeper badge

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

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
  • Web light (default) - though it is the default color scheme, it is on the road to being deprecated

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

React components

Basics

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
  • <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

About

Autodesk's unified design system

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 98.8%
  • Other 1.2%