Figma style guide

[Studio384]

The Figma UI library for Sippy contains the design guidelines and components with which we'll be building Sippy's revamped UI for version 4, as well as our product website and documentation.

Atoms

Atoms are our primitives. Their function is to outline the boundaries within all the components and UIs are developed.

Colors

• Blue, 10 shades, (50 - 900)
• Red, 10 shades (50 - 900)
• Grey, 10 shades (50 - 900)
• Background colors
  • Background
  • Surface
  • Dark
• Text colors
  • On background
  • On dark
• Shades
  • Active
  • Inactive
  • Disabled
  • Error

Type scale

• Headings, 6 variants
• Body text
• Helper text
• Button text, 2 variants
• Marketing, 6 variants

Elevation

• Light, 6 variants
• Dark, 6 variants

Components

Components are interactive elements defined in Figma with 1 or more variants. They can be used to build UIs. Where possible, the Figma components will be made interactive.

Note: The default value is listed first.

Buttons (90 variants)

• Color (Primary, Red, Secondary)
• Hover (False, True)
• Focus (False, True)
• Disabled (False, True)
• Active (False, True)
• Size (Medium, Small)
• Icon (None, Start, End)

Checkboxes and radios

Checkbox (12 variants)

• State (Unchecked, Checked, Indeterminate)
• Hover (False, True)
• Focus (False, True)
• Disabled (False, True)

Radios (7 variants)

• Selected (False, True)
• Focus (False, True)
• Hover (False, True)
• Disabled (False, True)

Icon (191 variants)

See optimise-group/valkyrie.

Input (16 variants)

• Hover (False, True)
• Focus (False, True)
• Error (False, True)
• Disabled (False, True)
• Value (False, True)
• Readonly (False, True)

Select (16 variants)

• Hover (False, True)
• Focus (False, True)
• Error (False, True)
• Disabled (False, True)
• Value (False, True)
• Readonly (False, True)