Home | Start

Intopia styleguide

Session 1

What will we cover?

  1. Part 1: Page types
  2. Part 2: Colours
  3. Part 3: Lists
  4. Part 4: Icons
  5. Part 5: Font sizes
  6. Part 6: Tables
  7. Part 7: Videos
  8. Part 8: The text-example container
  9. Part 9: Columns
  10. Part 10: Image widths

Part 1: Page types

All of the different page types

Conducting user research with people with disability

Session 1

H2: Section title

H3: Subsection title

Activity:
H3: Activity Name

H4: Sub-subsection title

H5: Page title

Smaller content with bold text in the middle of a sentence.

Content slide with bold text in and some <code> and a link the middle of a sentence.

<!-- codeComment -->
Some general code
codeHighlight

Any questions or comments?

Part 2: Colours

All of the different colours

Sections Text Background Ratio
Title: <h1> #C03C0C #EDEBEB 4.54:1
Section: <h2> #FFFFFF #C03C0C 5.39:1
Subsection: <h3> #C03C0C #EDEBEB 4.54:1
Activity: <h3> #FFFFFF #147580 6.17:1
Page #333333 #EDEBEB 5.39:1
Content Text Background Ratio
<h4>, <h5> #C03C0C #EDEBEB 5.39:1
<p>, <ul> #333333 #EDEBEB 5.39:1
<code> #147580 #EDEBEB 4.54:1
.success #007700 #EDEBEB 4.85:1
.warning #CC0000 #EDEBEB 4.95:1
Links Text Background Ratio
a:link #0A7399 #EDEBEB 4.5:1
a:visited #0A7399 #EDEBEB 4.5:1
a:hover #000000 #EDEBEB 17.68:1
a:focus #FFFFFF #000000 21:1
a:active #AA0000 #EDEBEB 4.85:1
Codeblock Text Background Ratio
Code #FFFFFF #222222 15.9:1
Code highlight #FFFF00 #EDEBEB 14.81:1
Code comment #8A8A8A #222222 4.6:1
Code strike #FF4040 #222222 4.59:1

Part 3: Lists

All of the different list types

H5: Page title
  1. List item 1
  2. List item 2
  3. List item 3
A tick list
  • Item 1
  • Item 2
A question list
  • Item 1
  • Item 2
A cross list
  • Item 1
  • Item 2

Part 4: Icons

All of the different icons

Icons: part 01
  • icon-address-card
  • icon-align-left
  • icon-arrow
  • icon-arrow-up-small-big
  • icon-at
Icons: part 02
  • icon-bridge
  • icon-briefcase-medical
  • icon-bullseye-pointer
  • icon-calendar-check
  • icon-check
Icons: part 03
  • icon-circle-1
  • icon-circle-2
  • icon-circle-3
  • icon-circle-caret-right
  • icon-circle-check
Icons: part 04
  • icon-circle-exclamation
  • icon-circle-info
  • icon-circle-question
  • icon-circle-user
  • icon-circle-xmark
Icons: part 05
  • icon-code
  • icon-codepen
  • icon-cog
  • icon-comment-dots
  • icon-comments
Icons: part 06
  • icon-compass
  • icon-css3
  • icon-down-left-and-up-right-to-center
  • icon-envelope
  • icon-equals
Icons: part 07
  • icon-eye
  • icon-face-confused
  • icon-face-smile
  • icon-file
  • icon-fingerprint
Icons: part 08
  • icon-floppy-disk
  • icon-folder-tree
  • icon-genderless
  • icon-h1
  • icon-hand
Icons: part 09
  • icon-handshake-angle
  • icon-heart
  • icon-id-card
  • icon-images
  • icon-input-pipe
Icons: part 10
  • icon-keyboard
  • icon-laptop-mobile
  • icon-lightbulb
  • icon-link
  • icon-list-check
Icons: part 11
  • icon-location-check
  • icon-lock
  • icon-memo
  • icon-memo-circle-check
  • icon-message-check
Icons: part 12
  • icon-money-bill-transfer
  • icon-mug-hot
  • icon-mug
  • icon-node
  • icon-palette
Icons: part 13
  • icon-paragraph
  • icon-pen-field
  • icon-pen-swirl
  • icon-photo-film-music
  • icon-plug
Icons: part 14
  • icon-podium
  • icon-puzzle
  • icon-scale-balanced
  • icon-signs-post
  • icon-sparkles
Icons: part 15
  • icon-spinner
  • icon-square-sliders
  • icon-styleguide
  • icon-table-layout
  • icon-tag
Icons: part 16
  • icon-text-size
  • icon-timer
  • icon-toggle-off
  • icon-trash-can
  • icon-tree
Icons: part 17
  • icon-trophy
  • icon-universal-access
  • icon-user
  • icon-volume-high
  • icon-waveform-lines
Icons: long lines example
  • Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Necessitatibus neque praesentium voluptatem obcaecat.
  • Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Necessitatibus neque praesentium voluptatem obcaecat.

Part 5: Font sizes

All of the different font sizes

font-xl
font-sm
font-xs
font-xxs
font-xxxs
text-center
bold

Part 6: Tables

An example of tables

Caption
People with... May use...
limited colour vision assistive software
limited vision screen magnification software
no vision screen reader
limited movement on-screen keyboard

Part 7: Videos

Examples of .MP4 and Youtube videos

Part 8: The text-example container

The text-example container

A common dream, born of two continents. Yes, we must provide more ladders to success for young men who fall into lives of crime and despair. And that's to be expected.

Sarah Winters, Content Design London.

Part 9: Columns

All of the different column options

Column layout: 75/25

col-75

col-25

Column layout: 66/33

col-66

col-33

Column layout: 60/40

col-60

col-40

Column layout: 50/50

col-50

col-50

Column layout: 33/33/33

col-33

col-33

col-33

Column layout: 25/25/25/25

col-25

col-25

col-25

col-25

Part 10: Image widths

All of the different image options

img-center
img-width-960
img-width-900
img-width-850
img-width-800
img-width-750
img-width-700
img-width-600
img-width-500
img-width-400
img-width-350
img-width-300
img-width-250
img-width-200
img-width-180
img-width-150
img-width-120
img-width-100
img-width-70
img-width-50
img-width-30
img-width-25