SiteStyleGuide

Unofficial A style guide made by SiteStyleGuide from venero.co.za’s public web pages. Not affiliated with or endorsed by Venero. The real site is venero.co.za ↗

Venero logo

Unofficial style guide

Venerostyle guide

Venero’s website (venero.co.za) uses Cabin for its headings and body text. Its palette is led by Light Steel Blue (#007CBA), Deep Steel Blue (#0274BE) and Dark Sea Green (#77A464), with #808285 text on #FFFFFF. Captured from the live site on 23 October 2026.

Typefaces
Cabin
Palette
4 neutrals, 8 colours
Captured
23 Oct 2026 · added by @connor
https://venero.co.za/ Screenshot
Screenshot of the venero.co.za homepage on a desktop screen
Screenshot of venero.co.za on a 1440 px desktop screen, 23 Oct 2026.

Identity & metadata

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

Title &
description

Page title
Venero Sourdough Pizza - Ballito - Venero
● 41 / 60 characters
Meta description
Artisan sourdough frozen pizza bases and unforgettable pizza parties in Ballito. Light, nutritious, restaurant-quality pizza made with real sourdough.
● 150 / 160 characters
Site name
Venero
og:title
Venero Sourdough Pizza - Ballito - Venero
og:description
Artisan sourdough frozen pizza bases and unforgettable pizza parties in Ballito. Light, nutritious, restaurant-quality pizza made with real sourdough.
Language
en-US

In search results

Venerohttps://venero.co.za/

Venero Sourdough Pizza - Ballito - Venero

Artisan sourdough frozen pizza bases and unforgettable pizza parties in Ballito. Light, nutritious, restaurant-quality pizza made with real sourdough.

When shared

The image Venero shares with links

venero.co.za

Venero Sourdough Pizza - Ballito - Venero

Artisan sourdough frozen pizza bases and unforgettable pizza parties in Ballito. Light, nutritious, restauran…

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

Colour

Balance

How much each colour is used
  • White 38.5%
  • Charcoal 27.8%
  • Light Grey 11.7%
  • Light Steel Blue 8.6%
  • Deep Grey 6.1%
  • Deep Steel Blue 2.3%
  • Dark Sea Green 1.3%
  • Medium Orchid 1.1%
  • Indian Red 0.9%
  • Dark Orange 0.7%
  • Royal Blue 0.5%
  • Red 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
    3.85:1 AA large
    On white
    —

    Text, background, border · body, .wp-block-uagb-advanced-heading.uagb-block-d1d04e5a.wp-block-uagb-advanced-headi

  • Charcoal

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 80
    On text
    3.28:1 AA large
    On white
    12.63:1 AAA

    Text, graphic, border · .uagb-block-c5e26958 .uagb-ifb-content .uagb-ifb-left-title-image svg, .uagb-block-c5e26958 .uagb-ifb-content .uagb-ifb-right-title-image svg

  • Light Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 40
    On text
    1.34:1 Fail
    On white
    2.88:1 Fail

    Border, background, text · .woocommerce .woocommerce-Addresses .woocommerce-Address-title, .woocommerce-cart .cart-collaterals .cart_totals>h2

  • Deep Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    4 2 0 48
    On text
    —
    On white
    3.85:1 AA large

    Text · body, .entry-content h1

Colours

Brand colours and accents, most used first
  • Light Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 33 0 27
    On text
    1.19:1 Fail
    On white
    4.57:1 AA

    Background · .wp-block-uagb-advanced-heading.uagb-block-d1d04e5a.wp-block-uagb-advanced-headi, .wp-block-uagb-advanced-heading.uagb-block-2e97e1ba.wp-block-uagb-advanced-headi

  • Deep Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    99 39 0 25
    On text
    1.28:1 Fail
    On white
    4.95:1 AA

    Background, text, border · input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb

  • Dark Sea Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    27 0 39 36
    On text
    1.34:1 Fail
    On white
    2.89:1 Fail

    Text, background · .woocommerce-js span.onsale, .woocommerce-js div.product p.price

  • Medium Orchid

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 39 8 36
    On text
    1.12:1 Fail
    On white
    4.33:1 AA large

    Background, border · .woocommerce-store-notice, .woocommerce-js .widget_price_filter .ui-slider .ui-slider-handle

  • Indian Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 57 52 16
    On text
    1.03:1 Fail
    On white
    3.74:1 AA large

    Text, border · .woocommerce-js .woocommerce-widget-layered-nav-list .woocommerce-widget-layered, .woocommerce-js .widget_layered_nav_filters ul li a::before

  • Dark Orange

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 44 95 3
    On text
    1.58:1 Fail
    On white
    2.44:1 Fail

    Text · .wp-block-uagb-advanced-heading .uagb-highlight

  • Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    71 53 0 12
    On text
    1.26:1 Fail
    On white
    4.85:1 AA

    Text · a

  • Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 100 100 0
    On text
    1.04:1 Fail
    On white
    4.00:1 AA large

    Text · .woocommerce-js div.product .out-of-stock, .woocommerce-js form .form-row .required

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.

Cabin

Aa 300 Aa 600

Cabin

Google Fonts · weights 300, 400, 500, 600 · headings, body, buttons

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

Type scale

From the site’s CSS · root 17 px
Heading 1 5.1176470588235rem · 87 px / 1.4em weight 400 · none · Cabin

Venero

Heading 2 2.4117647058824rem · 41 px / 1.3em weight 500 · none · Cabin

Venero Sourdough Pizza - Ballito - Venero

Heading 3 1.6470588235294rem · 28 px / 1.3em weight 600 · none · Cabin

Venero Sourdough Pizza - Ballito - Venero

Heading 4 1.4117647058824rem · 24 px / 1.2em weight 600 · none · Cabin

Venero Sourdough Pizza - Ballito - Venero

Heading 5 1.0588235294118rem · 18 px / 1.2em weight 500 · none · Cabin

Venero Sourdough Pizza - Ballito - Venero

Heading 6 0.88235294117647rem · 15 px / 1.25em weight 500 · none · Cabin

Venero Sourdough Pizza - Ballito - Venero

Body 1rem · 17 px / 1.7em weight 400 · Cabin

Artisan sourdough frozen pizza bases and unforgettable pizza parties in Ballito. Light, nutritious, restaurant-quality pizza made with real…

Paragraph 100%

Artisan sourdough frozen pizza bases and unforgettable pizza parties in Ballito. Light, nutritious, restaurant-quality pizza made with real…

Small 80%

Artisan sourdough frozen pizza bases and unforgettable pizza parties in Ballito. Light, nutritious, restaurant-quality pizza made with real…

Button 0.94117647058824rem · 16 px / 1em weight 400 · none · Cabin

Get started

Link 0.88235294117647rem · 15 px / 1.5 weight 500 · none · Cabin

Read more about Venero

Sizes in use

Most common across the site
  • 30pxline 30px · 27 rules
  • 26pxline 1.4 · 6 rules
  • 24pxline 1.65 · 9 rules
  • 20pxline 1.6 · 11 rules
  • 17pxline 1 · 23 rules
  • 16pxline 1em · 8 rules
  • 15pxline 1.3 · 28 rules
  • 14pxline 1.5 · 18 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

.ast-button · #E6E6E6 · radius 2px

Link

Read our latest news today.

a · #4169E1

Corner radius

  • 2px · 11×
  • 100% · 9×
  • 10px · 4×
  • 50px · 3×
  • 5px · 3×
  • 1em · 3×

Shadows

  • 0px 0px 0 #00000070
  • 0px 0px #00000070
  • 0px 0px 0 #00000026
  • 2.6px 2.6px .4px #ccc,0 0 2.6px #d9d9d9

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

544
767
768
769
921
922
976
992

On a scale of 0 to 1440 px.

Content widths (max-width)

1240 px
1200 px
370 px
300 px

Back to top ↑

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.
  • ▲ CheckBody text (#808285 on #FFFFFF) has a contrast of 3.85:1, under the 4.5:1 WCAG asks for.

Back to top ↑

Questions

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

Questions

What font does Venero use?
Venero’s website uses one typeface: Cabin (headings and body text), google Fonts.
What are Venero’s brand colours?
The main colours on venero.co.za are Light Steel Blue (#007CBA), Deep Steel Blue (#0274BE), Dark Sea Green (#77A464), Medium Orchid (#A46497), Indian Red (#D65D67) and Dark Orange (#F78A0C).
What colour is Venero’s text and background?
Body text is #808285 on a #FFFFFF background.
Where is Venero’s logo from?
The logo shown in this guide was found on venero.co.za’s homepage. For official logo files and usage rules, check Venero’s own brand or press page.
Is this Venero’s official style guide?
No. SiteStyleGuide made it from venero.co.za’s public web pages on 23 October 2026, and isn’t affiliated with Venero. 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

venero-co-za-tokens.css

Download

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

/* venero.co.za design tokens, from SiteStyleGuide (https://sitestyleguide.com/venero.co.za) */
:root {
  /* Colours */
  --text: #808285;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-charcoal: #333333;
  --colour-light-grey: #989898;
  --colour-deep-grey: #808285;
  --colour-light-steel-blue: #007CBA;
  --colour-deep-steel-blue: #0274BE;
  --colour-dark-sea-green: #77A464;
  --colour-medium-orchid: #A46497;
  --colour-indian-red: #D65D67;
  --colour-dark-orange: #F78A0C;
  --colour-royal-blue: #4169E1;
  --colour-red: #FF0000;

  /* Typefaces */
  --font-headings: 'Cabin', sans-serif;
  --font-body: 'Cabin', sans-serif;
  --font-buttons: 'Cabin', sans-serif;

  /* Type scale */
  --text-h1: 5.1176470588235rem;
  --leading-h1: 1.4em;
  --text-h2: 2.4117647058824rem;
  --leading-h2: 1.3em;
  --text-h3: 1.6470588235294rem;
  --leading-h3: 1.3em;
  --text-h4: 1.4117647058824rem;
  --leading-h4: 1.2em;
  --text-h5: 1.0588235294118rem;
  --leading-h5: 1.2em;
  --text-h6: 0.88235294117647rem;
  --leading-h6: 1.25em;
  --text-body: 1rem;
  --leading-body: 1.7em;
  --text-p: 100%;
  --text-small: 80%;
  --text-button: 0.94117647058824rem;
  --leading-button: 1em;
  --text-a: 0.88235294117647rem;
  --leading-a: 1.5;

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

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 544px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 769px;
  --breakpoint-5: 921px;
  --breakpoint-6: 922px;
  --breakpoint-7: 976px;
  --breakpoint-8: 992px;
  --max-width-1: 1240px;
  --max-width-2: 1200px;
  --max-width-3: 370px;
  --max-width-4: 300px;
}

Back to top ↑

Share

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

Share

Run venero.co.za?

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.

View our style guide on SiteStyleGuide
<a href="https://sitestyleguide.com/venero.co.za" title="Venero 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 ↑

Websites whose lead colour is closest to Venero’s

Captured from venero.co.za on 23 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Venero; this guide describes the public website for reference.