Template

Style guide

The colours, type, buttons and labels that make up Verdix. Each one is a variable, a style or a component, so a change here updates the whole site.

Colour

Every colour is a variable in the Verdix collection. Change it once in the Variables panel and every page follows.

Espresso

Color/Espresso · #23120B

Cocoa

Color/Cocoa · #3A1A0C

Ink Soft

Color/Ink Soft · #5E4F48

Muted

Color/Muted · #8A7B74

Paper

Color/Paper · #FDFAF8

Cream

Color/Cream · #FBF4EF

Blush

Color/Blush · #F3E3D9

Peach

Color/Peach · #EBC4AE

Lilac

Color/Lilac · #B7A3F0

Lilac Soft

Color/Lilac Soft · #ECE6FD

Line

Color/Line · #EADCD3

On Dark

Color/On Dark · #FCF7F4

On Dark Muted

Color/On Dark Muted · #A8968C

Typography

Newsreader for headings, Instrument Sans for text and Caveat for signatures. Sizes come from the Font Size variables and shrink on smaller screens through the Tablet and Mobile modes.

Aa

Newsreader

Font Family/Serif · Light to Medium

Aa

Instrument Sans

Font Family/Sans · Regular to Semibold

Aa

Caveat

Font Family/Script · signatures

Font Size/Giant

One lawyer, plain English

Font Size/Hero

One lawyer, plain English

Font Size/Heading Extra Large

One lawyer, plain English

Font Size/Heading Large

One lawyer, plain English

Font Size/Heading Extra Small

One lawyer, plain English

Font Size/Heading Tiny

One lawyer, plain English

Font Size/Text Large

Fixed fees for every stage, agreed before it begins.

Font Size/Text Base

Fixed fees for every stage, agreed before it begins.

Font Size/Text Small

Fixed fees for every stage, agreed before it begins.

Font Size/Label

Fixed fees for every stage, agreed before it begins.

Buttons

One Button component with five variants: Primary and Ghost on light backgrounds, Light and Line on dark ones, and Nav in the navigation bar. Set the text, link and variant in its settings.

Labels

Eyebrows sit above section titles; pills mark a status inside cards; code labels name attributes and classes in the docs.

Practice areas

ReadyNextLaterdata-vx-reveal

Rich text

Insights and practice area pages share one rich text style. Headings, paragraphs, lists and quotes inside it use the base tag styles.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Your contract is an agreement between two parties, so as a rule neither side can change it alone. This paragraph shows body text inside articles: a comfortable line length, relaxed line height and the Ink Soft colour.

A paragraph with an inline link to the insights shows how links sit inside running text, and how they keep the text colour with an underline.

Put any objection in writing, early, and keep a copy.
When three of our sales team resigned on the same day, Owen already knew our contracts better than we did. He set out which clauses a court would enforce, wrote one firm letter, and five weeks later every client account was still ours, without a single day in court.
Marble busts and old law books in a library
A captioned image. The caption sits under the photo in the small sans style.

Ordered list

  1. Ask for the proposed change in writing
  2. Check your contract and staff handbook
  3. Raise any concerns before it takes effect

Unordered list

  • Unfair dismissal
  • Redundancy and restructuring
  • Settlement agreements
  • Before you sign
    • Ask for the agreement in writing
    • Check the reference wording
  • After you sign
    • Keep a signed copy
    • Diary the payment date

Text link

Bold text

Emphasis

Superscript

Subscript