Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

🎨 Design

Getting started

Excerpt
This is the

The Save The Republic design system. In order to keep our message clear the following guidelines have been established.

  • For now, let’s follow the USWDS: The United States Web Design System

Design principles

Principle one

Principle two

Principle three

Simplicity

Clean

Concise

Visual language

Color

(tick) DO:

  • Use the approved color palettes

(error) DON'T:

Go off the beaten path, let’s keep the design consistent across all mediums.

Typography

(tick) DO:

(error) DON'T:

Sizing & spacing

(tick) DO:

(error) DON'T:

Icons & illustrations

(tick) DO:

(error) DON'T:

✏ Writing

Cheatsheet

Word

Rule

Style, spelling, grammar

House rules

Capitalization

(tick) DO:

(error) DON'T:

Punctuation

(tick) DO:

(error) DON'T:

Formatting

(tick) DO:

(error) DON'T:

Abbreviation & acronyms

(tick) DO:

(error) DON'T:

Numbers & percentages

(tick) DO:

(error) DON'T:

Dates and times

(tick) DO:

(error) DON'T:

Lexicon

Word

Rule

👩‍💻 Build

Best practices

Accessibility

(tick) DO:

(error) DON'T:

Browser support

Browser

Version

Priority

Actions

<Element name (e.g., Button)>

Code Block

Name

Required

Type

Allowed value

Default values

Description

Status
colourBlue
titleYes
/
Status
colourRed
titleNo

e.g., Changes the visual styling of the Button

<Element name (e.g., Link)>

Code Block

Name

Required

Type

Allowed value

Default values

Description

Status
colourBlue
titleYes
/
Status
colourRed
titleNo

Forms

Code Block

Name

Required

Type

Allowed value

Default values

Description

Status
colourBlue
titleYes
/
Status
colourRed
titleNo

Feedback

Code Block

Name

Required

Type

Allowed value

Default values

Description

Status
colourBlue
titleYes
/
Status
colourRed
titleNo

Navigation

Code Block

Name

Required

Type

Allowed value

Default values

Description

Status
colourBlue
titleYes
/
Status
colourRed
titleNo

Accessibility

Code Block

Name

Required

Type

Allowed value

Default values

Description

Status
colourBlue
titleYes
/
Status
colourRed
titleNo