Southwark design system
By using the styles and guidelines provided here, you can ensure that your design aligns with the values and objectives of Southwark Council.
Why you should use the recommended styles and guidelines
- Consistency: Using the recommended styles and guidelines will ensure consistency across the website.
- Accessibility: By using the recommended styles and guidelines, you can ensure that your design is accessible to all users, including those with disabilities.
- Trust: By using the recommended styles and guidelines, you can help build trust with users by demonstrating that the website is well-designed and easy to use.
Contents
Logogram
The Southwark Council web site uses the following SVG logo.
Foundation framework
The Southwark Council web pages use this framework for layout. If you need to create rows and columns in your layouts you can use the rules prebuilt into this CSS system without the need of compiling other frameworks in your CSS.
We recommend that you use the Flexbox powered grid, but you may also use the XY grid which is also compiled into the project.
| Library | Version |
|---|---|
| Foundation - sites | v6.76 |
| jQuery JavaScript Library | v3.6.3 |
| Both of these libraries are compiled into the single file | https://www.southwark.gov.uk/js/app-branding-min.js |
| CSS | https://www.southwark.gov.uk/css/app-branding-min.css |
Here's a basic grid
Six cell
Six cell
12/6/4 columns
12/6/8 columns
Grid breakpoints
This web project uses grid breakpoints to ensure that it looks and functions well across different devices and screen sizes. The breakpoints are defined at these widths.
| Viewport name | Small | Medium | Large | xLarge | xxLarge |
|---|---|---|---|---|---|
| Viewport size | 0px | 640px | 1024px | 1200px | 1440px |
Components
If you wish to use foundation HTML components, these ones are rendered in this web project.
Generic components
- foundation-button
- foundation-close-button
- foundation-label
- foundation-progress-bar
- foundation-switch
- foundation-table
- foundation-breadcrumbs
- foundation-callout
- foundation-pagination
- foundation-tooltip
Containers
- foundation-accordion
- foundation-media-object
- foundation-orbit
- foundation-responsive-embed
- foundation-tabs
- foundation-thumbnail
Menu-based containers
- foundation-menu
Layout components
- foundation-reveal
- foundation-sticky
Helpers
- foundation-float-classes
- foundation-flex-classes
- foundation-visibility-classes
- foundation-prototype-classes
Typography
This web project uses the Adobe fonts web service.
The font is Myriad Pro. This font family is already compiled into your branded template and will work only if your project is hosted on the southwark.gov.uk domain.
You can view the font information here.
If needed, you can set the font family in your CSS like this:
body {font-family: myriad-pro, sans-serif;}
Font sizes and breakpoints
| Element | 640px- breakpoint | 640px+ breakpoint |
|---|---|---|
<h1> |
1.68rem (32px) | 2.53rem (48px) |
<h2> |
0.95rem (18px) | 1.89rem (36px) |
<h3> |
0.95rem (18px) | 1.26rem (24px) |
<h4> |
0.95rem (18px) | 1.16rem (22px) |
<h5> |
0.84rem (16px) | 0.95rem (18px) |
<h6> |
0.84rem (16px) | 0.95rem (18px) |
<p> |
0.84rem (16px) | 0.95rem (19px) |
<li> |
0.84rem (16px) | 0.95rem (19px) |
h1. This is the largest header.
h2. This is a large header.
h3. This is a medium header.
h4. This is a moderate header.
h5. This is a small header.
h6. This is a tiny header.
p. This is a paragraph.
Colour palette
Primary - Teal blue
HEX #256F8A
Usage: Header
Primary decor - Dark sky blue
HEX #7ABED6
Usage: Primary decor
Secondary decor - Maximum blue
HEX #3AADD6
Usage: Secondary decor
Tertiary decor - Rackley
HEX #5A8B9D
Usage: Tertiary decor
Quaternary decor - Japanese indigo
HEX #5A8B9D
Usage: Quaternary decor
Chinese black
HEX #111111
Usage: Header accent
Eerie Black
HEX #1B1B1B
Usage: Footer
Anti flash white
HEX #EEF3F4
Usage: Champion accent
Bright Grey
HEX #EFEFEF
Usage: Breadcrumb
Green Blue
HEX #1D70B8
Usage: Website notifications
Dartmouth green
HEX #00713A
Usage: Call to action
GDS components
You are free to use these components in your project.
Details component
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Callout component
Duis aute irure dolor in reprehenderit
| Type | Tag |
|---|---|
| Primary | Blue |
| Success | Green |
| Ready | Yellow |
| Waiting or incomplete | Grey |
| Warning | Red |