SiteStyleGuide

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

Cisco Duo logo

Unofficial style guide

Cisco Duostyle guide

Cisco Duo’s website (duo.com) uses Circular for its headings and body text. Its palette is led by Dark Olive Green (#41722F), Lime Green (#6DBE4F) and Olive Drab (#57983F), with #363F44 text on #FFFFFF. Captured from the live site on 26 October 2026.

Website
duo.com
Typefaces
Circular
Palette
4 neutrals, 12 colours, 3 gradients
Captured
26 Oct 2026 · added by @sitestyleguide
Save Add to collection Share Report
https://duo.com/ Screenshot
Screenshot of the duo.com homepage on a desktop screen
Screenshot of duo.com on a 1440 px desktop screen, 26 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
IAM & MFA Identity Security for Business, Humans, AI | Cisco Duo
▲ 64 / 60 characters
Meta description
Cisco Duo secures workforce access and defends against advanced identity threats with IAM, phishing-resistant MFA, SSO, passwordless, and device trust.
● 151 / 160 characters
Site name
Cisco Duo
og:title
IAM & MFA Identity Security for Business, Humans, AI | Cisco Duo
og:description
Cisco Duo secures workforce access and defends against advanced identity threats with IAM, phishing-resistant MFA, SSO, passwordless, and device trust.
Language
en

In search results

Cisco Duohttps://duo.com/

IAM & MFA Identity Security for Business, Humans, AI | Cisco …

Cisco Duo secures workforce access and defends against advanced identity threats with IAM, phishing-resistant MFA, SSO, passwordless, and device trust.

When shared

The image Cisco Duo shares with links

duo.com

IAM & MFA Identity Security for Business, Humans, AI | Cisco Duo

Cisco Duo secures workforce access and defends against advanced identity threats with IAM, phishing-resistant…

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

Colour

Balance

How much each colour is used
  • White 28.1%
  • Dark Olive Green 12%
  • Cool Charcoal 11.6%
  • Cool Dark Grey 8.5%
  • Lime Green 8%
  • Warm Off White 5.9%
  • Olive Drab 3.7%
  • Light Royal Blue 3.7%
  • Deep Green 3.3%
  • Honey Dew 3.1%
  • Dark Green 3.1%
  • Light Golden Rod Yellow 2.5%
  • Light Green 2.2%
  • Black 1.6%
  • Deep Royal Blue 1.4%
  • Dodger Blue 1.2%

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
    10.76:1 AAA
    On white
    —

    Background, text, border · .nav-menu .main-menu-container .scrollable-menu-container ul.top-level-items .to, body

  • Cool Charcoal

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    21 7 0 73
    On text
    —
    On white
    10.76:1 AAA

    Text, background, border · body, .section--blog-archive .blog-item-data .blog-heading

  • Cool Dark Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    10 4 0 59
    On text
    1.81:1 Fail
    On white
    5.93:1 AA

    Text, background, border · .sidebar .sidebar-title:after, .testimonial-card .right-column .bottom-container .customer-details .title

  • Warm Off White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    3 0 5 2
    On text
    10.00:1 AAA
    On white
    1.08:1 Fail

    Background, border, text · .table--pricing thead>tr>th:nth-child(n+2)>div:before, .table--pricing tbody>tr>td:nth-child(n+2)>div:before

Colours

Brand colours and accents, most used first

  • Dark Olive Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    43 0 59 55
    On text
    1.88:1 Fail
    On white
    5.72:1 AA

    Text, background, border · .nav-menu .main-menu-container .scrollable-menu-container ul.top-level-items .to, article .bard-content-wrap h1 span

  • Lime Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    43 0 58 25
    On text
    4.68:1 AA
    On white
    2.30:1 Fail

    Background, text, border · article .bard-content-wrap h1 span, .section--pricing-roi-calculator .area-total .h2.active

  • Olive Drab

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    43 0 59 40
    On text
    3.06:1 AA large
    On white
    3.52:1 AA large

    Text, background, border · .button-link.text-color-green-600, .button-link:hover

  • Light Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 57 0 5
    On text
    2.21:1 Fail
    On white
    4.88:1 AA

    Background, text, border · .button-primary, .button-circular.blue-300

  • Deep Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    32 0 44 20
    On text
    5.57:1 AA
    On white
    1.93:1 Fail

    Border, text, background · .text-color-white .button-link, .background-color-green-400

  • Honey Dew

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    7 0 9 5
    On text
    9.21:1 AAA
    On white
    1.17:1 Fail

    Background, border, text · .doc-details .table-of-content-container .toc .toc-list .toc-list-item .toc-link, .table--pricing thead>tr>th:nth-child(n+2).featured>div:before

  • Dark Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    42 0 58 70
    On text
    1.11:1 Fail
    On white
    9.71:1 AAA

    Text, background, border · .button-secondary.green-700:active, .button-link:active

  • Light Golden Rod Yellow

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    14 0 19 10
    On text
    7.83:1 AAA
    On white
    1.37:1 Fail

    Background, text · .nav-menu .main-menu-container .scrollable-menu-container ul.top-level-items .to, .background-color-green-200

  • Light Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    23 0 31 15
    On text
    6.61:1 AA
    On white
    1.63:1 Fail

    Text, background, border · .text-color-white .button-link:hover, .text-color-white a:hover .button-link

  • Black

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    42 0 58 85
    On text
    1.48:1 Fail
    On white
    15.92:1 AAA

    Background, text · --gradient-end, article .bard-content-wrap .color-gradient-blue-400-green-1000

  • Deep Royal Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    100 57 0 24
    On text
    1.56:1 Fail
    On white
    6.89:1 AA

    Background · .button-primary.blue-300:active, .button-circular.blue-300:active

  • Dodger Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    79 45 0 4
    On text
    3.04:1 AA large
    On white
    3.54:1 AA large

    Background · .button-primary.blue-300:hover, .button-circular.blue-300:hover

Gradients

  • linear-gradient(90deg,#41722f,#6dbe4f)

  • linear-gradient(90deg,#213918,#6dbe4f)

  • linear-gradient(90deg,#0054c2,#162610)

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.

Circular

Aa 200 Aa 900

Circular

Self-hosted · weights 200, 300, 400, 450, 500, 700, 800, 900 · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS
Heading 1 2.75rem · 44 px / 1.1 weight 450

Cisco Duo

Heading 2 2.25rem · 36 px / 1.1 weight 450

IAM & MFA Identity Security for Business, Human…

Heading 3 1.75rem · 28 px / 1.2 weight 500

IAM & MFA Identity Security for Business, Human…

Heading 4 1.5rem · 24 px / 1.2 weight 500

IAM & MFA Identity Security for Business, Human…

Heading 5 1.25rem · 20 px / 1.2 weight 500

IAM & MFA Identity Security for Business, Human…

Heading 6 100% weight 500

IAM & MFA Identity Security for Business, Human…

Body 0.875rem · 14 px / 1.5 weight 400 · Circular

Cisco Duo secures workforce access and defends against advanced identity threats with IAM, phishing-resistant MFA, SSO, passwordless, and d…

Paragraph 100%

Cisco Duo secures workforce access and defends against advanced identity threats with IAM, phishing-resistant MFA, SSO, passwordless, and d…

Small 80%

Cisco Duo secures workforce access and defends against advanced identity threats with IAM, phishing-resistant MFA, SSO, passwordless, and d…

Button 100% / 1.15 none

Get started

Link 100%

Read more about Cisco Duo

Sizes in use

Most common across the site
  • 32px5 rules
  • 28pxline 1.2 · 3 rules
  • 24pxline 1.2 · 22 rules
  • 20pxline 1.2 · 12 rules
  • 18pxline 1 · 9 rules
  • 16pxline 1 · 28 rules
  • 14pxline 1 · 19 rules
  • 12pxline 1.2 · 25 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

.button-primary · #0069F2

Corner radius

  • 0.25rem · 13×
  • 1rem · 13×
  • 62.5rem · 11×
  • 50% · 5×
  • .5rem · 4×
  • .25rem · 4×

Shadows

  • 0 .25rem 1.25rem .25rem hsla(200,4%,85%,.65)
  • 0 .25rem 1.25rem -.25rem hsla(200,4%,85%,.25)
  • .25rem .5rem 2rem 0 rgba(54,63,68,.16)
  • 0 0 .5rem 0 #6dbe4f

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

361
720
721
1025
1026
1120
1280
1281

On a scale of 0 to 1440 px.

Content widths (max-width)

1480 px
429 px
420 px
376 px
364 px
345 px

Back to top ↑

Notes

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

Notes

  • ▲ CheckThe title is 64 characters. Google usually cuts titles near 60, so the end may not show in results.

Back to top ↑

Questions

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

Questions

What font does Cisco Duo use?
Cisco Duo’s website uses one typeface: Circular (headings and body text), self-hosted.
What are Cisco Duo’s brand colours?
The main colours on duo.com are Dark Olive Green (#41722F), Lime Green (#6DBE4F), Olive Drab (#57983F), Light Royal Blue (#0069F2), Deep Green (#8ACB72) and Honey Dew (#E2F2DC).
What colour is Cisco Duo’s text and background?
Body text is #363F44 on a #FFFFFF background.
Where is Cisco Duo’s logo from?
The logo shown in this guide was found on duo.com’s homepage. For official logo files and usage rules, check Cisco Duo’s own brand or press page.
Is this Cisco Duo’s official style guide?
No. SiteStyleGuide made it from duo.com’s public web pages on 26 October 2026, and isn’t affiliated with Cisco Duo. 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

duo-com-tokens.css

Download

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

/* duo.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/duo.com) */
:root {
  /* Colours */
  --text: #363F44;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-cool-charcoal: #363F44;
  --colour-cool-dark-grey: #5E6569;
  --colour-warm-off-white: #F1F9ED;
  --colour-dark-olive-green: #41722F;
  --colour-lime-green: #6DBE4F;
  --colour-olive-drab: #57983F;
  --colour-light-royal-blue: #0069F2;
  --colour-deep-green: #8ACB72;
  --colour-honey-dew: #E2F2DC;
  --colour-dark-green: #2C4C20;
  --colour-light-golden-rod-yellow: #C5E5B9;
  --colour-light-green: #A7D895;
  --colour-black: #162610;
  --colour-deep-royal-blue: #0054C2;
  --colour-dodger-blue: #3387F5;
  --gradient-1: linear-gradient(90deg,#41722f,#6dbe4f);
  --gradient-2: linear-gradient(90deg,#213918,#6dbe4f);
  --gradient-3: linear-gradient(90deg,#0054c2,#162610);

  /* Typefaces */
  --font-other: 'Circular', sans-serif;

  /* Type scale */
  --text-h1: 2.75rem;
  --leading-h1: 1.1;
  --text-h2: 2.25rem;
  --leading-h2: 1.1;
  --text-h3: 1.75rem;
  --leading-h3: 1.2;
  --text-h4: 1.5rem;
  --leading-h4: 1.2;
  --text-h5: 1.25rem;
  --leading-h5: 1.2;
  --text-h6: 100%;
  --text-body: 0.875rem;
  --leading-body: 1.5;
  --text-p: 100%;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 1.15;
  --text-a: 100%;

  /* Shape */
  --radius-1: 0.25rem;
  --radius-2: 1rem;
  --radius-3: 62.5rem;
  --radius-4: 50%;
  --radius-5: .5rem;
  --radius-6: .25rem;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 361px;
  --breakpoint-2: 720px;
  --breakpoint-3: 721px;
  --breakpoint-4: 1025px;
  --breakpoint-5: 1026px;
  --breakpoint-6: 1120px;
  --breakpoint-7: 1280px;
  --breakpoint-8: 1281px;
  --max-width-1: 1480px;
  --max-width-2: 429px;
  --max-width-3: 420px;
  --max-width-4: 376px;
  --max-width-5: 364px;
  --max-width-6: 345px;
}

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 duo.com?

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/duo.com" title="Cisco Duo 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 ↑

Similar colours

Websites whose lead colour is closest to Cisco Duo’s

Captured from duo.com on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Cisco Duo; this guide describes the public website for reference.