Design system & styleguide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

For Webflow training, systems integrations, or feature development, please contact Peter at Atomclash

For branding and visual design, please contact George at Maido

01

Colours

Click to copy the hex code to your clipboard.

#224237
Primary

Mid Green Darker

#264B3F
Primary

Mid Green Dark

#305E4F
Primary

Mid Green

#597E72
Primary

Mid Green Light

#FFF2BF
Primary

Mid Green Lighter

#411417
Secondary

Burgundy Darker

#672024
Secondary

Burgundy Dark

#81282D
Secondary

Burgundy

#C09496
Secondary

Burgundy Light

#F2ECE7
Secondary

Burgundy Lighter

#FCDFD0
Support

Dusty Pink

#FFE2B4
Support

Sand

#D2E9E3
Support

Opal Blue

#A0BBDD
Support

Blue

#FFCB00
Support

Sand

#050908
Greys

Black

#5F5D57
Greys

Dark Grey

#ECECEC
Greys

Neutral Grey

#F1EFEB
Greys

White Smoke

#F8F8F8
Greys

Light Grey

#FFFFFF
Greys

White

#EA5A5A
States

Error

02

Typography

Bodoni Moda 400 for headings and Helvetica Neue (on devices that support it, Arial on those that don't). Negative letter spacing for large type and for very small text, letter spacing has been increased.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Global text size 1
Global text size 2
Global text size 3
Global text size 4
Global text size 5
Global text size 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

  • Unordered list
  • Unordered list
  • Unordered list
  • Unordered list
  1. Ordered list
  2. Ordered list
  3. Ordered list
  4. Ordered list

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

03

Rich text area

Bodoni Moda 400 for headings and Helvetica Neue (on devices that support it, Arial on those that don't). Negative letter spacing for large type and for very small text, letter spacing has been increased.

This is the intro to a "news & insights" article. It's nice and big and clear so great for people who would like the gist of the article without, urgh, having to read stuff.

This is a H2 heading

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

You can only say "Agile" if it comes from the Bay Area of Southern California, otherwise you have to call it "Sparkling Operations".

Pete Blatchford
AtomClash

Press shift and return to have no paragraph margin between the author / orator and their company or role

This is a heading

This is a H3 heading

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This heading is H4

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This heading is h5, Please don't use capital letters, the CSS handles that.

What's that, you want to know what a link looks like? No problemo, the hyperlinks look like that.

  • Item
  • Another item
  • A third item
  • Last one I promise
Heading 6 is tiny
  1. An ordered list
  2. Should I hide the numbers?
  3. Is that semantically correct?
04

Forms

We still need to design and build the form success message. Should it be animated?

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
06

Grids

Tick grid

  • Checkbox please
  • And another
  • a vowel
  • and a consenant

Arrow grid

Number grid

0
1

Commercial

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elem

Learn more
0
2

Corporate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elem

Learn more
0
3

Disputes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elem

Learn more
0
4

Employment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elem

Learn more
0
5

Family

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elem

Learn more
0
6

Intellectual property

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elem

Learn more
0
7

Private client

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elem

Learn more
0
8

Property

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elem

Learn more
0
9

Reputation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elem

Learn more
07

Clarity

Clarity kicker

We work with companies that mean the world to their people but need our help to mean something to the world.

Clarity intro is the base class for this element. There is also a modifier that can be added on to split it into 2 columns on large viewports. Clarity intro is the base class for this element. There is also a modifier that can be added on to split it into 2 columns on large viewports. Clarity intro is the base class for this element. There is also a modifier that can be added on to split it into 2 columns on large viewports.

Clarity intro is the base class for this element. There is also a modifier that can be added on to split it into 2 columns on large viewports. Clarity intro is the base class for this element. There is also a modifier that can be added on to split it into 2 columns on large viewports. Clarity intro is the base class for this element. There is also a modifier that can be added on to split it into 2 columns on large viewports.

08

People & key contacts

Profiles

Juliane Althoff

Associate
Learn more

James Harman

Partner
Learn more

Jonathan Blair

Partner
Learn more

Lisa Logan

Partner
Learn more

Expert profiles

09

Global utility classes

Global margin top (small)

Global no margin

Global text centered

global text inline

global text inline

global text inline

global text inline

Global text large

Global text muted

GLoBaL text loweRcaSE

GLoBaL text uPpeRcaSE

Global tiny heading

Global small print

Global small print

Global hidden tablet down (this will only show on desktop)

10

Testimonials

“They provide carefully considered support and guidance. Adding value at every stage of the process”
Chambers and Partners
“They provide carefully considered support and guidance. Adding value at every stage of the process”
Chambers and Partners
“They provide carefully considered support and guidance. Adding value at every stage of the process”
Chambers and Partners
11

Callout

Apply for a training contract at Simkins in 2024

Please ensure you can be available to attend an interview and work placement on these dates before submitting your application.

Apply on Apply4Law

The deadline for all completed applications is Monday [date] May 2022.

Interviews will take place in the week commencing Monday [date] July 2022

the work placement week will take place in the week commencing Monday [date] August 2022.

Applications for training contracts commencing September 2024 will open on 1 October 2021. We are unable to accept registrations prior to that date.