For the person editing this site

Style guide, and how to make it yours.

Style guide, and how to make it yours.

Upheld runs on ten colour styles, eighteen text styles, eight collections and a handful of components. Change those and every page follows. Delete this page before you publish your own site.

Setup

Seven steps,
about an afternoon.

Seven steps,
about an afternoon.

1. The name

1. The name

Open the Navigation component and type the name and the line beside it in the Desktop variant; the other variants follow. Then change it in the footer of the Main layout template, in the Name control of Corner card, in the hero and About on Home, on About, and at the end of each page title in the page settings.

Open the Navigation component and type the name and the line beside it in the Desktop variant; the other variants follow. Then change it in the footer of the Main layout template, in the Name control of Corner card, in the hero and About on Home, on About, and at the end of each page title in the page settings.

2. The portrait

2. The portrait

Select Corner card in the Main layout template and replace Photo. Focus decides which part of the picture stays in frame. Use the same photo on About.

Select Corner card in the Main layout template and replace Photo. Focus decides which part of the picture stays in frame. Use the same photo on About.

3. Telephone and email

3. Telephone and email

The number is in Navigation (in the bar, on the Call button of the two phone variants, and in the phone menu), on Corner card (Button label and Button link), on the Call button of the closing section, in the footer and on Contact. The email is in the phone menu, the closing section, the footer and on Contact.

The number is in Navigation (in the bar, on the Call button of the two phone variants, and in the phone menu), on Corner card (Button label and Button link), on the Call button of the closing section, in the footer and on Contact. The email is in the phone menu, the closing section, the footer and on Contact.

4. Colours and type

4. Colours and type

Assets, then Styles. After changing the font on the text styles, set the Font controls on Verdict, Quote row and Corner card to the same family name, and the font on the five form fields.

Assets, then Styles. After changing the font on the text styles, set the Font controls on Verdict, Quote row and Corner card to the same family name, and the font on the five form fields.

5. The collections

5. The collections

Practice, Matters, Steps, Fees, Testimonials, Questions, Notes and Legal. Lists, pages and counts fill themselves. Tick Featured on up to four matters to put them in the pinned results scene.

Practice, Matters, Steps, Fees, Testimonials, Questions, Notes and Legal. Lists, pages and counts fill themselves. Tick Featured on up to four matters to put them in the pinned results scene.

6. The form

6. The form

On Contact, select the form and choose where entries are sent. The list under “What has happened?” is edited on the select field.

On Contact, select the form and choose where entries are sent. The list under “What has happened?” is edited on the select field.

7. Before you publish

7. Before you publish

Replace the three legal pages with wording your own bar rules require, set the site title and language in Site settings, then delete this page and its link in the footer.

Replace the three legal pages with wording your own bar rules require, set the site title and language in Site settings, then delete this page and its link in the footer.

Colour styles

Ten styles,
one accent.

Ten styles,
one accent.

Page

#071C1A

The page

Surface

#0F2F2B

Cards and photo grounds

Line

#1B3F3A

Hairlines

Faint

#1C4640

Result words in the closing

Ink

#F2EFE2

Headings and labels

Soft

#C8D2C6

Paragraphs

Muted

#86A39B

Second tone, small text

Accent

#FFE09E

Buttons, the marked words

On accent

#071C1A

Text on the accent

On photo

#FFFFFF

Text on photographs

Text styles

Switzer,
regular and medium.

Switzer,
regular and medium.

Display · The first line of Home and 404 · 76 / 60 / 44

A lawyer in your corner.

Page title · Page headers · 60 / 48 / 36

What has happened?

Result · The one-word result in lists · 54 / 44 / 36

Reinstated.

Section · Section headings · 46 / 38 / 30

The fee is agreed before the work starts.

Figure · Fees and step numbers · 46 / 38 / 32

$450

Matter title · Titles from the CMS · 34 / 28 / 24

Dismissed after eleven years, back at work in nine weeks

Statement · Large second headings · 34 / 28 / 24

The fee is agreed before the work starts.

Row · Practice rows · 30 / 26 / 22

I have lost my job

Menu · The phone menu · 28

Practice

Subheading · Headings in long text · 26 / 24 / 21

The fee is agreed before the work starts.

Title · Card and row titles · 21 / 20 / 19

The fee is agreed before the work starts.

Wordmark · The name in the navigation · 21

Dana Whitlock

Lead · Introductions · 20 / 19 / 17

The fee is agreed before the work starts.

Body · Paragraphs · 17 / 17 / 16

The fee is agreed before the work starts.

Small · Marks and details · 15

The fee is agreed before the work starts.

Label · Buttons and values · 15 medium

The fee is agreed before the work starts.

Nav · Navigation links · 15

The fee is agreed before the work starts.

Caption · Small print · 13

The fee is agreed before the work starts.

Other palettes

Three more,
as values to copy.

Three more,
as values to copy.

Oxblood

Page #1C0B0E · Surface #2D1418 · Line #3D1B22 · Faint #45202A · Ink #F4ECE4 · Soft #D9C8C2 · Muted #A88A87 · Accent #F2C9A0 · On accent #1C0B0E

Page #1C0B0E · Surface #2D1418 · Line #3D1B22 · Faint #45202A · Ink #F4ECE4 · Soft #D9C8C2 · Muted #A88A87 · Accent #F2C9A0 · On accent #1C0B0E

Navy

Page #0A1424 · Surface #12213A · Line #1A2C4A · Faint #1D3355 · Ink #EEF0EA · Soft #C4CCD6 · Muted #8496AE · Accent #F3DFA2 · On accent #0A1424

