Web color system

Favicon

A favicon is the small site icon in the browser tab, next to the page name. It is also what people see in bookmarks and in Google results. Please look at the tab first, then the Google result. Each card has a number. Please send us the number you like best.

This is the favicon at real size. In the browser tab the icon is 16 pixels, beside the page name.

Square

White

Parente Borean LLP

parenteborean.com

Navy

Parente Borean LLP

parenteborean.com

Logo Blue

Parente Borean LLP

parenteborean.com

Slate Grey

Parente Borean LLP

parenteborean.com

Black

Parente Borean LLP

parenteborean.com

Circle

White

Parente Borean LLP

parenteborean.com

Navy

Parente Borean LLP

parenteborean.com

Logo Blue

Parente Borean LLP

parenteborean.com

Slate Grey

Parente Borean LLP

parenteborean.com

Black

Parente Borean LLP

parenteborean.com

Parente Borean LLP

This is how the icon looks in a Google result, beside the firm name.

Parente Borean LLP

https://www.parenteborean.com

Parente Borean LLP | Barristers and Solicitors

Barristers and solicitors.

Parente Borean LLP

https://www.parenteborean.com

Parente Borean LLP | Barristers and Solicitors

Barristers and solicitors.

Parente Borean LLP

https://www.parenteborean.com

Parente Borean LLP | Barristers and Solicitors

Barristers and solicitors.

Parente Borean LLP

https://www.parenteborean.com

Parente Borean LLP | Barristers and Solicitors

Barristers and solicitors.

Parente Borean LLP

https://www.parenteborean.com

Parente Borean LLP | Barristers and Solicitors

Barristers and solicitors.

Parente Borean LLP

https://www.parenteborean.com

Parente Borean LLP | Barristers and Solicitors

Barristers and solicitors.

Parente Borean LLP

https://www.parenteborean.com

Parente Borean LLP | Barristers and Solicitors

Barristers and solicitors.

Parente Borean LLP

https://www.parenteborean.com

Parente Borean LLP | Barristers and Solicitors

Barristers and solicitors.

Parente Borean LLP

https://www.parenteborean.com

Parente Borean LLP | Barristers and Solicitors

Barristers and solicitors.

Parente Borean LLP

https://www.parenteborean.com

Parente Borean LLP | Barristers and Solicitors

Barristers and solicitors.

Numbers

Please send us the number of the card you like best. Square and circle are both here.

Square

White

1 White

Navy

2 Navy

Logo Blue

3 Logo Blue

Slate Grey

4 Slate Grey

Black

5 Black

Circle

White

6 White

Navy

7 Navy

Logo Blue

8 Logo Blue

Slate Grey

9 Slate Grey

Black

10 Black

Button

Please look through these buttons. Each color is shown with square, soft, and round corners. When you rest on a button, you can see its hover. Please send us the number of the one you like best.

CTA and contrast

Each color is shown with the same three corners. Square corners are 0, soft corners are 8px, and round corners are 30px. Please send us the number you like best.

White on Logo Blue

The label is White. The button is Logo Blue. 8.8 to 1.

Contact the firm11 Square Contact the firm12 Soft Contact the firm13 Round

White on Navy

The label is White. The button is Navy. 15.5 to 1.

Contact the firm14 Square Contact the firm15 Soft Contact the firm16 Round

Navy on White

The label is Navy. The button is White, with a Navy edge. 15.5 to 1.

Contact the firm17 Square Contact the firm18 Soft Contact the firm19 Round

Logo Blue on White

The label is Logo Blue. The button is White, with a Logo Blue edge. 8.8 to 1.

Contact the firm20 Square Contact the firm21 Soft Contact the firm22 Round

Color system

The card below is the color system on the website today. A red border marks a color that is off the logo, and the note under it says what is wrong. Each Ideal row keeps the right colors and replaces the wrong one.

Current website

These are the colors on the website now.

Primary — Colors in the logo

These three colors are in the logo. They are the primary colors.

Logo Blue#1B459C

Logo Silver#BCC5CB

Slate Grey#818586

Neutral — Text and backgrounds

Current website

White#FFFFFF

Soft Grey#F6F6F6

Line Grey#E6E6E6

Body Text#333333Body copy uses this grey. It sits between Slate Grey and Black. Body copy should be Black #111111.

Muted Text#555555The footer uses this grey. It is another grey in that gap. Quiet text should be Slate Grey #818586.

Ideal

White#FFFFFF

Soft Grey#F6F6F6

Line Grey#E6E6E6

Black#111111

Slate Grey#818586

Website — Navy and blue

Navy and Kicker are shades of Logo Blue. Blue and Steel are not.

Current website

Navy#002157

Blue#23508BLinks and buttons use this second mid-blue. It sits beside Logo Blue at the same strength. Those should be Logo Blue #1B459C.

Steel#6E85A6Titles, bylines, and disclaimers use this extra blue-grey. That text should be Slate Grey #818586.

Kicker#C5D2E4

Ideal

Navy#002157

Logo Blue#1B459C

Slate Grey#818586

Kicker#C5D2E4

Contrast rules

Words have to stand clear of the color behind them. Each pair sits on its own row, with a heading and a longer note.

Use

These stay clear at body size and at heading size.

Parente BoreanBarristers and solicitors

Black on White

Body copy on the page is Black on White. The words stay clear in a paragraph and in a heading. This is the pair for the main reading text. The difference is 18.9 to 1.

