What font does Oath Biome use?

Oath Biome’s website uses two typefaces: FK Roman Standard Trial (headings and body text), self-hosted; ABCDiatype Trial, self-hosted.

What are Oath Biome’s brand colours?

The main colours on oathbiome.com are Black (#301912), Yellow (#FBFF36), Dark Golden Rod (#AB8C52), Maroon (#721C24), Dark Slate Grey (#103228) and Misty Rose (#F8D7DA).

What colour is Oath Biome’s text and background?

Body text is #301912 on a #FFFFFF background.

Where is Oath Biome’s logo from?

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

Is this Oath Biome’s official style guide?

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

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

Unofficial style guide

Oath Biomestyle guide

Oath Biome’s website (oathbiome.com) uses FK Roman Standard Trial for its headings and body text. Its palette is led by Black (#301912), Yellow (#FBFF36) and Dark Golden Rod (#AB8C52), with #301912 text on #FFFFFF. Captured from the live site on 23 October 2026.

Website: oathbiome.com
Typefaces: FK Roman Standard Trial, ABCDiatype Trial
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 23 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the oathbiome.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: Oath Biome; ● 10 / 60 characters
Meta description: Missing; ▲ 0 / 160 characters
Site name: Oath Biome
og:title: Oath Biome
og:description: Oath Biome
Language: en

In search results

Oath Biomehttps://www.oathbiome.com/

Oath Biome

When shared

oathbiome.com

Oath Biome

Logo & favicons

Found as: schema.org logo. PNG, 160 × 170.

Logo

On white

On black

On Black

Favicons

1 found

32 px · PNG icon

Oath Biome

Light browser tab

Oath Biome

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 (#301912) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 42.7%
Black 20.6%
Black 9.8%
Warm Off White 7%
Yellow 4.1%
Dark Golden Rod 3.7%
Warm Dark Grey 3.5%
Maroon 1.2%
Dark Slate Grey 1.2%
Misty Rose 1.1%
Wheat 1.1%
Saddle Brown 1%
Fire Brick 1%
Dark Olive Green 0.8%
Dark Grey 0.7%
Pink 0.5%

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

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
16.49:1 AAA

On white
—

Background, text, border · body, --COLOR-BG
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.27:1 Fail

On white
21.00:1 AAA

Text, background, graphic · --COLOR-TEXT-DARK, --OVERLAY-BG
Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 1 4 4

On text
14.76:1 AAA

On white
1.12:1 Fail

Background, text, border · --COLOR-BG-ACCENT, .btn-size-chart
Warm Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 15 19 57

On text
2.68:1 Fail

On white
6.16:1 AA

Text, border, background · --COLOR-TEXT-LIGHT, .link--disable a:after

Colours

Brand colours and accents, most used first

Black

HEX

RGB

HSL

OKLCH

CMYK
0 48 63 81

On text
—

On white
16.49:1 AAA

Text, background, border · body, --COLOR-TEXT
Yellow

HEX

RGB

HSL

OKLCH

CMYK
2 0 79 0

On text
15.28:1 AAA

On white
1.08:1 Fail

Background, text, graphic · --BTN-PRIMARY-BG, --BTN-PRIMARY-BG-BRIGHTER
Dark Golden Rod

HEX

RGB

HSL

OKLCH

CMYK
0 18 52 33

On text
5.19:1 AA

On white
3.18:1 AA large

Text, background, border · --COLOR-ACCENT, .quick-add__button .btn__plus
Maroon

HEX

RGB

HSL

OKLCH

CMYK
0 75 68 55

On text
1.50:1 Fail

On white
11.01:1 AAA

Text · .btn__error, input.input-error
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
68 0 20 80

On text
1.18:1 Fail

On white
13.92:1 AAA

Background, text · .btn.btn-icon.btn-green span, .btn.btn-icon.btn-see-more span
Misty Rose

HEX

RGB

HSL

OKLCH

CMYK
0 13 12 3

On text
12.35:1 AAA

On white
1.34:1 Fail

Background · .btn__error, input.input-error
Wheat

HEX

RGB

HSL

OKLCH

CMYK
0 9 25 9

On text
11.35:1 AAA

On white
1.45:1 Fail

Used · --COLOR-ACCENT-LIGHT, --wheat
Saddle Brown

HEX

RGB

HSL

OKLCH

CMYK
0 22 63 50

On text
2.97:1 Fail

On white
5.55:1 AA

Text · --COLOR-ACCENT-HOVER, .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption .pswp__caption
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 100 18

On text
2.94:1 Fail

On white
5.61:1 AA

Text, background · .swatch__button.sale:before, .sale .new-price
Dark Olive Green

HEX

RGB

HSL

OKLCH

CMYK
22 0 17 57

On text
2.97:1 Fail

On white
5.56:1 AA

Background · .tcgm-env__link.btn.btn-icon.btn-gray-blur span, .tcgm-env__link.btn.btn-icon.btn-gray-blur:after
Dark Grey

HEX

RGB

HSL

OKLCH

CMYK
0 10 21 36

On text
5.48:1 AA

On white
3.01:1 AA large

Background, text · --color-dark-gray, .neutral-6
Pink

HEX

RGB

HSL

OKLCH

CMYK
0 19 17 4

On text
10.85:1 AAA

On white
1.52:1 Fail

Border · --COLOR-ERROR-BORDER, input[type=text].error

Gradients

linear-gradient(to right,currentcolor,currentcolor)
linear-gradient(to bottom,transparent,#ffffff)
linear-gradient(to bottom,rgb(255, 255, 255 0%) 0%,#ffffff 100%)

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.

FK Roman Standard Trial

Aa 300 Aa 700

FK Roman Standard Trial

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

Aa 400 Aa 700

ABCDiatype Trial

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

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

Type scale

From the site’s CSS · root 20 px

Heading 1 64px / 100% weight 300 · none · FK Roman Standard Trial

Oath Biome

Heading 2 56px / 100% weight 300 · none · FK Roman Standard Trial

Oath Biome

Heading 3 40px / 100% weight 300 · none · FK Roman Standard Trial

Oath Biome

Heading 4 26px / 105% weight 300 · none · FK Roman Standard Trial

Oath Biome

Heading 5 18px / 125% weight 300 · none · FK Roman Standard Trial

Oath Biome

Heading 6 16px / 145% weight 300 · none · FK Roman Standard Trial

Oath Biome

Body 20px / 145% weight 400 · FK Roman Standard Trial

The quick brown fox jumps over the lazy dog.

Paragraph 100%

The quick brown fox jumps over the lazy dog.

Small 16px

The quick brown fox jumps over the lazy dog.

Button 100% / 1 none

Get started

Link 13px / 200% weight 400 · ABCDiatype Trial

Sizes in use

Most common across the site

56pxline 98% · 4 rules
40pxline 105% · 4 rules
26pxline 112% · 5 rules
20pxline 145% · 6 rules
18pxline 150% · 12 rules
16pxline 140% · 115 rules
15pxline 1.375 · 15 rules
14pxline 120% · 11 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

.btn.btn-icon span · #301912 · radius 100px

Link

Read our latest news today.

a · #301912

Corner radius

50% · 33×
5px · 7×
20px · 6×
15px · 6×
10px · 6×
4px · 5×

Shadows

0 0 0 2px #ffffff
0 2px 6px #0000000a,0 2px 2px #00000005
0 0 0 2px #ab8c52
0 0 0 4px #ab8c52

Layout

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

Grid

Breakpoints

479

480

749

750

900

989

990

1400

On a scale of 0 to 1440 px.

Content widths (max-width)

1400 px

1000 px

600 px

550 px

500 px

400 px

Notes

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

Notes

● FineThe title is 10 characters, short enough to show in full in search results.
▲ CheckThere is no meta description, so search engines will pick text from the page.
▲ CheckThe favicon is dark on a see-through background, so it nearly disappears on dark browser tabs.

Questions

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

Questions

What font does Oath Biome use?: Oath Biome’s website uses two typefaces: FK Roman Standard Trial (headings and body text), self-hosted; ABCDiatype Trial, self-hosted.
What are Oath Biome’s brand colours?: The main colours on oathbiome.com are Black (#301912), Yellow (#FBFF36), Dark Golden Rod (#AB8C52), Maroon (#721C24), Dark Slate Grey (#103228) and Misty Rose (#F8D7DA).
What colour is Oath Biome’s text and background?: Body text is #301912 on a #FFFFFF background.
Where is Oath Biome’s logo from?: The logo shown in this guide was found on oathbiome.com’s homepage. For official logo files and usage rules, check Oath Biome’s own brand or press page.
Is this Oath Biome’s official style guide?: No. SiteStyleGuide made it from oathbiome.com’s public web pages on 23 October 2026, and isn’t affiliated with Oath Biome. 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

oathbiome-com-tokens.css

Download

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

/* oathbiome.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/oathbiome.com) */
:root {
  /* Colours */
  --text: #301912;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-black: #000000;
  --colour-warm-off-white: #F5F2EC;
  --colour-warm-dark-grey: #6E5E59;
  --colour-black-2: #301912;
  --colour-yellow: #FBFF36;
  --colour-dark-golden-rod: #AB8C52;
  --colour-maroon: #721C24;
  --colour-dark-slate-grey: #103228;
  --colour-misty-rose: #F8D7DA;
  --colour-wheat: #E8D4AE;
  --colour-saddle-brown: #806430;
  --colour-fire-brick: #D20000;
  --colour-dark-olive-green: #566E5B;
  --colour-dark-grey: #A39280;
  --colour-pink: #F5C6CB;
  --gradient-1: linear-gradient(to right,currentcolor,currentcolor);
  --gradient-2: linear-gradient(to bottom,transparent,#ffffff);
  --gradient-3: linear-gradient(to bottom,rgb(255, 255, 255 0%) 0%,#ffffff 100%);

  /* Typefaces */
  --font-headings: 'FK Roman Standard Trial';
  --font-body: 'FK Roman Standard Trial';
  --font-buttons: 'FK Roman Standard Trial';

  /* Type scale */
  --text-h1: 64px;
  --leading-h1: 100%;
  --text-h2: 56px;
  --leading-h2: 100%;
  --text-h3: 40px;
  --leading-h3: 100%;
  --text-h4: 26px;
  --leading-h4: 105%;
  --text-h5: 18px;
  --leading-h5: 125%;
  --text-h6: 16px;
  --leading-h6: 145%;
  --text-body: 20px;
  --leading-body: 145%;
  --text-p: 100%;
  --text-small: 16px;
  --text-button: 100%;
  --leading-button: 1;
  --text-a: 13px;
  --leading-a: 200%;

  /* Shape */
  --radius-1: 50%;
  --radius-2: 5px;
  --radius-3: 20px;
  --radius-4: 15px;
  --radius-5: 10px;
  --radius-6: 4px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 479px;
  --breakpoint-2: 480px;
  --breakpoint-3: 749px;
  --breakpoint-4: 750px;
  --breakpoint-5: 900px;
  --breakpoint-6: 989px;
  --breakpoint-7: 990px;
  --breakpoint-8: 1400px;
  --max-width-1: 1400px;
  --max-width-2: 1000px;
  --max-width-3: 600px;
  --max-width-4: 550px;
  --max-width-5: 500px;
  --max-width-6: 400px;
}

{
    "site": "oathbiome.com",
    "source": "https://sitestyleguide.com/oathbiome.com",
    "text": "#301912",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Warm Off White",
            "hex": "#F5F2EC",
            "rgb": [
                245,
                242,
                236
            ]
        },
        {
            "name": "Warm Dark Grey",
            "hex": "#6E5E59",
            "rgb": [
                110,
                94,
                89
            ]
        },
        {
            "name": "Black",
            "hex": "#301912",
            "rgb": [
                48,
                25,
                18
            ]
        },
        {
            "name": "Yellow",
            "hex": "#FBFF36",
            "rgb": [
                251,
                255,
                54
            ]
        },
        {
            "name": "Dark Golden Rod",
            "hex": "#AB8C52",
            "rgb": [
                171,
                140,
                82
            ]
        },
        {
            "name": "Maroon",
            "hex": "#721C24",
            "rgb": [
                114,
                28,
                36
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#103228",
            "rgb": [
                16,
                50,
                40
            ]
        },
        {
            "name": "Misty Rose",
            "hex": "#F8D7DA",
            "rgb": [
                248,
                215,
                218
            ]
        },
        {
            "name": "Wheat",
            "hex": "#E8D4AE",
            "rgb": [
                232,
                212,
                174
            ]
        },
        {
            "name": "Saddle Brown",
            "hex": "#806430",
            "rgb": [
                128,
                100,
                48
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#D20000",
            "rgb": [
                210,
                0,
                0
            ]
        },
        {
            "name": "Dark Olive Green",
            "hex": "#566E5B",
            "rgb": [
                86,
                110,
                91
            ]
        },
        {
            "name": "Dark Grey",
            "hex": "#A39280",
            "rgb": [
                163,
                146,
                128
            ]
        },
        {
            "name": "Pink",
            "hex": "#F5C6CB",
            "rgb": [
                245,
                198,
                203
            ]
        }
    ],
    "fonts": [
        {
            "name": "FK Roman Standard Trial",
            "stack": "FK Roman Standard Trial",
            "weights": [
                300,
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "ABCDiatype Trial",
            "stack": "ABCDiatype Trial",
            "weights": [
                400,
                500,
                700
            ],
            "source": "Self-hosted"
        }
    ]
}

Websites whose lead colour is closest to Oath Biome’s

Fume

fume-studio.com · 3 days ago
Save
Maison Les Grands Chênes

maisonlesgrandschenes.com · 6 days ago
Save
Outbrain

outbrain.com · 3 days ago
Save
expedia

expedia.co.uk · 4 days ago
Save

Captured from oathbiome.com on 23 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Oath Biome; this guide describes the public website for reference.

Oath Biomestyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Black

Warm Off White

Warm Dark Grey

Colours

Black

Yellow

Dark Golden Rod

Maroon

Dark Slate Grey

Misty Rose

Wheat

Saddle Brown

Fire Brick

Dark Olive Green

Dark Grey

Pink

Gradients

FK Roman Standard Trial

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run oathbiome.com?

Similar colours

Fume

Maison Les Grands Chênes

Outbrain

expedia

Title &
description