Style Guide

[Joepock123]

Contents

• Design Approach Styled Components
• Design Principles
• Colours
• Typography
• Buttons
• Resources

Link to Figma board
HackMD Style Guide markdown here

Design Approach Styled Components

The project will be styled using with a Styled Components first approach. Components will be designed in isolation where possible using Storybook.

Variables

All variables that will be reused throughout the project (colour, button heights) will be stored in the styles/variables.js file.

To use any of the variables import the following syntax can be used:
import * as vars from '../styles/variables'

File Structure

Styled components file style.js will be kept alongside the jsx and story file the components directory.

Component/
├── component.js
└── style.js
└── style.stories.js

Styled Components are all exported and can be imported using the syntax import * as SC from ./style. The SC.StyledComponent syntax will allow us to differentiate styled components from others. See an example in the repo here.

Storybook

Read this quick start guide for React from Step 4. The key steps are:

1. Import the component into the component.stories.js file
2. export default the title of the story
3. Export the component
4. Run npm run storybook the script will load all the files in the src/ directory with *stories.js
5. Storybook will watch for changes and update the component in Storybook's own web app.

Example

Design Principles

• Accessible button and input field sizing on mobile.
• Audit passing colour contrast
• Strong semantic html (order of h tags and sectioning)
• Use of responsive units so text can be resized by user
• Hierachy of information communicated clearly to user

Colours

Inspiration from the Radio Zaatari colour scheme, Jordanian flag and the desert.

Sand	Olive	Ocean	Night	Off White
#ffcb74	#b1b493	#4f8a8b	#07031a	#fbf9fa

Typography

Element	Style (rem & pixel)	Sample
H1 Header	DIN Condensed 30 uppercase
H1 Landing Page Hero	DIN Condensed 45 uppercase
H1 Workshop banner	DIN Condensed 45 uppercase
H2 Landing	Roboto 18
H2 workshop card	DIN Condensed 25 uppercase
H2 workshops	Roboto 25 uppercase
p Landing tagline	Roboto 14 italic
p Landing	Roboto 14 italic
p Search	Roboto 16
p & a category tags	Roboto 12
p workshop card	Roboto 12
p workshop overview	Roboto 16
p comments	Roboto 12
p workshop text	Roboto 14
a header nav	Roboto 18 underline
a Landing button	Roboto 22 uppercase
a Landing hero	Roboto 14 uppercase
a Landing	Roboto 18 uppercase underline
a workshop buttons	Roboto 16
a back & submit buttons uppercase	Roboto 16

Buttons

Style	Sizing	Sample
Landing page	height: 42px horizontal-padding: 8px
Workshop card	height: 42px horizontal-padding: 8px
Typical button	height: 38px horizontal-padding: 8px

Button Sizing

We will use medium and low priority buttons on this project aiming for heights of 42 and 38 pixels respectively.

Guidance taken from Optimal Size and Spacing for Mobile Buttons.

The button height is what matters more for accuracy. A spacing of at least 12 pixels is good to have for visual separation.

Spacing

We will maintain a spacing of at least 36px for our buttons.

Vertical Padding

Vertical padding for low and medium priority buttons tbc.


Horizontal Padding

Horizontal padding will be 8px


Resources

• Optimal Size and Spacing for Mobile Buttons
• UI cheat sheets: buttons
• 5 ways to improve your prototyping workflow
• Mini Tutorial – Working with Figma Button Components
• Figma Tutorial: Creating Styles
• The ultimate guide for form design: the perfect form
• Designing Perfect Text Field: Clarity, Accessibility and User Effort