What font does Cowboy use?

Cowboy’s website uses one typeface: SuisseIntl (headings and body text), served from cdn.shopify.com.

What are Cowboy’s brand colours?

The main colours on cowboy.com are Medium Sea Green (#569D5F), Burly Wood (#E3BF78), Antique White (#E8DEC8), Alice Blue (#DBEAFE), Red (#DA4331) and Dark Sea Green (#789B73).

What colour is Cowboy’s text and background?

Body text is #1D1D1D on a #FFFFFF background.

Where is Cowboy’s logo from?

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

Is this Cowboy’s official style guide?

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

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

Unofficial style guide

Cowboystyle guide

Cowboy’s website (cowboy.com) uses SuisseIntl for its headings and body text. Its palette is led by Medium Sea Green (#569D5F), Burly Wood (#E3BF78) and Antique White (#E8DEC8), with #1D1D1D text on #FFFFFF. Captured from the live site on 27 October 2026.

Website: cowboy.com
Typefaces: SuisseIntl, SFMono-Regular
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 27 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the cowboy.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: Cowboy - The Ultimate Connected E-Bikes; ● 39 / 60 characters
Meta description: Cowboy is the first connected, electric bike that offers urban riders freedom to take the streets. The fastest way to get around your city. And beat the c…; ● 155 / 160 characters
Site name: Cowboy
og:title: Cowboy - The Ultimate Connected E-Bikes
og:description: Cowboy is the first connected, electric bike that offers urban riders freedom to take the streets. The fastest way to get around your city. And beat the c…
Language: en-BE

In search results

Cowboyhttps://cowboy.com/

Cowboy - The Ultimate Connected E-Bikes

Cowboy is the first connected, electric bike that offers urban riders freedom to take the streets. The fastest way to get around your city. And beat the c…

When shared

cowboy.com

Cowboy - The Ultimate Connected E-Bikes

Cowboy is the first connected, electric bike that offers urban riders freedom to take the streets. The fastes…

Logo & favicons

Found as: SVG in the header. SVG, 159 × 25.

Logo

On white

On black

On Medium Sea Green

Favicons

1 found

40 px · SVG icon

Cowboy - The Ultimate Connected E-Bikes

Light browser tab

Cowboy - The Ultimate Connected E-Bikes

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

Colour

Balance

How much each colour is used

White 32.2%
Near Black 28.2%
Off White 12.1%
Grey 9.4%
Medium Sea Green 3.7%
Burly Wood 1.8%
Antique White 1.7%
Alice Blue 1.7%
Red 1.5%
Dark Sea Green 1.5%
Lavender 1.3%
Misty Rose 1.3%
Royal Blue 1%
Light Steel Blue 0.8%
Rosy Brown 0.8%
Light Pink 0.8%

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.86:1 AAA

On white
—

Text, background, border · #hubspotForm [type=submit], --tw-ring-offset-color
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 89

On text
—

On white
16.86:1 AAA

Background, text, border · #hubspotForm [type=submit], .context-title strong
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 2 8

On text
14.01:1 AAA

On white
1.20:1 Fail

Background, border · .bg-bright-gray, .bg-neutral-200
Grey

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 55

On text
3.56:1 AA large

On white
4.74:1 AA

Text, background, border · .bg-neutral-500, .blogpost blockquote.alt p:first-of-type

Colours

Brand colours and accents, most used first

Medium Sea Green

HEX

RGB

HSL

OKLCH

CMYK
45 0 39 38

On text
5.12:1 AA

On white
3.29:1 AA large

Background, text, border · .green-tick, .bg-green-success
Burly Wood

HEX

RGB

HSL

OKLCH

CMYK
0 16 47 11

On text
9.62:1 AAA

On white
1.75:1 Fail

Background, text, border · .bg-orange-warning, .text-orange-warning
Antique White

HEX

RGB

HSL

OKLCH

CMYK
0 4 14 9

On text
12.61:1 AAA

On white
1.34:1 Fail

Background · .bg-bike-sand, .bg-\[linear-gradient$-20deg\,\#EEE5D2_49\%\,\#fffaf4_101\.18\%$\]
Alice Blue

HEX

RGB

HSL

OKLCH

CMYK
14 8 0 0

On text
13.82:1 AAA

On white
1.22:1 Fail

Background · .bg-blue-100, .bg-\[linear-gradient$138\.49deg\,\#FFF8FB\,\#D8E7FB$\]
Red

HEX

RGB

HSL

OKLCH

CMYK
0 69 78 15

On text
3.88:1 AA large

On white
4.35:1 AA large

Background, text · .bg-red-error, .text-red-error
Dark Sea Green

HEX

RGB

HSL

OKLCH

CMYK
23 0 26 39

On text
5.41:1 AA

On white
3.12:1 AA large

Background · .bg-gray-green, .lg\:\!bg-gray-green
Lavender

HEX

RGB

HSL

OKLCH

CMYK
8 10 0 2

On text
13.25:1 AAA

On white
1.27:1 Fail

Background · .bg-bike-lavender, .bg-\[linear-gradient$-160deg\,rgb\(232\,230\,249$_33\%\,rgb$237\,236\,244$_
Misty Rose

HEX

RGB

HSL

OKLCH

CMYK
0 11 11 0

On text
13.80:1 AAA

On white
1.22:1 Fail

Background · .bg-red-100, .bg-\[linear-gradient$138\.83deg\,\#F9EBE3\,\#F9DDD9$\]
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
84 58 0 8

On text
3.26:1 AA large

On white
5.17:1 AA

Text, border · --tw-ring-color, input:where([type=checkbox])
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
17 8 0 7

On text
11.66:1 AAA

On white
1.45:1 Fail

Background · .bg-bike-breeze
Rosy Brown

HEX

RGB

HSL

OKLCH

CMYK
0 34 41 25

On text
5.19:1 AA

On white
3.25:1 AA large

Background · .bg-bike-clay
Light Pink

HEX

RGB

HSL

OKLCH

CMYK
0 23 24 12

On text
8.71:1 AAA

On white
1.94:1 Fail

Background · .bg-bike-dawn

Gradients

linear-gradient(to bottom,)
linear-gradient(to top,)
linear-gradient(184.45deg,#d2d0cc,#e7e6e5 66.22%)

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.

SuisseIntl

Aa 400 Aa 600

SuisseIntl

Served from cdn.shopify.com · weights 400, 500, 600 · body · shown in a stand-in if you don’t have it

Aa 400

SFMono-Regular

System font, or not loaded on this page · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Heading 2 min(max(2.25rem,5.05161vw),2.875rem) · 46 px / 1.05

Cowboy - The Ultimate Connected E-Bikes

Heading 3 min(max(1.5rem,4.71462vw),2.25rem) · 36 px / 1.05 weight 400

Cowboy - The Ultimate Connected E-Bikes

Heading 4 min(max(1.375rem,1.8vw),1.5rem) · 24 px / 1.05 weight 400

Cowboy - The Ultimate Connected E-Bikes

Body 1rem · 16 px / 1.5

Cowboy is the first connected, electric bike that offers urban riders freedom to take the streets. The fastest way to get around your city.…

Paragraph 18px / 1.25

Cowboy is the first connected, electric bike that offers urban riders freedom to take the streets. The fastest way to get around your city.…

Small 80%

Cowboy is the first connected, electric bike that offers urban riders freedom to take the streets. The fastest way to get around your city.…

Button 100% none

Get started

Sizes in use

Most common across the site

36pxline 1.05 · 4 rules
32pxline 24px · 4 rules
24pxline 1.25 · 5 rules
22pxline 1.375 · 5 rules
18pxline 1.75rem · 7 rules
16pxline 1.5rem · 13 rules
14pxline 1 · 5 rules
12pxline 1 · 6 rules

Elements

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

Elements

Corner radius

.5rem · 6×
9999px · 5×
.75rem · 2×
100% · 1×
.25rem · 1×
1rem · 1×

Shadows

0 0 transparent,0 0 transparent,0 0 transparent
0 0 #fff,0 0 0 1px #2563eb,0 0 transparent
0 0 #fff,0 0 transparent,0 0 transparent
0 0 #fff,0 0 0 4px #2563eb,0 0 transparent

Layout

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

Grid

Breakpoints

375

414

768

1023

1024

1366

1800

2560

On a scale of 0 to 2560 px.

Content widths (max-width)

1800 px

768 px

600 px

414 px

375 px

320 px

Notes

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

Notes

● FineThe title is 39 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 Cowboy use?: Cowboy’s website uses one typeface: SuisseIntl (headings and body text), served from cdn.shopify.com.
What are Cowboy’s brand colours?: The main colours on cowboy.com are Medium Sea Green (#569D5F), Burly Wood (#E3BF78), Antique White (#E8DEC8), Alice Blue (#DBEAFE), Red (#DA4331) and Dark Sea Green (#789B73).
What colour is Cowboy’s text and background?: Body text is #1D1D1D on a #FFFFFF background.
Where is Cowboy’s logo from?: The logo shown in this guide was found on cowboy.com’s homepage. For official logo files and usage rules, check Cowboy’s own brand or press page.
Is this Cowboy’s official style guide?: No. SiteStyleGuide made it from cowboy.com’s public web pages on 27 October 2026, and isn’t affiliated with Cowboy. 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

cowboy-com-tokens.css

Download

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

/* cowboy.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/cowboy.com) */
:root {
  /* Colours */
  --text: #1D1D1D;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #1D1D1D;
  --colour-off-white: #EBEAE7;
  --colour-grey: #737373;
  --colour-medium-sea-green: #569D5F;
  --colour-burly-wood: #E3BF78;
  --colour-antique-white: #E8DEC8;
  --colour-alice-blue: #DBEAFE;
  --colour-red: #DA4331;
  --colour-dark-sea-green: #789B73;
  --colour-lavender: #E6E1F9;
  --colour-misty-rose: #FEE2E2;
  --colour-royal-blue: #2563EB;
  --colour-light-steel-blue: #C5D9ED;
  --colour-rosy-brown: #C07E72;
  --colour-light-pink: #E1AEAC;
  --gradient-1: linear-gradient(to bottom,);
  --gradient-2: linear-gradient(to top,);
  --gradient-3: linear-gradient(184.45deg,#d2d0cc,#e7e6e5 66.22%);

  /* Typefaces */
  --font-body: 'SuisseIntl', sans-serif;
  --font-other: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono';

  /* Type scale */
  --text-h2: min(max(2.25rem,5.05161vw),2.875rem);
  --leading-h2: 1.05;
  --text-h3: min(max(1.5rem,4.71462vw),2.25rem);
  --leading-h3: 1.05;
  --text-h4: min(max(1.375rem,1.8vw),1.5rem);
  --leading-h4: 1.05;
  --text-body: 1rem;
  --leading-body: 1.5;
  --text-p: 18px;
  --leading-p: 1.25;
  --text-small: 80%;
  --text-button: 100%;

  /* Shape */
  --radius-1: .5rem;
  --radius-2: 9999px;
  --radius-3: .75rem;
  --radius-4: 100%;
  --radius-5: .25rem;
  --radius-6: 1rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 375px;
  --breakpoint-2: 414px;
  --breakpoint-3: 768px;
  --breakpoint-4: 1023px;
  --breakpoint-5: 1024px;
  --breakpoint-6: 1366px;
  --breakpoint-7: 1800px;
  --breakpoint-8: 2560px;
  --max-width-1: 1800px;
  --max-width-2: 768px;
  --max-width-3: 600px;
  --max-width-4: 414px;
  --max-width-5: 375px;
  --max-width-6: 320px;
}

{
    "site": "cowboy.com",
    "source": "https://sitestyleguide.com/cowboy.com",
    "text": "#1D1D1D",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#1D1D1D",
            "rgb": [
                29,
                29,
                29
            ]
        },
        {
            "name": "Off White",
            "hex": "#EBEAE7",
            "rgb": [
                235,
                234,
                231
            ]
        },
        {
            "name": "Grey",
            "hex": "#737373",
            "rgb": [
                115,
                115,
                115
            ]
        },
        {
            "name": "Medium Sea Green",
            "hex": "#569D5F",
            "rgb": [
                86,
                157,
                95
            ]
        },
        {
            "name": "Burly Wood",
            "hex": "#E3BF78",
            "rgb": [
                227,
                191,
                120
            ]
        },
        {
            "name": "Antique White",
            "hex": "#E8DEC8",
            "rgb": [
                232,
                222,
                200
            ]
        },
        {
            "name": "Alice Blue",
            "hex": "#DBEAFE",
            "rgb": [
                219,
                234,
                254
            ]
        },
        {
            "name": "Red",
            "hex": "#DA4331",
            "rgb": [
                218,
                67,
                49
            ]
        },
        {
            "name": "Dark Sea Green",
            "hex": "#789B73",
            "rgb": [
                120,
                155,
                115
            ]
        },
        {
            "name": "Lavender",
            "hex": "#E6E1F9",
            "rgb": [
                230,
                225,
                249
            ]
        },
        {
            "name": "Misty Rose",
            "hex": "#FEE2E2",
            "rgb": [
                254,
                226,
                226
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#2563EB",
            "rgb": [
                37,
                99,
                235
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#C5D9ED",
            "rgb": [
                197,
                217,
                237
            ]
        },
        {
            "name": "Rosy Brown",
            "hex": "#C07E72",
            "rgb": [
                192,
                126,
                114
            ]
        },
        {
            "name": "Light Pink",
            "hex": "#E1AEAC",
            "rgb": [
                225,
                174,
                172
            ]
        }
    ],
    "fonts": [
        {
            "name": "SuisseIntl",
            "stack": "SuisseIntl, sans-serif",
            "weights": [
                400,
                500,
                600
            ],
            "source": "Served from cdn.shopify.com"
        },
        {
            "name": "SFMono-Regular",
            "stack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
            "weights": [],
            "source": "System font, or not loaded on this page"
        }
    ]
}

Other websites using SuisseIntl as their main typeface

Atlas Motion Systems

atlasmotion.com · set in SuisseIntl
Save

Websites whose lead colour is closest to Cowboy’s

GoFundMe

youcaring.com · 1 day ago
Save
FotMob

fotmob.com · 4 days ago
Save
W3Schools

w3schools.com · 5 days ago
Save
360官网 -360安全中心

360.cn · 2 days ago
Save

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

Cowboystyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Off White

Grey

Colours

Medium Sea Green

Burly Wood

Antique White

Alice Blue

Red

Dark Sea Green

Lavender

Misty Rose

Royal Blue

Light Steel Blue

Rosy Brown

Light Pink

Gradients

SuisseIntl

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run cowboy.com?

Also set in SuisseIntl

Atlas Motion Systems

Similar colours

GoFundMe

FotMob

W3Schools

360官网 -360安全中心

Title &
description