UX Brighton Style Guide

A living reference of the actual styles used throughout the UX Brighton website.

Brand Colours

Primary Brand Colours

UX Red #C9003A

UX Blue #108BC1

UX Green #00CB00

UX Amber #FFA039

UX Purple #60008E

Cool Grey Scale

Grey 95 #010F15

Grey 90 #1A272C

Grey 80 #343F44

Grey 60 #616E73

Grey 40 #8C979C

Grey 20 #C7D0D4

Grey 10 #E6E7E8

Grey 5 #F0F2F2

Semantic Colours

Heading Grey 90

Body Text Grey 80

Link Black

Link Hover UX Red

Typography

The site uses Museo Sans as the primary typeface, with system fonts as fallbacks.

Headings

Heading 1 — 36px, weight 900

Heading 2 — 30px, weight 900

Heading 3 — 24px, weight 900

Heading 4 — 18px, weight 900

Heading 5 — 18px, weight 900

Heading 6 — 18px, weight 900

Body Text

Body text is set at 18px with a line-height of 1.5 and font-weight 300. This creates comfortable reading for longer content.

Links look like this and turn red on hover.

Bold text uses font-weight 900.

Standfirst / Lead Text

This is standfirst text, used for introductory paragraphs. It's slightly larger and bolder to draw attention.

Blockquotes

This is a blockquote. It's styled with a large quotation mark and grey text to distinguish it from regular content.

Attribution Name

Lists

Unordered list item one
Unordered list item two
Unordered list item three

Ordered list item one
Ordered list item two
Ordered list item three

Font Size Classes

fs-xs — 10px

fs-s — 13px

fs-m — 18px (body)

fs-l — 30px

fs-xl — 48px

Buttons

Button Colours

Default Button Green Button Red Button Blue Button Orange Button

Button Sizes

Small Button Default Size Large Button

Button States

Normal Hover Focus Disabled

Tito Ticket Button

Buy Tickets

Forms

Text Inputs

Text Input

Email Input

Textarea

Input Group (with button)

Checkboxes

Checkbox option one

Checkbox option two (checked)

Layout & Spacing

Container

The .container class provides consistent horizontal padding and max-width.

Spacing Scale

Spacing utilities use a consistent scale:

pa0 — 0

pa1 — 0.5rem (8px)

pa2 — 1rem (16px)

pa3 — 2rem (32px)

pa4 — 4rem (64px)

Margin Utilities

Margin classes: mt0-4, mb0-4, ml0-4, mr0-4, mv0-4, mh0-4

Padding Utilities

Padding classes: pt0-4, pb0-4, pl0-4, pr0-4, pv0-4, ph0-4, pa0-4

Gutter Classes

.gutters — horizontal padding for grid items

.gutter-bottom — bottom margin for vertical spacing

Grid System

Flex Grid

Flex item 1

Flex item 2

Flex item 3

Row with Gutters

Half width on desktop

Components

Cards / Tiles

Card Title

Cards use the .tile class with .drop for shadow and .rounded for border-radius.

Badges / Tags

3 Upcoming

Horizontal Rule

Content above the rule

Content below the rule

Utility Classes

Text Alignment

text-left

text-center

text-right

Display

.block — display: block
.inline-block — display: inline-block
.inline — display: inline
.hidden — display: none
.flex — display: flex

Visibility

.visually-hidden — Hidden but accessible to screen readers
.hidden-over-m — Hidden on screens wider than medium breakpoint
.hidden-under-m — Hidden on screens narrower than medium breakpoint

Colours (Background)

bg-white

bg-grey-5

bg-grey-10

bg-grey-90

Colours (Text)

color-red

color-blue

color-green

color-white

Positioning

.relative — position: relative
.absolute — position: absolute
.fixed — position: fixed

Floats

.left — float: left
.right — float: right
.clearfix — clear floats

Breakpoints

The site uses these responsive breakpoints:

Small (s): 480px
Medium (m): 730px
Large (l): 960px

Responsive Class Suffixes

Many utilities have responsive variants:

-over-s — applies above small breakpoint
-over-m — applies above medium breakpoint
-under-s — applies below small breakpoint
-under-m — applies below medium breakpoint