What font does COLLINS use?

COLLINS’s website uses two typefaces: Graphik (headings and body text), self-hosted; Portrait Text, self-hosted.

What are COLLINS’s brand colours?

The main colours on wearecollins.com are Dark Orange (#FF7600), Blue (#0000FF), Orange Red (#FF4500), Off White (#F8F8F7), Black (#140700) and Warm Dark Grey (#5E5855).

What colour is COLLINS’s text and background?

Body text is #140700 on a #F8F8F7 background.

Where is COLLINS’s logo from?

The logo shown in this guide was found on wearecollins.com’s homepage. For official logo files and usage rules, check COLLINS’s own brand or press page.

Is this COLLINS’s official style guide?

No. SiteStyleGuide made it from wearecollins.com’s public web pages on 26 October 2026, and isn’t affiliated with COLLINS. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from wearecollins.com’s public web pages. Not affiliated with or endorsed by COLLINS. The real site is wearecollins.com ↗

Unofficial style guide

COLLINSstyle guide

COLLINS’s website (wearecollins.com) uses Graphik for its headings and body text. Its palette is led by Dark Orange (#FF7600), Blue (#0000FF) and Orange Red (#FF4500), with #140700 text on #F8F8F7. Captured from the live site on 26 October 2026.

Website: wearecollins.com
Typefaces: Graphik, Portrait Text
Palette: 4 neutrals, 3 colours, 1 gradient
Captured: 26 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the wearecollins.com homepage on a desktop screen — Screenshot of wearecollins.com on a 1440 px desktop screen, 26 Oct 2026.

Screenshot of the wearecollins.com homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: COLLINS; ● 7 / 60 characters
Meta description: Make your company as valuable as it is unignorable.; ● 51 / 160 characters
Site name: COLLINS
og:title: COLLINS
og:description: Make your company as valuable as it is unignorable.
Language: en
Theme colour: #f8f8f7

In search results

COLLINShttps://wearecollins.com/

COLLINS

Make your company as valuable as it is unignorable.

When shared

wearecollins.com

COLLINS

Make your company as valuable as it is unignorable.

Logo & favicons

Found as: SVG in the header. SVG, 93 × 15.

Logo

On white

On black

On Dark Orange

Favicons

6 found

512 px · PNG manifest
250 px · SVG icon
192 px · PNG manifest
180 px · PNG apple-touch-icon
96 px · PNG icon
48 px · ICO shortcut icon

COLLINS

Light browser tab

COLLINS

Dark browser tab

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#140700) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

Off White 47.1%
Black 36.4%
Warm Dark Grey 8.8%
Dark Grey 4.4%
Dark Orange 2%
Blue 0.9%
Orange Red 0.3%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 3

On text
18.64:1 AAA

On white
1.06:1 Fail

Background, text, theme · .button--translucent[data-v-e12a4fed], html
Black

HEX

RGB

HSL

OKLCH

CMYK
0 65 100 92

On text
—

On white
19.81:1 AAA

Text, background, border · html, .button[data-v-e12a4fed]
Warm Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 6 10 63

On text
2.83:1 Fail

On white
6.99:1 AA

Text, background · .input-field[data-v-768d5104], .links[data-v-f5a407d7]
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 70

On text
2.31:1 Fail

On white
8.59:1 AAA

Text · --color-grey-30, a[data-v-f5a407d7]:not(.button):has(~a:hover)

Colours

Brand colours and accents, most used first

Dark Orange

HEX

RGB

HSL

OKLCH

CMYK
0 54 100 0

On text
7.40:1 AAA

On white
2.68:1 Fail

Background · a[status=success][data-v-6eef3d5e], --color-brian-orange
Blue

HEX

RGB

HSL

OKLCH

CMYK
100 100 0 0

On text
2.31:1 Fail

On white
8.59:1 AAA

Background · ::-moz-selection, ::selection
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 73 100 0

On text
5.76:1 AA

On white
3.44:1 AA large

Background · inline style on <div>

Gradients

linear-gradient(180deg,rgba(0,0,0,.2),transparent 25.543%)

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Graphik

Aa 400 Aa 500

Graphik

Self-hosted · weights 400, 500 · body · shown in a stand-in if you don’t have it

Aa 400

Portrait Text

Self-hosted · weights 400 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 2rem · 32 px

COLLINS

Heading 2 1.5rem · 24 px

COLLINS

Heading 3 1.17rem · 19 px

COLLINS

Heading 4 1rem · 16 px

COLLINS

Heading 5 .83rem · 13 px

COLLINS

Heading 6 .67rem · 11 px

COLLINS

Paragraph 2.5rem · 40 px / 1.3

Make your company as valuable as it is unignorable.

Sizes in use

Most common across the site

32px2 rules
24px3 rules
19px4 rules
18px4 rules
16px11 rules
14px1 rules
13px1 rules
11px2 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Button

Get started

a[data-v-6eef3d5e] · #140700 · radius 6rem

Corner radius

inherit · 22×
1rem · 15×
6rem · 6×
10rem · 6×
.3rem · 4×
4px · 3×

Shadows

0px 21px 13px 0px rgba(0,0,0,.06),0px 9px 9px 0px rgba(0,0,0,.1),0px 2px 5px 0px rgba(0,0,0,.11)
0 12px 31px #0000001f

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Content widths (max-width)

600 px

500 px

448 px

300 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 7 characters, short enough to show in full in search results.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does COLLINS use?: COLLINS’s website uses two typefaces: Graphik (headings and body text), self-hosted; Portrait Text, self-hosted.
What are COLLINS’s brand colours?: The main colours on wearecollins.com are Dark Orange (#FF7600), Blue (#0000FF), Orange Red (#FF4500), Off White (#F8F8F7), Black (#140700) and Warm Dark Grey (#5E5855).
What colour is COLLINS’s text and background?: Body text is #140700 on a #F8F8F7 background.
Where is COLLINS’s logo from?: The logo shown in this guide was found on wearecollins.com’s homepage. For official logo files and usage rules, check COLLINS’s own brand or press page.
Is this COLLINS’s official style guide?: No. SiteStyleGuide made it from wearecollins.com’s public web pages on 26 October 2026, and isn’t affiliated with COLLINS. Members can refresh a guide after 90 days to pick up changes.

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

wearecollins-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* wearecollins.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/wearecollins.com) */
:root {
  /* Colours */
  --text: #140700;
  --background: #F8F8F7;
  --colour-off-white: #F8F8F7;
  --colour-black: #140700;
  --colour-warm-dark-grey: #5E5855;
  --colour-dark-grey: #4C4C4C;
  --colour-dark-orange: #FF7600;
  --colour-blue: #0000FF;
  --colour-orange-red: #FF4500;
  --gradient-1: linear-gradient(180deg,rgba(0,0,0,.2),transparent 25.543%);

  /* Typefaces */
  --font-body: 'Graphik', 'sans-serif sans-serif';
  --font-other: 'Portrait Text', serif;

  /* Type scale */
  --text-h1: 2rem;
  --text-h2: 1.5rem;
  --text-h3: 1.17rem;
  --text-h4: 1rem;
  --text-h5: .83rem;
  --text-h6: .67rem;
  --text-p: 2.5rem;
  --leading-p: 1.3;

  /* Shape */
  --radius-1: inherit;
  --radius-2: 1rem;
  --radius-3: 6rem;
  --radius-4: 10rem;
  --radius-5: .3rem;
  --radius-6: 4px;
}

{
    "site": "wearecollins.com",
    "source": "https://sitestyleguide.com/wearecollins.com",
    "text": "#140700",
    "background": "#F8F8F7",
    "colours": [
        {
            "name": "Off White",
            "hex": "#F8F8F7",
            "rgb": [
                248,
                248,
                247
            ]
        },
        {
            "name": "Black",
            "hex": "#140700",
            "rgb": [
                20,
                7,
                0
            ]
        },
        {
            "name": "Warm Dark Grey",
            "hex": "#5E5855",
            "rgb": [
                94,
                88,
                85
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#4C4C4C",
            "rgb": [
                76,
                76,
                76
            ]
        },
        {
            "name": "Dark Orange",
            "hex": "#FF7600",
            "rgb": [
                255,
                118,
                0
            ]
        },
        {
            "name": "Blue",
            "hex": "#0000FF",
            "rgb": [
                0,
                0,
                255
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF4500",
            "rgb": [
                255,
                69,
                0
            ]
        }
    ],
    "fonts": [
        {
            "name": "Graphik",
            "stack": "\"Graphik\", sans-serif sans-serif",
            "weights": [
                400,
                500
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Portrait Text",
            "stack": "\"Portrait Text\", serif",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Graphik as their main typeface

Free Podcast Hosting

buzzsprout.com · set in Graphik
Save
TNW

thenextweb.com · set in Graphik
Save
Lavazza

lavazza.com · set in Graphik
Save
TIME

time.com · set in Graphik
Save

Websites whose lead colour is closest to COLLINS’s

ADSCHEMIST

adschemist.com · 6 days ago
Save
Resurf

resurf.so · 2 days ago
Save
overcast.fm

overcast.fm · 2 days ago
Save
ICICI Bank

icicibank.com · 4 days ago
Save

Captured from wearecollins.com on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by COLLINS; this guide describes the public website for reference.

COLLINSstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Off White

Black

Warm Dark Grey

Dark Grey

Colours

Dark Orange

Blue

Orange Red

Gradients

Graphik

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run wearecollins.com?

Also set in Graphik

Free Podcast Hosting

TNW

Lavazza

TIME

Similar colours

ADSCHEMIST

Resurf

overcast.fm

ICICI Bank

Title &
description