Design System

00 – Style Guide

dc-lawyers.com
FS | Client-First — Version 2.1
DP | Release 2024-02-20

Table of contents

Typography
Headings
Extra Headings
Body
Text Sizes
Text Weights
HTML Tags
Colors
Primary Color Palette
Secondary Color Palette
Utility Colors
Buttons
Buttons
Text Links
Forms
Form Elements

Typography

Headings

We use Raleway as the heading typeface
All H1 Headings
heading-style-h1
font-size: 4.5rem (72px)
line-height: 4.5rem (72px)
letter-spacing: 0

Heading 1 / 600 - Semi Bold

heading-style-h1

All H2 Headings
heading-style-h2
font-size: 3rem (48px)
line-height: 3,5rem (56px)
letter-spacing: 0

Heading 2 / 600 - Semi Bold

heading-style-h2

All H3 Headings
heading-style-h3
font-size: 2rem (32px)
line-height: 2.5rem (40px)
letter-spacing: 0

Heading 3 / 600 - Semi Bold

heading-style-h3

All H4 Headings
heading-style-h4
font-size: 1.5rem (24px)
line-height: 2rem (32px)
letter-spacing: 0

Heading 4 / 600 - Semi Bold

heading-style-h4

All H5 Headings
heading-style-h5
font-size: 1.125rem (18px)
line-height: 1.5rem (24px)
letter-spacing: 0
Heading 5 / 600 - Semi Bold

heading-style-h5

All H6 Headings
heading-style-h6
font-size: 0.875rem (14px)
line-height: 1.5rem (24px)
letter-spacing: 0
Heading 6 / 600 - Semi Bold

heading-style-h6

Extra Headings

heading-jumbo
font-size: 4.5rem (72px)
line-height: 4.5rem (72px)
letter-spacing: 0

heading-jumbo

text-style-subheader
font-size: 1.125rem (18px)
line-height: 1.5rem (24px)
letter-spacing: 0.9px

Text Style Subheader (H2)

Text Style Subheader (Text)

Body

We use Raleway as the body typeface

Text Sizes

text-size-xxlarge
font-size: 2.5rem (40px)
line-height: 3rem (48px)
letter-spacing: 0
Body / Xxlarge / 400 - Normal
text-size-xlarge
font-size: 2rem (32px)
line-height: 2.5rem (40px)
letter-spacing: 0
Body / Xlarge / 400 - Normal
text-size-large
font-size: 1.5rem (24px)
line-height: 2rem (32px)
letter-spacing: 0
Body / Large / 400 - Normal
text-size-medium
font-size: 1.25rem (20px)
line-height: 1.5rem (24px)
letter-spacing: 0
Body / Medium / 400 - Normal
All Paragraphs
text-size-regular
font-size: 1rem (16px)
line-height: 1.5rem (24px)
letter-spacing: 0

Body / Paragraph / 400 - Normal

Body / Paragraph / 400 - Normal
text-size-small
font-size: 0.875rem (14px)
line-height: 1rem (16px)
letter-spacing: 0
Body / Small / 400 - Normal
text-size-tiny
font-size: 0.75rem (12px)
line-height: 0.875rem (14px)
letter-spacing: 0
Body / Tiny / 400 - Normal

Text Weights

text-weight-xbold
⚠️ Weight not installed
Body / 900 - Black
text-weight-xbold
⚠️ Weight not installed
Body / 800 - Extra Bold
text-weight-bold
Body / 700 - Bold
text-weight-semibold
Body / 600 - Semi Bold
text-weight-medium
Body / 500 - Medium
text-weight-normal
Body / 400 - Normal
text-weight-light
⚠️ Weight not installed
Body / 300 - Light
text-weight-xlight
⚠️ Weight not installed
Body / 200 - Extra Light
text-weight-thin
⚠️ Weight not installed
Body / 100 - Thin

HTML Tags

All Block Quotes
The details are not the details.
They make the design.
– Charles Eames, The Elements of User Experience
All Unordered Lists
  • Type: Unordered – Style: No Bullets
  • Type: Unordered – Style: No Bullets
  • Type: Unordered – Style: No Bullets
  • Type: Unordered – Style: Bullets
  • Type: Unordered – Style: Bullets
  • Type: Unordered – Style: Bullets
All Ordered Lists
  1. Type: Ordered – Style: Bullets
  2. Type: Ordered – Style: Bullets
  3. Type: Ordered – Style: Bullets

Colors

This is the core color palette for the [acme] brand and website UI

Primary Color Palette

Primary
Tussock
#ae844b
Accent/Brand
Tussock
#ae844b

Secondary Color Palette

Secondary
Atomic
#3e4c54

Utility Colors

Core

Body Background
Body Text
Headings
Alabaster
#fbfcfc
Vulcan
#141719
Vulcan
#141719

Forms

Borders
Input Placeholder
Input Background
Input Background : Focus
Bon Jour
#e2e2e2
White
#ffffff
Camel
#be9c6b
Light French Beige
#caaf88

Buttons

Primary

States
Modifiers
button
button
is-full-width
button
is-small
button
is-large
button
is-icon
None
Button Text
Hover
Button Text
Pressed
Button Text
Focused
Button Text
disable
Button Text
Button TextButton TextButton Text
Button Text

Secondary

button
is-secondary
button
is-secondary
is-full-width
button
is-secondary
is-small
button
is-secondary
is-large
button
is-secondary
is-icon
None
Button Text
Hover
Button Text
Pressed
Button Text
Focused
Button Text
disable
Button Text
Button TextButton TextButton Text
Button Text

Text

button
is-text
button
is-text
is-full-width
button
is-text
is-small
button
is-text
is-large
button
is-text
is-icon
Button TextButton TextButton TextButton Text
Button Text

Text Links

All Links
text-style-link
text-style-link-fancy
All Linkstext-style-link
text-style-link-fancy

Forms

form_component
form_form
form_field-wrapper
form_label
form_input
form_input
cc-valid
form_input
cc-error
form-field-2col
form_input
button-inside
form_input
is-text-area
form_input
is-select-input
form_checkbox
form_checkbox-icon
form_checkbox-label
form_checkbox
form_checkbox-icon-custom
form_checkbox-label
form_radio
form_radio-icon
form_radio-label
form_radio
form_radio-icon-custom
form_radio-label
Thank you! Your submission has been received!
Oops! Something went wrong when submitting the form. Please try again a little later. If the problem persists, please contact me/us directly via the email address above/below.