TextBlack #111111

BackgroundWhite #FFFFFF

Parente BoreanBarristers and solicitors

Black on Soft Grey

An alternate section uses Soft Grey behind the same Black body copy. The words stay as clear as they do on white. Use this pair when a section changes ground and the text does not. The difference is 17.5 to 1.

TextBlack #111111

BackgroundSoft Grey #F6F6F6

Parente BoreanBarristers and solicitors

Navy on White

Headings on a white page are Navy. The heading stays clear at its larger size, and it would still be clear if the same words were body size. The difference is 15.5 to 1.

TextNavy #002157

BackgroundWhite #FFFFFF

Parente BoreanBarristers and solicitors

Logo Blue on White

Links on a white page are Logo Blue. The link stays clear inside a sentence of body copy, so it can sit in a paragraph without dropping out. The difference is 8.8 to 1.

TextLogo Blue #1B459C

BackgroundWhite #FFFFFF

Parente BoreanBarristers and solicitors

White on Navy

A navy band, such as the hero, carries White headings. The words stay clear against that dark ground at heading size and at body size. The difference is 15.5 to 1.

TextWhite #FFFFFF

BackgroundNavy #002157

Parente BoreanBarristers and solicitors

White on Logo Blue

A button filled with Logo Blue carries a White label. The label stays clear at the size of a button. The difference is 8.8 to 1.

TextWhite #FFFFFF

BackgroundLogo Blue #1B459C

BarristersThe small line above a heading

Kicker on Navy

The small line above a heading is Kicker on Navy. It stays clear even at that small size. Kicker belongs on this dark ground. The difference is 10.1 to 1.

TextKicker #C5D2E4

BackgroundNavy #002157

Parente BoreanBarristers and solicitors

Slate Grey on White

Slate Grey on White is clear as a large label. A paragraph or a small footer line in this pair is too light, so those stay Black. The difference is 3.7 to 1.

TextSlate Grey #818586

BackgroundWhite #FFFFFF

23 For large text

Parente BoreanBarristers and solicitors

White on Slate Grey

White on Slate Grey is clear for a few large reversed words. A sentence in this pair is too light. The difference is 3.7 to 1.

TextWhite #FFFFFF

BackgroundSlate Grey #818586

24 For large text

Type

Each size is shown on its own. Below that, an eyebrow, a heading, and a paragraph sit together. Each card uses a different pair from the color system. Each set has a number. Please send us the number you like best.

Type scale

The sample is one size inside the range, so each token looks different.

H1

48–64 px · 500–600

Parente Borean

H2

36–44 px · 500–600

Parente Borean

H3

28–32 px · 500–600

Parente Borean

H4

22–24 px · 500–600

Parente Borean

H5

18–20 px · 500–600

Parente Borean

H6

16–18 px · 600

Parente Borean

Lead paragraph

20–22 px · 400

Parente Borean

Body / Paragraph

16–18 px · 400

Parente Borean

Small text

14 px · 400

Parente Borean

Caption

12–13 px · 400

Parente Borean

Eyebrow

12–14 px · 600

Parente Borean

Eyebrow, heading, and paragraph

The eyebrow is 13 px, the heading is an H2 at 40 px, and the paragraph is 17 px. The colors change. Please send us the number you like best.

Business law

Counsel from the first call

A clear line of counsel for the matter at hand.

25 Logo Blue eyebrow, Navy heading, Black paragraph on White

Business law

Counsel from the first call

A clear line of counsel for the matter at hand.

26 Navy eyebrow, Logo Blue heading, Black paragraph on White

Business law

Counsel from the first call

A clear line of counsel for the matter at hand.

27 Navy eyebrow, Black heading and paragraph on Soft Grey

Business law

Counsel from the first call

A clear line of counsel for the matter at hand.

28 Kicker eyebrow, White heading and paragraph on Navy

Business law

Counsel from the first call

A clear line of counsel for the matter at hand.

29 White eyebrow, heading, and paragraph on Logo Blue

Gradients

Fifteen gradients, five in each group. Primary is for heroes and features. Multicolor is for a special campaign. Neutral is a quiet section background. Please send us the number you like best.

Primary gradient

Hero banners, feature sections, promotional visuals.

30 Navy to logo blue

Navy opening into logo blue. A hero banner.

31 Dark navy field

The darkest navy at the top, logo blue at the bottom. A feature section.

32 Logo blue spotlight

Logo blue glowing in the center. A promotional visual.

33 Lighter logo blue

Navy lifting into a lighter logo blue. A feature panel.

34 Blue catch

A logo blue catch through the navy. A promotional panel.

Multicolor gradient

Special campaigns or distinctive brand moments.

35 Emblem sweep

Navy, logo blue, slate, and silver in one sweep. A campaign banner.

36 Silver band

A silver band through the two blues. A distinctive moment.

37 Four corners

Each emblem color in a corner. A campaign backdrop.

38 Black to silver

Black through the blues into silver. A tall campaign panel.

39 Kicker crossing

Kicker and silver crossing the blues. A special announcement.

Neutral gradient

Subtle section backgrounds and depth.

40 Soft grey to white

Soft grey fading to white. An alternate section.

41 White to line grey

White settling into line grey. Depth at the foot of a section.

42 Center depth

White in the center, line grey at the edge. Depth behind a text block.

43 Kicker wash

A light kicker wash into white. A quiet feature band.

44 Pale silver

White into a pale silver. A card or quote ground.