-
Notifications
You must be signed in to change notification settings - Fork 2
Style Guide
The Governance Style Guide is a living document with the goal of maintaining a consistent and coherent experience across the Governance platform and other related ecosystem. This outlines the standards designed how the Governance platform should look and feel, and coding practices to keep interfaces and interactions scalable and unified for UI development.
Primary colors are used throughout the entire platform UI. We have two primary colors, DEEP NAVY and DEEP GOLD.
The boldness of the Deep Navy is strong and authoritative, creating a feeling of technological advancement within the digital era of today. It can also be used as background, primary headline or text color.
The Deep Gold color to be used for content of lesser importance. It can be used as secondary background, text or links color.
The two colours work together to create an identity that fuses both traditional and futuristic outlooks within the identity.
| Token | Color |
|---|---|
| ${primaryColor.base} | DEEP NAVY RGB: 19, 31, 53 HEX: #121e34 |
| ${secondaryColor.base} | DEEP GOLD RGB: 194, 160, 89 HEX: c09f57 |
The secondary colors are the supporting colours used for accent colors within the UI. We have two secondary colors, LIGHT NAVY and LIGHT GOLD.
| Token | Color |
|---|---|
| ${primaryColor.light} | LIGHT NAVY RGB: 36, 58, 97 HEX: #243A61 |
| ${secondaryColor.light} | LIGHT GOLD RGB: 228, 100, 142 HEX: E4C88E |
The tertiary colours are to complement and provide alternative palettes to the primary and secondary colours. We have two tertiary colors, BLUE and GRAY.
| Token | Color |
|---|---|
| ${primaryColor.lighter} | BLUE RGB: 32, 65, 128 HEX: #204180 |
| ${tertiary.base} | GRAY RGB: 52, 41, 18 HEX: 342912 |
The DigixDao Governance utilizes two typefaces, Futura PT Heavy and Futura PT Book.
The Futura PT Book is the primary typeface used within the platform. It is a thinner version of the header and optimized for larger bodies of type, such as paragraph.
The Futura PT Heavy is a bolder typeface that is used for headings. This typeface is can be used in all caps or sentence case.
| TYPE | Color | Token |
|---|---|---|
| H1 Heading | 4.6rem Futura PT Heavy | ${primaryColor.base} |
| H2 Heading | 2.2rem Futura PT Heavy | ${tertiary.base} |
| H3 Heading | 1.8rem Futura PT Heavy | ${tertiary.base} |
| Paragraph | 1.6rem Futura PT Heavy | ${tertiary.base} |
| Links | 1.6rem Futura PT Heavy | ${secondaryColor.base} |
To use this font, use the following CSS:
'font-family: "Futura PT Book", sans-serif;
const Text = styled.p `
font-family: 'Futura PT Book',sans-serif;
`
For styling React components, our team chose to give CSS-in-JS a shot and adapted the popular Styled Components for the first-time. This library allows us to build custom components and write CSS syntax to the component level itself.
npm install styled-components
import styled from “styled-components”;
import {Button} from ./styles;
const CreateBtn = styled(Button)`
...
`;For more details, check out the Styled Components documentation.
Global defaults contains the base variables in the default theme’s file. This should includes variables for colors, typography elements, spacing rules and other base formatting.
const baseFontSize = '1.6rem';
const basePaddingX = '1rem';
const basePaddingY = '1rem';
const baseBoxShadowStyle = '0 3px 6px 0 rgba(231, 233, 236, 0.8)';
const baseTransitionStyle = 'all .3s ease';
const baseBorderRadiusStyle = '0.3rem';
const primaryColor = darkBlue;
const secondaryColor = darkBlue;
const tertiaryColor = darkGray;
Ideally, we want to have the global variables written in UPPERCASE. But since our variables are written as camelCase since the beginning of the UI development, we had to leave that way for now.
Component defaults are used by each UI element file and inherits the default settings from global variables.
filter: {
default: {
border: tertiaryColor.lighter,
background: white.base,
backgroundHover: tertiaryColor.lighter,
textColor: tertiaryColor.base,
},
active: {
border: tertiaryColor.light,
background: tertiaryColor.light,
textColor: white.base,
},
},
buttonPrimary: {
textColor: white,
background: primaryColor,
border: primaryColor,
iconColor: white,
invert: {
textColor: primaryColor,
background: primaryColor,
border: primaryColor,
iconColor: primaryColor,
},
},
Standardizing our variables structure is still a work in progress, our global and component defaults currently reside in a single theme file.
Naming each files should describe what they contain and how they relate to other files.
All base components that are generic are considered UI elements and must be all inside the elements folder. These base components are: Buttons, Inputs, Checkboxes, Selects, Modals, etc…
|_ elements
|_ accordion
|_ alert
|_ buttons
|_ dropdown
|_ icons
...
index.js
When a component is composed of one or more files, files must be put in a folder with the same name as the component. For example, each type of buttons below are placed in a subfolder under /buttons folder with an index.js and style.js in it.
|_ buttons
|_ round-button
|_ index.js
|_ style.js
|_ text-button
|_ index.js
|_ style.js
index.js
style.js
We also use dashes (-) to separate words so it’s more readable.
|_ proposal-buttons
|_ claim-funding.js
|_ claim-approval.js
|_ claim-results.js
style.js