Sharethrough Design System Deep Dive

1. Brand Overview

Sharethrough’s site is unapologetically digital-first. The vibe is modern tech with a clean, confident palette and typography that’s functional but not boring. You can tell they’re in the programmatic advertising world — they want to look sophisticated enough for enterprise buyers but approachable for agency creatives. The design language is crisp without being sterile. It’s not trying to be flashy; it’s trying to make you trust the data.

The first thing that hits you: deep navy backgrounds (#0e1c28) with bright aqua accents (#00bdb0 and #3de0c8). This is a deliberate high-contrast play — dark mode aesthetic but with a pop of energy. It’s a smart move for a brand that deals in digital interfaces all day. Aqua isn’t random here; in this context, it communicates clarity, innovation, and a certain “future-proof” optimism.

Typography is consistent — TT Interphases everywhere. No secondary serif, no mixing. That’s a statement: one font to rule the UI. It gives them a cohesive feel across headings, buttons, and links. The weights are varied (300, 400, 600), which lets them create hierarchy without changing fonts.

Even the component decisions scream “UI-first.” Buttons are pill-shaped (100px border-radius) or medium-rounded (30px) — no harsh corners anywhere. Shadows are sparse but when used, they’re colored: aqua glows (rgba(61, 224, 200, 0.58)) instead of generic gray. That’s unique. They’ve avoided heavy drop shadows in favor of subtle depth and glow cues.

Spacing is on an 8px base grid, but they’re not religious about it — there are odd values like 5px and 13px sprinkled in. Probably due to fine-tuning rather than a strict token system.

This brand’s design system is built for screens, not print. Dark backgrounds, neon-accented buttons, clean sans-serif type — it’s a tech-optimist look. And the whole thing feels tuned for clarity and accessibility (big text sizes, high contrast).

2. Color System

2.1 Primary Colors

The primary brand color is #00bdb0 (rgb(0, 189, 176)). This is used for logo accents, menu highlights, and certain interactive states. It’s a teal leaning toward cyan — high saturation, cool temperature. This color says “modern” and “trustworthy” without being corporate blue or environmental green. Competitors often go for pure blue (#007bff) or muted greens; Sharethrough’s teal is more distinctive in the ad tech space.

The secondary accent is #3de0c8 (rgb(61, 224, 200)), a lighter aqua used for buttons, glows, and hover/focus states. It complements the primary teal without clashing; it’s basically the “active” or “highlight” variant.

The background anchor is #0e1c28 — almost black but with a hint of navy. This sets the tone for the whole site: immersive, high contrast, and easy on the eyes in low-light environments.

White (#ffffff) is used heavily for text and icons on dark backgrounds, ensuring maximum legibility.

2.2 Complete Palette

2.3 Color Relationships

The main contrast pairing is #0e1c28 background with #ffffff text — WCAG passes easily. Teal (#00bdb0) on navy also has solid contrast for larger UI elements, though for small text they wisely stick to white.

The aqua glow (#3de0c8) on dark backgrounds is more about visual pop than strict contrast — it’s luminous, so it works as a focus indicator.

Bright blue (#365fff) is a bit of an outlier. It’s used sparingly; possibly for links or special states. On navy, it’s moderately high contrast; on white, it’s safe.

2.4 Usage Guide

• Use #00bdb0 for brand elements, primary CTAs, and logo accents.
• Use #3de0c8 for hover states, secondary buttons, and glow effects.
• Keep text on dark backgrounds white (#ffffff) or light aqua for visual hierarchy.
• Avoid putting teal on bright blue — too close in luminance, not enough contrast.
• Backgrounds should be navy (#0e1c28) or pure white — no mid-tone grays for large areas.

3. Typography

3.1 Font Families

Everything is TT Interphases. No Google Fonts, no Adobe Fonts, no variable fonts. They’ve committed to one family. Fallbacks are absent in most cases, meaning they probably self-host the font.

System fonts appear only in rare cases like buttons (-apple-system) or links (system-ui stack) — likely inherited from framework defaults.

3.2 Type Scale

3.3 Hierarchy

They rely on size jumps for hierarchy. 60px for big hero headings, then 40px/32px for section titles, down to 20–18px for body-level headings. Line heights are generous (>1.3) for big sizes, tighter for UI labels. Minimal uppercase usage — they let size and weight do the work.

4. Spacing & Layout

4.1 Spacing Scale

Base unit is 8px — you see multiples everywhere, with occasional odd values.

4.2 Layout

Breakpoints are explicit: 420, 568, 600, 640, 768, 1024, 1279, 1280, 1300, 1536px. That’s a mix of mobile-first and large desktop tuning. 1280/1300 differentiate container widths for wide vs ultra-wide monitors.

5. Visual Elements

Border Radius

They love roundness. Pill buttons at 100px, large cards at 30px, small elements at 8px or 20px. No sharp corners unless intentional (nav dropdown edges).

Shadows

Mostly flat design, with some glow:

• Aqua glow: rgba(61, 224, 200, 0.58) 0px 0px 12px 0px
• Minor drop shadows: rgba(0, 0, 0, 0.2) 0px 0px 15px -10px, rgba(0, 0, 0, 0.2) 2px 2px 3px 0px

6. Components

6.1 Buttons

They have multiple button styles:

Primary Aqua Button

• Default: bg #3de0c8, text #0e1c28, padding 10px 25px, radius 30px, no border.
• Hover: bg rgba(255,255,255,0.15).
• Focus: outline auto 5px.

Gray Button

• Default: bg #e2e8f0, text #333333, padding 10px 25px, radius 30px.
• Hover: same as primary — semi-transparent white overlay.

Outline White Button

• Default: transparent bg, white text, padding 6px 20px, radius 24px, border 1px solid rgba(255,255,255,0.3).
• Hover: dark gray background.

Glow Dark Button

• Default: bg rgba(14, 28, 40, 0.85), text #3de0c8, padding 10px 25px, radius 100px, border 1px solid #3de0c8, glow shadow.
• Hover: dark gray bg, white text.

Close Button

• Default: bg semi-transparent black, white text/icon, radius 50%, no padding.

6.2 Links

Variants:

• Aqua: #3de0c8 underline.
• White: #ffffff underline.
• Teal: #00bdb0 underline.
• Navy: #0e1c28 no underline.

6.3 Forms

Inputs are minimal — transparent backgrounds, no radius, subtle placeholder colors (rgba(255,255,255,0.5) or aqua variants). Textareas have 1px white border.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-navy: #0e1c28;
  --color-white: #ffffff;
  --color-teal-primary: #00bdb0;
  --color-black: #000000;
  --color-dark-gray: #222222;
  --color-aqua-accent: #3de0c8;
  --color-bright-blue: #365fff;
  --color-light-gray: #d8dee6;
  --color-mid-aqua: #33d6be;

  /* Typography */
  --font-tt-interphases: "TT Interphases";
  --font-system: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans;
  --font-arial: Arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;
  --space-180: 180px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-pill: 100px;
  --radius-full: 100%;
  --radius-round: 50%;

  /* Shadows */
  --shadow-aqua-glow: rgba(61, 224, 200, 0.58) 0px 0px 12px 0px;
  --shadow-soft: rgba(0, 0, 0, 0.2) 0px 0px 15px -10px;
}

8. AI Coding Assistant Prompt

# Sharethrough Design System Specification

You are a Sharethrough design expert. Build UIs matching their visual language exactly.

## Brand Context
Sharethrough’s visual language is a dark-mode tech aesthetic with bright aqua accents. Typography is consistent TT Interphases, rounded corners dominate, and glow effects replace heavy shadows. It’s designed for high-contrast, screen-first experiences.

## Color Palette
- Deep Navy: #0e1c28 — Page backgrounds, primary dark surfaces
- Pure White: #ffffff — Text on dark backgrounds, icons
- Primary Teal: #00bdb0 — Brand elements, logo, primary CTAs
- Aqua Accent: #3de0c8 — Buttons, hover states, glow effects
- Pure Black: #000000 — Icons, close buttons
- Dark Gray: #222222 — Secondary text, mobile nav links
- Bright Blue: #365fff — Secondary accent, rare highlights
- Light Gray: #d8dee6 — Hover/focus backgrounds
- Mid Aqua: #33d6be — Hover/focus accents

## Typography
Font Families:
- TT Interphases (primary UI font)
- System stack for certain buttons/links
- Arial in rare cases

Type Sizes (px / weight / line-height):
- H1: 60 / 300 / 1.33 — Hero titles
- H2: 40 / 300 or 400 / 1.30 — Section headings
- H3: 32 / 600 / 1.38 — Subtitles
- Body: 20 / 300-400 / 1.80 — Paragraphs
- Label: 18 / 400 / 1.56 — UI labels
- Caption: 14 / 300-400 / 2.00 — Metadata
- Small UI: 10 / 400 / 2.80 — Tiny buttons

## Spacing & Grid
Base: 8px grid
Scale: 1, 2, 4, 5, 6, 8, 9, 10, 12, 13, 14, 15, 20, 25, 30, 40, 50, 60, 80, 180px
Use multiples for padding/margin. Example: buttons use 10px vertical, 25px horizontal.

## Border Radius
- sm: 4px — badges
- md: 8px — modals, small containers
- lg: 20px — images, cards
- xl: 30px — larger buttons
- pill: 100px — primary buttons
- full: 100% — circular buttons/icons

## Shadows & Depth
- Aqua glow: rgba(61, 224, 200, 0.58) 0px 0px 12px 0px — focus or special buttons
- Minimal black shadows for subtle depth

## Component Specifications

### Primary Button
Default:
- background: #3de0c8
- color: #0e1c28
- padding: 10px 25px
- radius: 30px
- border: none
Hover: background rgba(255,255,255,0.15)
Focus: outline auto 5px

### Secondary Button (Gray)
Default: bg #e2e8f0, color #333, radius 30px
Hover: semi-transparent white overlay

### Outline Button
Transparent bg, white text, 1px solid rgba(255,255,255,0.3), radius 24px
Hover: dark gray bg

### Glow Dark Button
bg rgba(14,28,40,0.85), color #3de0c8, border 1px solid #3de0c8, radius 100px, shadow aqua glow

### Navigation Links
Aqua (#3de0c8) underline, white (#ffffff) underline, teal (#00bdb0) underline, or navy text no underline

### Input Fields
Transparent bg, placeholder color rgba(255,255,255,0.5), no radius, padding 8px 0px
Textarea: 1px solid rgba(255,255,255,0.5), padding 20px

## Layout & Responsive Rules
Breakpoints: 420, 568, 600, 640, 768, 1024, 1279, 1280, 1300, 1536px
Mobile: stacked layout, 20px side padding
Desktop: up to 1300px container width

## Interaction Rules
- 150ms ease for state transitions
- Focus indicators: outline auto 5px or aqua glow
- Hover states use subtle overlays, not big color changes

## DO List
- Use only palette colors
- Maintain 8px grid
- Always use TT Interphases for headings and body
- Keep corners rounded according to radius tokens
- Use aqua glow for emphasis, not as default

## DON'T List
- Don’t use arbitrary colors
- Don’t mix sharp and rounded corners
- Don’t overload shadows
- Don’t reduce contrast for text

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #3de0c8;
  color: #0e1c28;
  padding: 10px 25px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: rgba(255,255,255,0.15); }
.btn-primary:focus { outline: -webkit-focus-ring-color auto 5px; }
```

### Card
```css
.card {
  background: #0e1c28;
  border-radius: 20px;
  padding: 30px;
  box-shadow: rgba(0,0,0,0.2) 0px 0px 15px -10px;
}
```

### Input
```css
.input-text {
  background: transparent;
  color: rgba(255,255,255,0.5);
  padding: 8px 0;
  border: none;
}
.input-text:focus {
  outline: none;
}
```

9. Summary

TL;DR — Sharethrough’s design system is a dark, high-contrast UI built for digital environments. Aqua accents drive interaction, TT Interphases keeps typography consistent, and rounded corners + glow effects replace heavy shadows.

Brand Keywords:

• tech-optimist
• dark-mode-native
• aqua-driven
• rounded-consistent
• screen-first