SiteStyleGuide

Unofficial A style guide made by SiteStyleGuide from ctt.ec’s public web pages. Not affiliated with or endorsed by Click to Tweet. The real site is ctt.ec ↗

Click to Tweet logo

Unofficial style guide

Click to Tweetstyle guide

Click to Tweet’s website (ctt.ec) uses Noto Sans for its headings and body text. Its palette is led by Deep Sky Blue (#2BA6CB), Fire Brick (#C60F13) and Olive Drab (#5DA423), with #222222 text on #FFFFFF. Captured from the live site on 26 October 2026.

Website
ctt.ec
Typefaces
Noto Sans, Helvetica Neue, Consolas
Palette
4 neutrals, 10 colours, 3 gradients
Captured
26 Oct 2026 · added by @sitestyleguide
Save Add to collection Share Report
https://clicktotweet.com/ Screenshot
Screenshot of the ctt.ec homepage on a desktop screen
Screenshot of ctt.ec 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
Click to Tweet | The easy, tweet about this link generator | Twitter advertising & marketing tool · ClickToTweet.com
▲ 116 / 60 characters
Meta description
Clicktotweet is the best, easiest and simplest way to promote and advertise your blog, website, business and stuff on Twitter. Create fast tweet about this links to use on your website, blog or even Twitter and help deliver your message, the right way.
▲ 252 / 160 characters
Language
en

In search results

Click to Tweethttps://clicktotweet.com/

Click to Tweet | The easy, tweet about this link generator | …

Clicktotweet is the best, easiest and simplest way to promote and advertise your blog, website, business and stuff on Twitter. Create fast tweet about this links…

When shared

No og:image, so no picture

ctt.ec

Click to Tweet | The easy, tweet about this link generator | Twitter advertising & market…

Clicktotweet is the best, easiest and simplest way to promote and advertise your blog, website, business and …

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

Colour

Balance

How much each colour is used
  • White 39.7%
  • Off White 14.2%
  • Charcoal 14.2%
  • Light Grey 10.6%
  • Deep Sky Blue 4.9%
  • Fire Brick 4.5%
  • Olive Drab 3%
  • Light Steel Blue 2.6%
  • Green 1.8%
  • Deep Steel Blue 1.6%
  • Dark Red 1.5%
  • Steel Blue 0.7%
  • Maroon 0.4%
  • Light Steel Blue 0.4%

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

    Background, text, border · form.custom .custom.dropdown, div.switch span:last-child

  • Off White

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 6
    On text
    13.84:1 AAA
    On white
    1.15:1 Fail

    Background, border, text · .section-container.auto > section > .title, .section-container.tabs > section > .title

  • Charcoal

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 80
    On text
    1.26:1 Fail
    On white
    12.63:1 AAA

    Text, background, border · .section-container.auto > section > .title a, .section-container.auto > section.active > .title a

  • Light Grey

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 0 0 20
    On text
    9.91:1 AAA
    On white
    1.61:1 Fail

    Background, border, text · .section-container.vertical-tabs > section.active > .title, .section-container.auto > section.active > .title

Colours

Brand colours and accents, most used first

  • Deep Sky Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    79 18 0 20
    On text
    5.62:1 AA
    On white
    2.83:1 Fail

    Background, text · button, button.disabled

  • Fire Brick

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 92 90 22
    On text
    2.64:1 Fail
    On white
    6.04:1 AA

    Background, border, text · button.alert, button.disabled.alert

  • Olive Drab

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    43 0 79 36
    On text
    5.15:1 AA
    On white
    3.09:1 AA large

    Background · button.success, button.disabled.success

  • Light Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    19 13 0 16
    On text
    8.14:1 AAA
    On white
    1.96:1 Fail

    Background · table.dataTable.order-column tbody tr.selected>.sorting_1, table.dataTable.display tbody tr.even.selected>.sorting_1

  • Green

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    43 0 79 52
    On text
    3.07:1 AA large
    On white
    5.18:1 AA

    Background, border · button.success:hover, button.disabled.success:hover

  • Deep Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    79 18 0 37
    On text
    3.70:1 AA large
    On white
    4.30:1 AA large

    Background, border · button:hover, button.disabled:hover

  • Dark Red

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 93 91 41
    On text
    1.80:1 Fail
    On white
    8.86:1 AAA

    Background, border · button.alert:hover, button.disabled.alert:hover

  • Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    88 22 0 30
    On text
    4.02:1 AA large
    On white
    3.95:1 AA large

    Background, text · .banner, .chromeLink

  • Maroon

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    0 92 91 50
    On text
    1.48:1 Fail
    On white
    10.76:1 AAA

    Border, text · .split.button.alert span, code

  • Light Steel Blue

    HEX
    RGB
    HSL
    OKLCH
    CMYK
    79 18 0 29
    On text
    4.59:1 AA
    On white
    3.46:1 AA large

    Text, border · .folders ul li .fa, a:hover

Gradients

  • linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%)

  • linear-gradient(top, #fff 0%, #dcdcdc 100%)

  • linear-gradient(top, #585858 0%, #111 100%)

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.

Noto Sans

Aa 400 Aa 700

Noto Sans

Google Fonts · weights 400, 700 · body, headings

Aa 400 Aa 700

Helvetica Neue

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

Aa 700

Consolas

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

Aa 400

Helvetica

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 1 2.125em · 34 px / 1.2125em weight 700 · Noto Sans

Click to Tweet

Heading 2 34px / 1.2125em weight 400 · Noto Sans

Click to Tweet | The easy, tweet about this lin…

Heading 3 1.375em · 22 px / 1.2125em weight 700 · Noto Sans

Click to Tweet | The easy, tweet about this lin…

Heading 4 1.125em · 18 px / 1.2125em weight 700 · Helvetica Neue

Click to Tweet | The easy, tweet about this lin…

Heading 5 1.125em · 18 px / 1.2125em weight 700 · Helvetica Neue

Click to Tweet | The easy, tweet about this lin…

Heading 6 1em · 16 px / 1.2125em weight 700 · Helvetica Neue

Click to Tweet | The easy, tweet about this lin…

Body 100% / 1 weight 400 · Noto Sans

Clicktotweet is the best, easiest and simplest way to promote and advertise your blog, website, business and stuff on Twitter. Create fast …

Paragraph 1em · 16 px / 1.6 weight 400

Clicktotweet is the best, easiest and simplest way to promote and advertise your blog, website, business and stuff on Twitter. Create fast …

Small 60%

Clicktotweet is the best, easiest and simplest way to promote and advertise your blog, website, business and stuff on Twitter. Create fast …

Button 1em · 16 px / normal weight 700 · none

Get started

Link 18px / 40px weight 700 · uppercase

Read more about Click to Tweet

Sizes in use

Most common across the site
  • 24pxline 2 · 6 rules
  • 22pxline 1 · 6 rules
  • 20pxline 1.6 · 5 rules
  • 18px7 rules
  • 16pxline 1.6 · 17 rules
  • 14pxline 30px · 33 rules
  • 13pxline 45px · 8 rules
  • 12pxline 1.4 · 17 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 · #2BA6CB

Link

Read our latest news today.

a · #2BA6CB

Corner radius

  • 4px · 19×
  • 3px · 14×
  • 1000px · 10×
  • 6px · 7×
  • 8px · 5×
  • 10px · 4×

Shadows

  • 0 0 1em #ffffff
  • 0 0 5px #999999
  • 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white
  • 0 10px 0 1px #888888, 0 16px 0 1px #888888, 0 22px 0 1px #888888

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

320
550
640
767
768
940
1280
1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1000 px
800 px
500 px
434 px
300 px

Back to top ↑

Notes

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

Notes

  • ▲ CheckThe title is 116 characters. Google usually cuts titles near 60, so the end may not show in results.
  • ▲ CheckThe description is 252 characters. Search results usually show about 160.
  • ▲ CheckThere is no og:image, so links shared on social media show no picture.

Back to top ↑

Questions

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

Questions

What font does Click to Tweet use?
Click to Tweet’s website uses one typeface: Noto Sans (headings and body text), google Fonts.
What are Click to Tweet’s brand colours?
The main colours on ctt.ec are Deep Sky Blue (#2BA6CB), Fire Brick (#C60F13), Olive Drab (#5DA423), Light Steel Blue (#ACBAD5), Green (#457A1A) and Deep Steel Blue (#2284A1).
What colour is Click to Tweet’s text and background?
Body text is #222222 on a #FFFFFF background.
Where is Click to Tweet’s logo from?
The logo shown in this guide was found on ctt.ec’s homepage. For official logo files and usage rules, check Click to Tweet’s own brand or press page.
Is this Click to Tweet’s official style guide?
No. SiteStyleGuide made it from ctt.ec’s public web pages on 26 October 2026, and isn’t affiliated with Click to Tweet. 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

ctt-ec-tokens.css

Download

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

/* ctt.ec design tokens, from SiteStyleGuide (https://sitestyleguide.com/ctt.ec) */
:root {
  /* Colours */
  --text: #222222;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-off-white: #EFEFEF;
  --colour-charcoal: #333333;
  --colour-light-grey: #CCCCCC;
  --colour-deep-sky-blue: #2BA6CB;
  --colour-fire-brick: #C60F13;
  --colour-olive-drab: #5DA423;
  --colour-light-steel-blue: #ACBAD5;
  --colour-green: #457A1A;
  --colour-deep-steel-blue: #2284A1;
  --colour-dark-red: #970B0E;
  --colour-steel-blue: #158AB2;
  --colour-maroon: #7F0A0C;
  --colour-light-steel-blue-2: #2795B6;
  --gradient-1: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
  --gradient-2: linear-gradient(top, #fff 0%, #dcdcdc 100%);
  --gradient-3: linear-gradient(top, #585858 0%, #111 100%);

  /* Typefaces */
  --font-body: 'Noto Sans', sans-serif;
  --font-headings: 'Noto Sans', sans-serif;
  --font-other: 'Consolas', 'Liberation Mono', 'Courier', monospace;
  --font-buttons: 'VideoJS';

  /* Type scale */
  --text-h1: 2.125em;
  --leading-h1: 1.2125em;
  --text-h2: 34px;
  --leading-h2: 1.2125em;
  --text-h3: 1.375em;
  --leading-h3: 1.2125em;
  --text-h4: 1.125em;
  --leading-h4: 1.2125em;
  --text-h5: 1.125em;
  --leading-h5: 1.2125em;
  --text-h6: 1em;
  --leading-h6: 1.2125em;
  --text-body: 100%;
  --leading-body: 1;
  --text-p: 1em;
  --leading-p: 1.6;
  --text-small: 60%;
  --text-button: 1em;
  --leading-button: normal;
  --text-a: 18px;
  --leading-a: 40px;

  /* Shape */
  --radius-1: 4px;
  --radius-2: 3px;
  --radius-3: 1000px;
  --radius-4: 6px;
  --radius-5: 8px;
  --radius-6: 10px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 320px;
  --breakpoint-2: 550px;
  --breakpoint-3: 640px;
  --breakpoint-4: 767px;
  --breakpoint-5: 768px;
  --breakpoint-6: 940px;
  --breakpoint-7: 1280px;
  --breakpoint-8: 1440px;
  --max-width-1: 1000px;
  --max-width-2: 800px;
  --max-width-3: 500px;
  --max-width-4: 434px;
  --max-width-5: 300px;
}

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 ctt.ec?

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/ctt.ec" title="Click to Tweet 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 ↑

Also set in Noto Sans

Other websites using Noto Sans as their main typeface

Similar colours

Websites whose lead colour is closest to Click to Tweet’s

Captured from ctt.ec on 26 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Click to Tweet; this guide describes the public website for reference.