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:

type_font_face

Typographic scale:

h1, .h1 bold, 30px/38px

heading--level-1

h2, .h2 bold, 24px/31px

heading--level-2

h3, .h3 bold, 21px/27px

heading--level-3

h4, .h4 bold, 19px/25px

heading--level-4

h5, .h5 bold, 17px/22px

heading--level-5

h6, .h6 bold, 15px/20px

heading--level-6

Body text:

body, .body 15px/22px

type_body

Helper text:

helper text 13px/22px

helper-text

Links:

a #1498BE

type_links

Lists:

ul, li 15px/22px

lists

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

colors--primary
colors--primary-light
colors--primary-lighter

Secondary colors

colors--blue
colors--lightblue
colors--blue-filter
colors--secondary
colors--maroon
colors--red
colors--green
colors--purple
colors--yellow
colors--deepyellow
colors--gold

Grays

colors--white
colors--gray-light
colors--gray-100
colors--gray-200
colors--gray-300
colors--gray-400
colors--gray-500
colors--gray-600
colors--gray-700
colors--gray-800
colors--gray-900
colors--black

Background colors

colors--app-bg-color
colors--nav-blue

Theme colors

Theme colors are extensions of the design system that give meaning to components such as badges or alerts.

colors--primary
colors--secondary
colors--tertiary
colors--warning
colors--gray
colors--bright

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.

icons_navigation

Commonly used icons:

icons_common

Icon font family:

Icons can be added using their unique classes in the following format: icon-[ICON NAME]

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.