Design
Typography
Typography is used to create clarity, readability and clear hierarchies to create great experiences for people using the product. Radius uses a single, flexible font, Aktiv Grotesk.
Typeface:
Typographic scale:
h1, .h1
bold, 30px/38px
h2, .h2
bold, 24px/31px
h3, .h3
bold, 21px/27px
h4, .h4
bold, 19px/25px
h5, .h5
bold, 17px/22px
h6, .h6
bold, 15px/20px
Body text:
body, .body
15px/22px
Helper text:
helper text
13px/22px
Links:
a
#1498BE
Lists:
ul, li
15px/22px
Best practices
Accessibility
- Heading tags communicate the structure of the page to screen readers and other assistive technologies. Nest heading tags in order. For example,
<h4>
should not follow<h2>
. - Wide blocks of text are difficult to read and make it harder for people to focus. Limit line lengths to 70 characters or around 16 words.
Colors
The colors in the control panel design are an extension of the NationBuilder brand.
Primary colors
Secondary colors
Grays
Background colors
Theme colors
Theme colors are extensions of the design system that give meaning to components such as badges or alerts.
Icons
Icons are visual representations of sections, commands, files, devices, or common actions.
[System name] uses icons in moderation. Wherever possible, use text instead of icons. When using icons, be sure their meaning is unambiguous, and makes sense in the context of internationalization. Usage should be to increase clarity, so do not use them for merely decorative purposes.
To use icons in conjunction with buttons, see Buttons.
Primary navigation:
The primary navigation uses icons to represent the six top-line sections of the Control Panel and the user’s settings.
Commonly used icons:
Best practices:
Accessibility
- When using standalone icons, use a method which allows for fallback text for screen readers.
- When using icons with text. be sure the text is descriptive of the icon, and include
aria-hidden="true"
on the icon itself.
Internationalization
Tips when designing for text:
- Leave enough space to account for longer translations or prepare the design for scenarios when text or page elements are going to wrap to the next line.
- Don’t create sentences with UI elements because sentence structure and word order can be different in other languages.
- Don’t embed text in images because it isn’t accessible to translation or screen reader software.
- Watch out for cultural metaphors when working with icons or the naming of features.