Photographer Peter Rollings - weddings, family portraits, studio and professional - Leeds, York, Harrogate and across Yorkshire
Peter Rollings Photography on Facebook Peter Rollings Photography on X Peter Rollings Photography on Instagram

Primary colour palette

Shades
Pure white and pure black
  • 00
    #ffffff
  • 100
    #000000
Grey
Supporting secondary colours used to create hierarchy between different layered elements.
  • 50
    #f9fafb
  • 100
    #f3f4f6
  • 200
    #e5e7eb
  • 300
    #d1d5db
  • 400
    #9ca7af
  • 500
    #6b7280
  • 600
    #4b5563
  • 700
    #374151
  • 800
    #1f2937
  • 900
    #111827
Slate
A blue-tinged variation on the grey palette above; should be used similarly.
  • 50
    #f5f7fd
  • 100
    #eff1f7
  • 200
    #e2e5f0
  • 300
    #cbd1e1
  • 400
    #949db8
  • 500
    #646e8b
  • 600
    #475069
  • 700
    #333c55
  • 800
    #1e253b
  • 900
    #0f162a
Neutral
A softer variation on the grey palette above; should be used similarly.
  • 50
    #fafafa
  • 100
    #f5f5f5
  • 200
    #e5e5e5
  • 300
    #d4d4d4
  • 400
    #a3a3a3
  • 500
    #737373
  • 600
    #525252
  • 700
    #404040
  • 800
    #262626
  • 900
    #171717
Primary
The primary colour is used an an accent across many major components and is the CTA colour for buttons.
  • 50
    #ecfdf5
  • 100
    #d1fae5
  • 200
    #a7f3d0
  • 300
    #6ee7b7
  • 400
    #34d399
  • 500
    #10b891
  • 600
    #059669
  • 700
    #047857
  • 800
    #065f46
  • 900
    #064e3b
Violet
Violet, you're turning violet, Violet.
  • 50
    #f5f3ff
  • 100
    #ede9fe
  • 200
    #ddd6fe
  • 300
    #c4b5fd
  • 400
    #a78bfa
  • 500
    #8b5cf6
  • 600
    #7c3aed
  • 700
    #6d28d9
  • 800
    #5b21b6
  • 900
    #4c1d95
Orange
These colours are used as supporting secondary colours in backgrounds, text colours, separators etc .
  • 50
    #fff7ed
  • 100
    #ffedd5
  • 200
    #fed7aa
  • 300
    #fdba74
  • 400
    #fb923c
  • 500
    #f97316
  • 600
    #ea580c
  • 700
    #c2410c
  • 800
    #9a3412
  • 900
    #7c2d12
Pink
These colours are used as supporting secondary colours in backgrounds, text colours, separators etc.
  • 50
    #fdf2f8
  • 100
    #fce7f3
  • 200
    #fbcfe8
  • 300
    #f9a8d4
  • 400
    #f472b6
  • 500
    #ec4899
  • 600
    #db2777
  • 700
    #be185d
  • 800
    #9d174d
  • 900
    #831843
Lime
These colours are used as supporting secondary colours in backgrounds, text colours, separators etc.
  • 50
    #f7fee7
  • 100
    #ecfccb
  • 200
    #d9f99d
  • 300
    #bef264
  • 400
    #a3e635
  • 500
    #84cc16
  • 600
    #65a30d
  • 700
    #4d7c0f
  • 800
    #3f6212
  • 900
    #365314

States

Success
These colours convey a feeling of positivity. Generally used across success, complete states.
  • 50
    #f0fdf4
  • 100
    #dcfce7
  • 200
    #bbf7d0
  • 300
    #86efac
  • 400
    #4ade80
  • 500
    #22c55e
  • 600
    #16a34a
  • 700
    #15803d
  • 800
    #166534
  • 900
    #14532d
Warning
These colours convey a feeling of caution. Generally used across warning states.
  • 50
    #fffbeb
  • 100
    #fef3c7
  • 200
    #fde68a
  • 300
    #fcd34d
  • 400
    #fbbf24
  • 500
    #f59e0b
  • 600
    #d97706
  • 700
    #b45309
  • 800
    #92400e
  • 900
    #78350f
