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.
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, .body 15px/22px
helper text 13px/22px
ul, li 15px/22px
- 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
- 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.
The colors in the control panel design are an extension of the NationBuilder brand.
Theme colors are extensions of the design system that give meaning to components such as badges or alerts.
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.
The primary navigation uses icons to represent the six top-line sections of the Control Panel and the user’s settings.
Commonly used icons:
Icon font family:
Icons can be added using their unique classes in the following format:
- 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.
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.