What font does Ubie use?

Ubie’s website uses two typefaces: Apple Color Emoji (headings and body text), a system font; Nunito, self-hosted.

What are Ubie’s brand colours?

The main colours on ubiehealth.com are Deep Pink (#E34B83), Light Steel Blue (#9AAAE5), Royal Blue (#3959CC), Crimson (#C00C4B), Slate Blue (#3D4454) and Lavender (#CBD3F2).

What colour is Ubie’s text and background?

Body text is #6D727E on a #FFFFFF background.

Is this Ubie’s official style guide?

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

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

Unofficial style guide

Ubiestyle guide

Ubie’s website (ubiehealth.com) uses Apple Color Emoji for its headings and body text. Its palette is led by Deep Pink (#E34B83), Light Steel Blue (#9AAAE5) and Royal Blue (#3959CC), with #6D727E text on #FFFFFF. Captured from the live site on 1 November 2026.

Website: ubiehealth.com
Typefaces: Apple Color Emoji, SFMono-Regular, Nunito
Palette: 4 neutrals, 11 colours, 3 gradients
Captured: 1 Nov 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the ubiehealth.com homepage on a desktop screen — Screenshot of ubiehealth.com on a 1440 px desktop screen, 1 Nov 2026.

Screenshot of the ubiehealth.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: Ubie | Check Symptoms & Find Causes by AI; ● 41 / 60 characters
Meta description: Ubie Symptom Checker - Answer quiz about your symptoms to find out possible causes, types, severity, and treatment for free by AI. Developed by doctors; ● 151 / 160 characters
Site name: Ubie | Check Symptoms & Find Causes by AI
og:title: Ubie | Check Symptoms & Find Causes by AI
og:description: Ubie Symptom Checker - Answer quiz about your symptoms to find out possible causes, types, severity, and treatment for free by AI. Developed by doctors
Language: en

In search results

Ubie | Check Symptoms & Find Causes by AIhttps://ubiehealth.com/

Ubie | Check Symptoms & Find Causes by AI

Ubie Symptom Checker - Answer quiz about your symptoms to find out possible causes, types, severity, and treatment for free by AI. Developed by doctors

When shared

ubiehealth.com

Ubie | Check Symptoms & Find Causes by AI

Ubie Symptom Checker - Answer quiz about your symptoms to find out possible causes, types, severity, and trea…

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

8 found

512 px · PNG icon
192 px · PNG icon
60 px · PNG apple-touch-icon
57 px · PNG apple-touch-icon
48 px · PNG icon
48 px · ICO icon
32 px · PNG icon
16 px · PNG icon

Ubie | Check Symptoms & Find Causes by AI

Light browser tab

Ubie | Check Symptoms & Find Causes by AI

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

Colour

Balance

How much each colour is used

White 22.7%
Deep Pink 10.4%
Cool Light Grey 10.1%
Cool Grey 9%
Light Steel Blue 6.3%
Royal Blue 5.8%
Crimson 5.3%
Cool Off White 4.8%
Slate Blue 4.7%
Lavender 4.6%
Midnight Blue 4%
Pink 3.6%
Misty Rose 3%
Light Slate Blue 2.8%
Deep Slate Blue 2.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
4.82:1 AA

On white
—

Background, text, border · .bg-\[linear-gradient$white\,white$\,linear-gradient\(to_right\,rgb\(154\,170\, --tw-gradient-via
Cool Light Grey

HEX

RGB

HSL

OKLCH

CMYK
3 2 0 18

On text
3.04:1 AA large

On white
1.59:1 Fail

Text, background, border · .bg-black-200, .disabled\:bg-black-200:disabled
Cool Grey

HEX

RGB

HSL

OKLCH

CMYK
7 5 0 34

On text
1.84:1 Fail

On white
2.62:1 Fail

Text, background, border · .disabled\:bg-black-300:disabled, .text-black-300
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
4 3 0 1

On text
4.45:1 AA large

On white
1.08:1 Fail

Background · .bg-blue-100, --tw-gradient-from

Colours

Brand colours and accents, most used first

Deep Pink

HEX

RGB

HSL

OKLCH

CMYK
0 67 42 11

On text
1.28:1 Fail

On white
3.75:1 AA large

Background, border, text · .before\:bg-pink-500:before, .checked\:bg-pink-500:checked
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
33 26 0 10

On text
2.12:1 Fail

On white
2.27:1 Fail

Background, border, text · .bg-\[linear-gradient$to_right\,rgb\(251\,186\,210$\,rgb$154\,170\,229$\)\], .bg-\[linear-gradient$white\,white$\,linear-gradient\(to_right\,rgb\(154\,170\
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
72 56 0 20

On text
1.25:1 Fail

On white
6.04:1 AA

Text, background, border · .bg-blue-500, .text-blue-500
Crimson

HEX

RGB

HSL

OKLCH

CMYK
0 94 61 25

On text
1.28:1 Fail

On white
6.18:1 AA

Background, text, border · .bg-alert-500, .text-alert-500
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
27 19 0 67

On text
2.02:1 Fail

On white
9.75:1 AAA

Text, background · .bg-black-500, .\!text-black-500
Lavender

HEX

RGB

HSL

OKLCH

CMYK
16 13 0 5

On text
3.24:1 AA large

On white
1.49:1 Fail

Text, border · .text-blue-200, --tw-gradient-from
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
74 57 0 67

On text
3.08:1 AA large

On white
14.85:1 AAA

Background, text, border · .bg-blue-900, .text-blue-900
Pink

HEX

RGB

HSL

OKLCH

CMYK
0 26 16 2

On text
3.00:1 AA large

On white
1.61:1 Fail

Background · .bg-\[linear-gradient$to_right\,rgb\(251\,186\,210$\,rgb$154\,170\,229$\)\], .bg-\[linear-gradient$white\,white$\,linear-gradient\(to_right\,rgb\(154\,170\
Misty Rose

HEX

RGB

HSL

OKLCH

CMYK
0 14 9 1

On text
3.72:1 AA large

On white
1.29:1 Fail

Background · .bg-\[\#FDD9E5\], --tw-gradient-to
Light Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
73 57 0 29

On text
1.51:1 Fail

On white
7.27:1 AAA

Text, border, background · .text-blue-600, .border-blue-600
Deep Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
74 57 0 54

On text
2.46:1 Fail

On white
11.88:1 AAA

Text, border, background · .text-blue-800, .border-blue-800

Gradients

linear-gradient(initial)
linear-gradient(90deg,#fbbad2,#9aaae5)
linear-gradient(#fff,#fff),linear-gradient(90deg,#9aaae5,#fbbad2)

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.

Apple Color Emoji

Aa 400

Apple Color Emoji

System font, or not loaded on this page · 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

Aa 200 Aa 1000

Nunito

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

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

Type scale

From the site’s CSS

Small 80%

Ubie Symptom Checker - Answer quiz about your symptoms to find out possible causes, types, severity, and treatment for free by AI. Develope…

Sizes in use

Most common across the site

32px1 rules
24px1 rules
20px1 rules
18px1 rules
16px2 rules
14px1 rules
13px1 rules
12px1 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

9999px · 2×
4px · 1×
8px · 1×
7px · 1×
12px · 1×
16px · 1×

Shadows

0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000

Layout

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

Grid

Breakpoints

400

640

768

1024

1280

1536

On a scale of 0 to 1536 px.

Content widths (max-width)

1536 px

1280 px

1024 px

768 px

640 px

300 px

Notes

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

Notes

● FineThe title is 41 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 Ubie use?: Ubie’s website uses two typefaces: Apple Color Emoji (headings and body text), a system font; Nunito, self-hosted.
What are Ubie’s brand colours?: The main colours on ubiehealth.com are Deep Pink (#E34B83), Light Steel Blue (#9AAAE5), Royal Blue (#3959CC), Crimson (#C00C4B), Slate Blue (#3D4454) and Lavender (#CBD3F2).
What colour is Ubie’s text and background?: Body text is #6D727E on a #FFFFFF background.
Is this Ubie’s official style guide?: No. SiteStyleGuide made it from ubiehealth.com’s public web pages on 1 November 2026, and isn’t affiliated with Ubie. 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

ubiehealth-com-tokens.css

Download

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

/* ubiehealth.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/ubiehealth.com) */
:root {
  /* Colours */
  --text: #6D727E;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-cool-light-grey: #CCCDD2;
  --colour-cool-grey: #9CA0A8;
  --colour-cool-off-white: #F2F6FD;
  --colour-deep-pink: #E34B83;
  --colour-light-steel-blue: #9AAAE5;
  --colour-royal-blue: #3959CC;
  --colour-crimson: #C00C4B;
  --colour-slate-blue: #3D4454;
  --colour-lavender: #CBD3F2;
  --colour-midnight-blue: #162454;
  --colour-pink: #FBBAD2;
  --colour-misty-rose: #FDD9E5;
  --colour-light-slate-blue: #314EB5;
  --colour-deep-slate-blue: #1E3275;
  --gradient-1: linear-gradient(initial);
  --gradient-2: linear-gradient(90deg,#fbbad2,#9aaae5);
  --gradient-3: linear-gradient(#fff,#fff),linear-gradient(90deg,#9aaae5,#fbbad2);

  /* Typefaces */
  --font-body: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-other: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono';

  /* Type scale */
  --text-small: 80%;

  /* Shape */
  --radius-1: 9999px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 7px;
  --radius-5: 12px;
  --radius-6: 16px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 400px;
  --breakpoint-2: 640px;
  --breakpoint-3: 768px;
  --breakpoint-4: 1024px;
  --breakpoint-5: 1280px;
  --breakpoint-6: 1536px;
  --max-width-1: 1536px;
  --max-width-2: 1280px;
  --max-width-3: 1024px;
  --max-width-4: 768px;
  --max-width-5: 640px;
  --max-width-6: 300px;
}

{
    "site": "ubiehealth.com",
    "source": "https://sitestyleguide.com/ubiehealth.com",
    "text": "#6D727E",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Cool Light Grey",
            "hex": "#CCCDD2",
            "rgb": [
                204,
                205,
                210
            ]
        },
        {
            "name": "Cool Grey",
            "hex": "#9CA0A8",
            "rgb": [
                156,
                160,
                168
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#F2F6FD",
            "rgb": [
                242,
                246,
                253
            ]
        },
        {
            "name": "Deep Pink",
            "hex": "#E34B83",
            "rgb": [
                227,
                75,
                131
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#9AAAE5",
            "rgb": [
                154,
                170,
                229
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#3959CC",
            "rgb": [
                57,
                89,
                204
            ]
        },
        {
            "name": "Crimson",
            "hex": "#C00C4B",
            "rgb": [
                192,
                12,
                75
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#3D4454",
            "rgb": [
                61,
                68,
                84
            ]
        },
        {
            "name": "Lavender",
            "hex": "#CBD3F2",
            "rgb": [
                203,
                211,
                242
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#162454",
            "rgb": [
                22,
                36,
                84
            ]
        },
        {
            "name": "Pink",
            "hex": "#FBBAD2",
            "rgb": [
                251,
                186,
                210
            ]
        },
        {
            "name": "Misty Rose",
            "hex": "#FDD9E5",
            "rgb": [
                253,
                217,
                229
            ]
        },
        {
            "name": "Light Slate Blue",
            "hex": "#314EB5",
            "rgb": [
                49,
                78,
                181
            ]
        },
        {
            "name": "Deep Slate Blue",
            "hex": "#1E3275",
            "rgb": [
                30,
                50,
                117
            ]
        }
    ],
    "fonts": [
        {
            "name": "Apple Color Emoji",
            "stack": "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
            "weights": [],
            "source": "System font, or not loaded on this page"
        },
        {
            "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"
        },
        {
            "name": "Nunito",
            "stack": "Nunito, Nunito Fallback",
            "weights": [
                200,
                1000
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Apple Color Emoji as their main typeface

SeatSheet

seatsheet.com · set in Apple Color Emoji
Save1
エキサイトブログ

exblog.jp · set in Apple Color Emoji
Save
Node.js

nodejs.org · set in Apple Color Emoji
Save
FreshBooks

freshbooks.com · set in Apple Color Emoji
Save

Websites whose lead colour is closest to Ubie’s

KapanLagi.com

kapanlagi.com · 5 days ago
Save
Us

usmagazine.com · 4 days ago
Save
Visual (Archives) Society

visualsociety.ch · 3 days ago
Save
So-net(ソネット)

so-net.ne.jp · 2 days ago
Save

Captured from ubiehealth.com on 1 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by Ubie; this guide describes the public website for reference.

Ubiestyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Cool Light Grey

Cool Grey

Cool Off White

Colours

Deep Pink

Light Steel Blue

Royal Blue

Crimson

Slate Blue

Lavender

Midnight Blue

Pink

Misty Rose

Light Slate Blue

Deep Slate Blue

Gradients

Apple Color Emoji

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run ubiehealth.com?

Also set in Apple Color Emoji

SeatSheet

エキサイトブログ

Node.js

FreshBooks

Similar colours

KapanLagi.com

Us

Visual (Archives) Society

So-net(ソネット)

Title &
description