Error
These colours convey a feeling of negativity. Generally used across error states.
  • 50
    #fef2f2
  • 100
    #fee2e2
  • 200
    #fecaca
  • 300
    #fca5a5
  • 400
    #f87171
  • 500
    #ef4444
  • 600
    #dc2626
  • 700
    #b91c1c
  • 800
    #991b1b
  • 900
    #7f1d1d
Info
These colours convey a feeling of calmness. Generally used for info panels, popups or modals.
  • 50
    #eff6ff
  • 100
    #dbeafe
  • 200
    #bfdbfe
  • 300
    #93c5fd
  • 400
    #60a5fa
  • 500
    #3b82f6
  • 600
    #2563eb
  • 700
    #1d4ed8
  • 800
    #1e40af
  • 900
    #1e3a8a

Text

Base
Base colour used for all headings and paragraph text.
  • Primary
    #1d2123
  • Secondary
    #49516e
Links
Used across all paragraph text links.
  • Default
    #0066cc
  • Hover
    #004080
  • Visited
    #4c2c92
  • Active
    #070707
Focus
Accessibility focus styles.
  • BG
    #ffe01a
  • Text
    #0b0c0c
Headings - Desktop
Supporting information about the page, how to use the content inside and links to the other related sections.
Display Extra Large
  • Font size: 80px
  • Line height: 96px
  • Letter spacing: -1px

Display XLarge

Display XLarge

Display XLarge

Display XLarge

Display Large
  • Font size: 64px
  • Line height: 72px
  • Letter spacing: -1px

Display Large

Display Large

Display Large

Display Large

Display Small
  • Font size: 56px
  • Line height: 64px
  • Letter spacing: 0px

Display
Small

Display
Small

Display
Small

Display
Small

Heading H1
  • Font size: 48px
  • Line height: 56px
  • Letter spacing: -0.5px

Heading H1

Heading H1

Heading H1

Heading H1

Heading H2
  • Font size: 40px
  • Line height: 56px
  • Letter spacing: -0.5px

Heading H2

Heading H2

Heading H2

Heading H2

Heading H3
  • Font size: 32px
  • Line height: 48px
  • Letter spacing: 0px

Heading H3

Heading H3

Heading H3

Heading H3

Heading H4
  • Font size: 28px
  • Line height: 36px
  • Letter spacing: 0px

Heading H4

Heading H4

Heading H4

Heading H4

Heading H5
  • Font size: 24px
  • Line height: 32px
  • Letter spacing: 0px
Heading H5
Heading H5
Heading H5
Heading H5
Heading H6
  • Font size: 20px
  • Line height: 28px
  • Letter spacing: 0px
Heading H6
Heading H6
Heading H6
Heading H6
Overline
  • Font size: 14px
  • Line height: 20px
  • Letter spacing: 4px

Business Guidelines

Headings - Mobile
Supporting information about the page, how to use the content inside and links to the other related sections.
H1
  • Font size: 36px
  • Line height: 44px
  • Letter spacing: -0.5px

Heading H1

Heading H1

Heading H1

Heading H1

H2
  • Font size: 32px
  • Line height: 40px
  • Letter spacing: -0.5px

Heading H2

Heading H2

Heading H2

Heading H2

H3
  • Font size: 28px
  • Line height: 36px
  • Letter spacing: 0px

Heading H3

Heading H3

Heading H3

Heading H3

H4
  • Font size: 24px
  • Line height: 32px
  • Letter spacing: 0px

Heading H4

Heading H4

Heading H4

Heading H4

H5
  • Font size: 20px
  • Line height: 28px
  • Letter spacing: 0px
Heading H5
Heading H5
Heading H5
Heading H5
H6
  • Font size: 18px
  • Line height: 24px
  • Letter spacing: 0px
Heading H6
Heading H6
Heading H6
Heading H6
Paragraphs
Supporting information about the page, how to use the content inside and links to the other related sections.
Paragraph - Large
  • Font size: 20px
  • Line height: 28px
  • Letter spacing: -0.1px

