What font does ARH Digital use?

ARH Digital’s website uses four typefaces: DM Sans (body text), google Fonts; Space Grotesk (headings), google Fonts; Tajawal, google Fonts; Hind, google Fonts.

What are ARH Digital’s brand colours?

The main colours on arhdesign.tech are Black (#111827), Coral (#FF6B35), Gold (#FFD84D), Royal Blue (#2457FF), Slate Grey (#667085) and Lavender (#DBE4FF).

What colour is ARH Digital’s text and background?

Body text is #111827 on a #FFFAF0 background.

Is this ARH Digital’s official style guide?

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

ARH Digital Style Guide: Colours, Fonts & Logo

Identity & metadata

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

Title &
description

Page title: Web Design in Jeddah | ARH Digital; ● 34 / 60 characters
Meta description: ARH Digital creates bold, fast, conversion-focused websites for local businesses in Jeddah and beyond.; ● 102 / 160 characters
Site name: ARH Digital
og:title: Web Design in Jeddah | ARH Digital
og:description: ARH Digital creates bold, fast, conversion-focused websites for local businesses in Jeddah and beyond.
Language: en

In search results

ARH Digitalhttps://arhdesign.tech/

Web Design in Jeddah | ARH Digital

ARH Digital creates bold, fast, conversion-focused websites for local businesses in Jeddah and beyond.

When shared

arhdesign.tech

Web Design in Jeddah | ARH Digital

ARH Digital creates bold, fast, conversion-focused websites for local businesses in Jeddah and beyond.

Back to top ↑

Logo & favicons

No logo could be found on the homepage.

Logo

Favicons

1 found

64 px · SVG icon

Web Design in Jeddah | ARH Digital

Light browser tab

Web Design in Jeddah | ARH Digital

Dark browser tab

Back to top ↑

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

Colour

Balance

How much each colour is used

Black 31.9%
Coral 14.8%
Gold 14.2%
Light Warm Off White 13.1%
White 9.3%
Royal Blue 4.2%
Deep Warm Off White 3.8%
Slate Grey 3.8%
Lavender 1.8%
Pale Violet Red 1.2%
Aqua Marine 1.2%
Cool Near Black 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

Light Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 2 6 0

On text
17.05:1 AAA

On white
1.04:1 Fail

Background, text · body, .btn
White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
17.74:1 AAA

On white
—

Text, background · .plan.pop .btn, .kicker
Deep Warm Off White

HEX

RGB

HSL

OKLCH

CMYK
0 1 5 13

On text
12.81:1 AAA

On white
1.38:1 Fail

Border, background · header, .section-break
Cool Near Black

HEX

RGB

HSL

OKLCH

CMYK
23 19 0 90

On text
1.03:1 Fail

On white
18.23:1 AAA

Used · --cream

Colours

Brand colours and accents, most used first

Black

HEX

RGB

HSL

OKLCH

CMYK
56 38 0 85

On text
—

On white
17.74:1 AAA

Text, border, background · .btn, .hero-signal span
Coral

HEX

RGB

HSL

OKLCH

CMYK
0 58 79 0

On text
6.26:1 AA

On white
2.84:1 Fail

Text, background, border · .cta-box, h1 span
Gold

HEX

RGB

HSL

OKLCH

CMYK
0 15 70 0

On text
12.82:1 AAA

On white
1.38:1 Fail

Background, text · .hero-stamp, .project:nth-child(2) h3 em
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
86 66 0 0

On text
3.28:1 AA large

On white
5.41:1 AA

Background · .art-back, .project:nth-child(2)
Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
23 16 0 48

On text
3.57:1 AA large

On white
4.97:1 AA

Text · .hero p, .blog-card p
Lavender

HEX

RGB

HSL

OKLCH

CMYK
14 11 0 0

On text
13.98:1 AAA

On white
1.27:1 Fail

Text · .process .lead, .step p
Pale Violet Red

HEX

RGB

HSL

OKLCH

CMYK
0 64 46 0

On text
6.04:1 AA

On white
2.94:1 Fail

Background · .insta-link, --pink
Aqua Marine

HEX

RGB

HSL

OKLCH

CMYK
30 0 13 6

On text
13.43:1 AAA

On white
1.32:1 Fail

Background · .service:nth-child(4), --green

Back to top ↑

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.

Space Grotesk

Aa 400 Aa 700

DM Sans

Google Fonts · weights 400, 500, 600, 700 · body

Aa 400 Aa 800

Space Grotesk

Google Fonts · weights 400, 500, 600, 700, 800 · headings

Aa 400 Aa 800

Tajawal

Google Fonts · weights 400, 500, 700, 800 · buttons

Aa 400 Aa 700

Hind

Google Fonts · weights 400, 500, 600, 700 · buttons

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

Type scale

From the site’s CSS

Heading 1 clamp(58px,8vw,120px) · 120 px / .87 Space Grotesk

ARH Digital

Heading 2 clamp(42px,5.5vw,78px) · 78 px / .94 Space Grotesk

Web Design in Jeddah | ARH Digital

Heading 3 32px / .9 Space Grotesk

Web Design in Jeddah | ARH Digital

Body — DM Sans

ARH Digital creates bold, fast, conversion-focused websites for local businesses in Jeddah and beyond.

Paragraph 14px / 1.6

ARH Digital creates bold, fast, conversion-focused websites for local businesses in Jeddah and beyond.

Small 15px weight 800

ARH Digital creates bold, fast, conversion-focused websites for local businesses in Jeddah and beyond.

Button — weight 800 · Hind

Get started

Link —

Sizes in use

Most common across the site

120pxline .87 · 1 rules
48px1 rules
32px2 rules
15px2 rules
14pxline 1.5 · 4 rules
13px2 rules
12px3 rules
11px2 rules

Back to top ↑

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 · #111827 · radius 999px

Corner radius

50% · 11×
999px · 9×
18px · 9×
20px · 3×
28px · 2×
16px · 2×

Shadows

7px 8px 0 #111827
4px 5px 0 #111827
8px 9px 0 #111827
5px 6px 0 #111827

Back to top ↑

Layout

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

Grid

Breakpoints

500

600

900

1100

On a scale of 0 to 1440 px.

Content widths (max-width)

680 px

670 px

600 px

560 px

430 px

360 px

Back to top ↑

Notes

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

Notes

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

Back to top ↑

Questions

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

Questions

What font does ARH Digital use?: ARH Digital’s website uses four typefaces: DM Sans (body text), google Fonts; Space Grotesk (headings), google Fonts; Tajawal, google Fonts; Hind, google Fonts.
What are ARH Digital’s brand colours?: The main colours on arhdesign.tech are Black (#111827), Coral (#FF6B35), Gold (#FFD84D), Royal Blue (#2457FF), Slate Grey (#667085) and Lavender (#DBE4FF).
What colour is ARH Digital’s text and background?: Body text is #111827 on a #FFFAF0 background.
Is this ARH Digital’s official style guide?: No. SiteStyleGuide made it from arhdesign.tech’s public web pages on 23 October 2026, and isn’t affiliated with ARH Digital. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

arhdesign-tech-tokens.css

Download

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

/* arhdesign.tech design tokens, from SiteStyleGuide (https://sitestyleguide.com/arhdesign.tech) */
:root {
  /* Colours */
  --text: #111827;
  --background: #FFFAF0;
  --colour-light-warm-off-white: #FFFAF0;
  --colour-white: #FFFFFF;
  --colour-deep-warm-off-white: #DEDBD2;
  --colour-cool-near-black: #14151A;
  --colour-black: #111827;
  --colour-coral: #FF6B35;
  --colour-gold: #FFD84D;
  --colour-royal-blue: #2457FF;
  --colour-slate-grey: #667085;
  --colour-lavender: #DBE4FF;
  --colour-pale-violet-red: #FF5C8A;
  --colour-aqua-marine: #A7EFD0;

  /* Typefaces */
  --font-body: 'DM Sans', sans-serif;
  --font-headings: 'Space Grotesk', sans-serif;
  --font-buttons: 'Tajawal', sans-serif;

  /* Type scale */
  --text-h1: clamp(58px,8vw,120px);
  --leading-h1: .87;
  --text-h2: clamp(42px,5.5vw,78px);
  --leading-h2: .94;
  --text-h3: 32px;
  --leading-h3: .9;
  --text-p: 14px;
  --leading-p: 1.6;
  --text-small: 15px;

  /* Shape */
  --radius-1: 50%;
  --radius-2: 999px;
  --radius-3: 18px;
  --radius-4: 20px;
  --radius-5: 28px;
  --radius-6: 16px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 500px;
  --breakpoint-2: 600px;
  --breakpoint-3: 900px;
  --breakpoint-4: 1100px;
  --max-width-1: 680px;
  --max-width-2: 670px;
  --max-width-3: 600px;
  --max-width-4: 560px;
  --max-width-5: 430px;
  --max-width-6: 360px;
}

{
    "site": "arhdesign.tech",
    "source": "https://sitestyleguide.com/arhdesign.tech",
    "text": "#111827",
    "background": "#FFFAF0",
    "colours": [
        {
            "name": "Light Warm Off White",
            "hex": "#FFFAF0",
            "rgb": [
                255,
                250,
                240
            ]
        },
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Deep Warm Off White",
            "hex": "#DEDBD2",
            "rgb": [
                222,
                219,
                210
            ]
        },
        {
            "name": "Cool Near Black",
            "hex": "#14151A",
            "rgb": [
                20,
                21,
                26
            ]
        },
        {
            "name": "Black",
            "hex": "#111827",
            "rgb": [
                17,
                24,
                39
            ]
        },
        {
            "name": "Coral",
            "hex": "#FF6B35",
            "rgb": [
                255,
                107,
                53
            ]
        },
        {
            "name": "Gold",
            "hex": "#FFD84D",
            "rgb": [
                255,
                216,
                77
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#2457FF",
            "rgb": [
                36,
                87,
                255
            ]
        },
        {
            "name": "Slate Grey",
            "hex": "#667085",
            "rgb": [
                102,
                112,
                133
            ]
        },
        {
            "name": "Lavender",
            "hex": "#DBE4FF",
            "rgb": [
                219,
                228,
                255
            ]
        },
        {
            "name": "Pale Violet Red",
            "hex": "#FF5C8A",
            "rgb": [
                255,
                92,
                138
            ]
        },
        {
            "name": "Aqua Marine",
            "hex": "#A7EFD0",
            "rgb": [
                167,
                239,
                208
            ]
        }
    ],
    "fonts": [
        {
            "name": "DM Sans",
            "stack": "\"DM Sans\", sans-serif",
            "weights": [
                400,
                500,
                600,
                700
            ],
            "source": "Google Fonts"
        },
        {
            "name": "Space Grotesk",
            "stack": "\"Space Grotesk\", sans-serif",
            "weights": [
                400,
                500,
                600,
                700,
                800
            ],
            "source": "Google Fonts"
        },
        {
            "name": "Tajawal",
            "stack": "\"Tajawal\", sans-serif",
            "weights": [
                400,
                500,
                700,
                800
            ],
            "source": "Google Fonts"
        },
        {
            "name": "Hind",
            "stack": "\"Hind\", sans-serif",
            "weights": [
                400,
                500,
                600,
                700
            ],
            "source": "Google Fonts"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run arhdesign.tech?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/arhdesign.tech" title="ARH Digital style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

ARH Digitalstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

Light Warm Off White

White

Deep Warm Off White

Cool Near Black

Colours

Black

Coral

Gold

Royal Blue

Slate Grey

Lavender

Pale Violet Red

Aqua Marine

Space Grotesk

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

DomainTools

BlogVitals

Creative Commons

Outbrain

Twilio

definicion.de

biblehub.com

ARH Digitalstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Light Warm Off White

White

Deep Warm Off White

Cool Near Black

Colours

Black

Coral

Gold

Royal Blue

Slate Grey

Lavender

Pale Violet Red

Aqua Marine

Space Grotesk

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run arhdesign.tech?

Also set in DM Sans

DomainTools

BlogVitals

Creative Commons

Similar colours

Outbrain

Twilio

definicion.de

biblehub.com

Title &
description