Design tokens are foundational variables stored in Figma that are repeated across a design system component library. They allow designers to quickly create new components such as buttons and toolbars.
Below are accessible, user tested design tokens designed for this website that can be repackaged and redeployed for your own user interface (UI) component library.
Colours
Pacific colour scheme (light mode)
Mediterranean colour scheme (dark mode)
Both light mode and dark mode colour schemes have been designed such that the primary colour (for primary components) stands out more than the secondary and tertiary colours.
Colours have been adjusted to provide visual feedback for each interactive context; this is why the luminosity decreases by 12 points (or, in the case of dark mode colours, increases by 12 points) when components are hovered and then pressed.
Buttons (light mode)
Buttons (dark mode)
Primary colours provide a contrast of at least 3:1 against the background colour, making primary components discernible to visually impaired users.
For primary components in light mode, use Authentic White as the label colour. For primary and secondary components in dark mode, use Carbon Black as the label colour. This ensures sufficient text-to-background contrast of at least 4.5:1.
Typography
Desktop type scale
Mobile type scale
For light mode, deploy text content in Carbon Black. For dark mode, deploy text content in Authentic White. The use of off-black on off-white ensures sufficient contrast whilst reducing visual strain on high contrast screens.
Root-em (rem) units should be used to size fonts relative to the root size configured by the website or web application. This enables users to rescale text in a consistent and predictable manner with aid of assistive technologies.
By default, 1.0rem is set to 16 pixels (px); continue to use 1.0rem as the standard text size for medium body text and medium component label text on all devices.
Always use a line height of 150% (1.5rem) and a paragraph spacing of 100% (1.0rem) for medium body text.
On desktop, fonts should increase in size by a factor of 1.25 for subheadings, headings, etc. On tablet and mobile, fonts should increase in size by a factor of 1.20. This provides sufficient clarity for users discerning the hierarchal structure of written page content.
In your Cascading Style Sheet (CSS) file, configure the tablet and mobile breakpoint to a maximum size of 1024px using the following code:
@media only screen and (max-width: 1024px) { ... }
Between the braces, your parameters for tablet and mobile text sizes can be set, for example:
@media only screen and (max-width: 1024px) { h4 { font-size: 1.2rem; } }
Iconography
For icons, use Google's Material Symbols plugin for Figma. These icons use Scalable Vector Graphic (SVG) format, meaning they can be resized without losing quality.
Furthermore, the icons are free to use, and are inserted at a default size of 24px for medium sized components.