Lorem ipsum dolor sit amet. Vel quibusdam officia nam voluptatem molestias et rerum totam aut deserunt accusamus rem assumenda dolor ex voluptas quis est repellendus sint.

Lorem ipsum dolor sit amet. Vel quibusdam officia nam voluptatem molestias et rerum totam aut deserunt accusamus rem assumenda dolor ex voluptas quis est repellendus sint.

Lorem ipsum dolor sit amet. Vel quibusdam officia nam voluptatem molestias et rerum totam aut deserunt accusamus rem assumenda dolor ex voluptas quis est repellendus sint.

Paragraph - Medium
  • Font size: 17px
  • Line height: 24px
  • Letter spacing: -0.1px

Lorem ipsum dolor sit amet. Vel quibusdam officia nam voluptatem molestias et rerum totam aut deserunt accusamus rem assumenda dolor ex voluptas quis est repellendus sint.

Lorem ipsum dolor sit amet. Vel quibusdam officia nam voluptatem molestias et rerum totam aut deserunt accusamus rem assumenda dolor ex voluptas quis est repellendus sint.

Lorem ipsum dolor sit amet. Vel quibusdam officia nam voluptatem molestias et rerum totam aut deserunt accusamus rem assumenda dolor ex voluptas quis est repellendus sint.

Paragraph - Small
  • Font size: 14px
  • Line height: 20px
  • Letter spacing: -0.1px

Lorem ipsum dolor sit amet. Vel quibusdam officia nam voluptatem molestias et rerum totam aut deserunt accusamus rem assumenda dolor ex voluptas quis est repellendus sint.

Lorem ipsum dolor sit amet. Vel quibusdam officia nam voluptatem molestias et rerum totam aut deserunt accusamus rem assumenda dolor ex voluptas quis est repellendus sint.

Lorem ipsum dolor sit amet. Vel quibusdam officia nam voluptatem molestias et rerum totam aut deserunt accusamus rem assumenda dolor ex voluptas quis est repellendus sint.

Paragraph - XSmall
  • Font size: 12px
  • Line height: 20px
  • Letter spacing: -0.1px

Lorem ipsum dolor sit amet. Vel quibusdam officia nam voluptatem molestias et rerum totam aut deserunt accusamus rem assumenda dolor ex voluptas quis est repellendus sint.

Lorem ipsum dolor sit amet. Vel quibusdam officia nam voluptatem molestias et rerum totam aut deserunt accusamus rem assumenda dolor ex voluptas quis est repellendus sint.

Lorem ipsum dolor sit amet. Vel quibusdam officia nam voluptatem molestias et rerum totam aut deserunt accusamus rem assumenda dolor ex voluptas quis est repellendus sint.

Typography

Typography guidelines ensure that we maximise legibility and maintain visual hierarchy throughout all of our content. It also helps us maintain consistency within our design workflow.

Typeface

The eastriding.gov.uk website uses HK Grotesk as its default font face and Alegreya for headings.

This is Alegreya

Welcome to Rollings Photography

This paragraph text is in the HK Grotesk font face.

  • Aa
    Light
    300
  • Aa
    Regular
    400
  • Aa
    Medium
    500
  • Aa
    Semi Bold
    600
  • Aa
    Bold
    700
  • Aa
    Extra Bold
    800
  • Aa
    Black
    900

Spacing

A comprehensive spacing system with tight integration into the 4px scale which properly aligns to the layout and ensures elements look harmonious.
NameMultiplierExample classSize 
Double-extra small1er-paddingall-xxsmall4px
Extra small2er-paddingall-xsmall8px
Small3er-paddingall-small12px
Medium4er-paddingall-medium16px
Big5er-paddingall-big20px
Extra big6er-paddingall-xbig24px
Double-extra big7er-paddingall-xxbig28px
Triple-extra big8er-paddingall-xxxbig32px
Large10er-paddingall-large40px
Extra large12er-paddingall-xlarge48px
Double-extra large16er-paddingall-xxlarge64px
Triple-extra large20er-paddingall-xxxlarge80px
Huge24er-paddingall-huge96px
Extra huge32er-paddingall-xhuge120px
Double-extra huge40er-paddingall-xxhuge160px
Triple-extra huge48er-paddingall-xxxhuge192px
Example classes