Page #0A1424 · Surface #12213A · Line #1A2C4A · Faint #1D3355 · Ink #EEF0EA · Soft #C4CCD6 · Muted #8496AE · Accent #F3DFA2 · On accent #0A1424

Paper, a light one

Page #F4F1E8 · Surface #E9E4D6 · Line #D5CFBD · Faint #DCD6C4 · Ink #10201D · Soft #33443F · Muted #5E6E67 · Accent #0F3B34 · On accent #F4F1E8

Page #F4F1E8 · Surface #E9E4D6 · Line #D5CFBD · Faint #DCD6C4 · Ink #10201D · Soft #33443F · Muted #5E6E67 · Accent #0F3B34 · On accent #F4F1E8

Components

What each one does,
and where to edit it.

What each one does,
and where to edit it.

Primary button

Outline button

Verdict

Verdict

The pinned results scene on Home and the header of each matter page. One instance sits in each item of a Matters list, and the scroll steps through them one word at a time. Largest word, columns, fonts and colours are controls.

The pinned results scene on Home and the header of each matter page. One instance sits in each item of a Matters list, and the scroll steps through them one word at a time. Largest word, columns, fonts and colours are controls.

Code · Home, Matter

Code · Home, Matter

Corner card

Corner card

The portrait that opens Home at full height, then docks in the corner of every page as a call card. Photo, Focus, name, status, button and where it hides are controls.

The portrait that opens Home at full height, then docks in the corner of every page as a call card. Photo, Focus, name, status, button and where it hides are controls.

Code · Main layout template

Code · Main layout template

Quote row

Quote row

Names in a column, one quote beside them. Pointing at a name, or tapping it, shows that person’s words.

Names in a column, one quote beside them. Pointing at a name, or tapping it, shows that person’s words.

Code · Home, In their words

Code · Home, In their words

Motion overrides

Motion overrides

Drift and Open on scroll for photos. Side track, Side pin and Side row for the process line that travels sideways. Corner stop for a section the Corner card should step aside for.

Drift and Open on scroll for photos. Side track, Side pin and Side row for the process line that travels sideways. Corner stop for a section the Corner card should step aside for.

Code · Motion.tsx

Code · Motion.tsx

Viewport overrides

Viewport overrides

Keep the pinned scenes and the phone menu at the visible window height on phones. Active tab marks the chosen filter on Matters.

Keep the pinned scenes and the phone menu at the visible window height on phones. Active tab marks the chosen filter on Matters.

Code · Viewport.tsx

Code · Viewport.tsx

Navigation

Navigation

Desktop, Tablet, Phone and Phone open. Edit the links in Desktop and in Phone open.

Desktop, Tablet, Phone and Phone open. Edit the links in Desktop and in Phone open.

Canvas

Canvas

Button

Button

Primary and Outline, each with a hover. Label and Link are controls.

Primary and Outline, each with a hover. Label and Link are controls.

Canvas

Canvas

Question row

Question row

Closed and Open. The Questions lists fill it.

Closed and Open. The Questions lists fill it.

Canvas

Canvas

Submit button

Submit button

Default, Pending, Success and Failed states of the contact form. Type the messages in each variant.

Default, Pending, Success and Failed states of the contact form. Type the messages in each variant.

Canvas

Canvas

Agent skills

Agent skills

Four sets of instructions for Framer’s Agent are saved in this project: the base rules of the design, which always apply, and Add content, Add a page and Rebrand. Ask the Agent for one of those jobs and it follows them.

Four sets of instructions for Framer’s Agent are saved in this project: the base rules of the design, which always apply, and Add content, Add a page and Rebrand. Ask the Agent for one of those jobs and it follows them.

Agent · Skills

Agent · Skills

Page switches

Page switches

Each page has three switches from the layout template: Portrait hero (on for Home), Closing, and Corner card. Contact, the legal pages, 404 and this page turn the closing off.

Each page has three switches from the layout template: Portrait hero (on for Home), Closing, and Corner card. Contact, the legal pages, 404 and this page turn the closing off.

Page settings

Page settings

Collections

Eight collections,
and what each feeds.

Eight collections,
and what each feeds.

Practice

Practice

The “What has happened?” rows on Home and on Practice, and each practice page.

The “What has happened?” rows on Home and on Practice, and each practice page.

5 items

5 items

Matters

Matters

The results scene (Featured), the grid on Home, the Matters page and its filter, each matter page, the matters on practice pages, and the words in the closing.

The results scene (Featured), the grid on Home, the Matters page and its filter, each matter page, the matters on practice pages, and the words in the closing.

6 items

6 items

Steps

Steps

The process line on Home.

The process line on Home.

6 items

6 items

Fees

Fees

The fees table on Home and on Fees.

The fees table on Home and on Fees.

8 items

8 items

Testimonials

Testimonials

In their words, on Home.

In their words, on Home.

4 items

4 items

Questions

Questions

The accordion on Home and on Fees.

The accordion on Home and on Fees.

6 items

6 items

Notes

Notes

The Notes page, each note, and the next note link.

The Notes page, each note, and the next note link.

4 items

4 items

Legal

Legal

Privacy policy, Terms of use and Disclaimer. Placeholder copy.

Privacy policy, Terms of use and Disclaimer. Placeholder copy.

3 items

3 items

Not in the CMS

Not in the CMS

The three facts in the hero, the three rules on About and the three points on Fees are plain text layers: select one and type. The filter buttons on Matters are layers too; add one for each new practice and copy the tap action from its neighbour.

The three facts in the hero, the three rules on About and the three points on Fees are plain text layers: select one and type. The filter buttons on Matters are layers too; add one for each new practice and copy the tap action from its neighbour.

Create a free website with Framer, the website builder loved by startups, designers and agencies.