A few examples of margin and padding classes using the above size variants.

  • er-paddingall-xxsmall
  • er-paddingleft-xsmall
  • er-paddingright-small
  • er-paddingtop-medium
  • er-paddingbottom-big
  • er-marginall-xbig
  • er-marginleft-xxbig
  • er-marginright-xxxbig
  • er-margintop-large
  • er-marginbottom-xlarge

Blurs

No blur effect
blur-small
backdrop-filter: blur(2px)
blur-medium
backdrop-filter: blur(4px)
blur-large
backdrop-filter: blur(6px)
blur-xlarge
backdrop-filter: blur(10px)
blur-xxlarge
backdrop-filter: blur(16px)

Shadows

shadow-xsmall
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
shadow-small
box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
box-shadow: 0px 1px 2px -1px rgba(16, 24, 40, 0.1);
shadow-medium
box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.1);
box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.1);
shadow-large
box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
box-shadow: 0px 4px 6px -4px rgba(16, 24, 40, 0.1);
shadow-xlarge
box-shadow: 0px 20px 25px -5px rgba(16, 24, 40, 0.1);
box-shadow: 0px 8px 10px -6px rgba(16, 24, 40, 0.1);
shadow-xxlarge
box-shadow: 0px 28px 36px -8px rgba(16, 24, 40, 0.1);
box-shadow: 0px 10px 12px -8px rgba(16, 24, 40, 0.1);
Accordion
An accordion is a list of headers that hide or reveal additional content when selected.

Demo item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labori nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

More information

Sub-accordion demo 1

Sem viverra aliquet eget sit amet tellus. Orci dapibus ultrices in iaculis nunc sed augue. Suspendisse potenti nullam ac tortor vitae. Mi tempus imperdiet nulla malesuada pellentesque. Condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi. Purus in massa tempor nec feugiat nisl pretium fusce id. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Dignissim convallis aenean et tortor. Ac ut consequat semper viverra nam.

Nec feugiat nisl pretium fusce id velit ut. Enim praesent elementum facilisis leo. Mauris sit amet massa vitae tortor. Eget duis at tellus at urna condimentum mattis. Imperdiet sed euismod nisi porta. Id diam vel quam elementum pulvinar etiam non quam. Dolor morbi non arcu risus quis varius quam quisque.

Demo item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labori nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Sub-accordion demo 1

Sem viverra aliquet eget sit amet tellus. Orci dapibus ultrices in iaculis nunc sed augue. Suspendisse potenti nullam ac tortor vitae. Mi tempus imperdiet nulla malesuada pellentesque. Condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi. Purus in massa tempor nec feugiat nisl pretium fusce id. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Dignissim convallis aenean et tortor. Ac ut consequat semper viverra nam.

Nec feugiat nisl pretium fusce id velit ut. Enim praesent elementum facilisis leo. Mauris sit amet massa vitae tortor. Eget duis at tellus at urna condimentum mattis. Imperdiet sed euismod nisi porta. Id diam vel quam elementum pulvinar etiam non quam. Dolor morbi non arcu risus quis varius quam quisque.

Button
A button is used to trigger actions based on a user's interaction.
Default Hover Active Disabled Focus
Button text Button text Button text Button text Button text
Button text Button text Button text Button text Button text
Button text Button text Button text Button text Button text
Button text Button text Button text Button text Button text
Button text Button text Button text Button text Button text
Primary <a> Button text Button text Button text Button text Button text Disabled
Primary <button>
Call to action <a> Button text Button text Button text Button text Button text Disabled
Call to action <button>
Secondary <a> Button text Button text Button text Button text Button text Disabled
Secondary <button>
Warning <a> Button text Button text Button text Button text Button text Disabled
Warning <button>
Link <a> Button text Button text Button text Button text Button text Disabled
Link <button>
Card
Cards contain content and action about a single subject.
Title
Title

Description

Title

Description

Title

Description

Title

Description

Title

Description

Title
Title

Description

Title

Description

23 Feb
Goldsborough Hall
Title