Sedo Design System Deep Dive

1. Brand Overview

Sedo’s design language is unapologetically functional. This isn’t the kind of brand that hides behind glossy gradients or over-engineered animations. They operate in a straightforward, trust-first space — domain trading and brokerage — and the site reflects that intent: clear UI, minimal distractions, and predictable interaction patterns.

The vibe? Corporate pragmatic. There’s zero fluff here. Everything is tasked with converting action: click, search, submit. Blue is the dominant psychological anchor — a direct cue for trust, authority, and reliability. It’s the “I won’t steal your money” color, deployed without irony. Every accent and call-to-action follows this principle.

Typography sits in a modern humanist sans family — Source Sans Pro and Source Sans 3 — paired with occasional system fallback like Arial. This keeps texts approachable without sacrificing neutrality. No quirky letterforms. No serif indulgences. Just clarity.

Componentry is standard, restrained. Buttons are squared-off with slight radius; inputs are boxy, clear, and tested. The breakpoints suggest a responsive-first build designed to accommodate everything from sub-600px mobile screens up to large 1439px desktops. There’s evidence of Vuetify under the hood, so a lot of the look & feel is piggybacking on its material-ish baseline, but heavily stripped of material’s heavy shadows. Sedo’s shadows are minimal and precise — never fuzzy, never too deep.

If you’re designing for Sedo, remember: your job here is not to wow — it’s to reassure. The user base is investors, brokers, and businesses — they’re looking for clean data presentation and safe pathways, not playful exploration. Sedo’s design system says “Your transaction will go through because we know what we’re doing.”

2. Color System

2.1 Primary Colors

Primary is unmistakably #005ca9 (rgb(0, 92, 169)). It’s everywhere: CTAs, primary buttons, brand partnerships (PayPal, United Internet logos), key action triggers. It’s a saturated, serious blue — reminiscent of both financial institutions and tech companies that need quick trust association. This works because blue holds high acceptance rates across global audiences and feels “safe” for a marketplace dealing with high-value transactions.

A secondary accent comes in #246ba1 (rgb(36, 107, 161)), another blue but lighter, used for internal links, some CTAs. Together they create a clear primary/accent hierarchy: darker blue for action, lighter blue for informational emphasis.

Competitors in the domain and hosting space (GoDaddy, Namecheap) often go for warmer palette accents — oranges and greens — to stand out. Sedo instead stays cold, consistent, and in the “trust-tech” quadrant. It’s a deliberate avoidance of casualness.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong. Primary blue against white gives ~7.4:1 contrast ratio — comfortably AAA for WCAG. Dark gray (#32383d) against white is also AAA, and mid-gray (#8c9195) against white is AA+ for large text but borderline AA for small text — so need to be mindful when using on smaller labels.

There’s zero sign of a dark mode strategy. The palette is firmly anchored in light surfaces with dark text + dark actions.

2.4 Usage Guide

Best combos:

• #005ca9 on #ffffff — CTA perfection. High visibility, high trust.
• #32383d headings on white — clear structure, no strain.
• #8c9195 secondary text paired with high-contrast sections — communicates low priority content.

Avoid:

• #537b2d green on dark backgrounds — contrast suffers badly.
• Using #d3d9de as text color on white — fails readability unless used for placeholders.

3. Typography

3.1 Font Families

Two main faces here:

• source_sans_proregular — custom load, likely self-hosted, no Google/Adobe fonts detected.
• Source Sans 3 — also custom/self-hosted variant.

Fallback: occasional Arial (not common).

No variable font usage, no Adobe font service in play.

3.2 Type Scale

3.3 Hierarchy

They’ve got a weird redundancy in heading sizing — multiple Heading-1 contexts with different pixel sizes from 18px up to 60px. It suggests either poor token naming or a flexible semantic heading system where “heading-1” is style, not content. The absence of strict H1/H2/H3 tokens might make dev implementation messy — but it gives them layout flexibility.

Line height shifts are drastic: H1 at 2.47 feels poster-like, while body is tight at 1.00 — bordering on cramped. This keeps interfaces compact but can reduce readability in dense paragraphs.

4. Spacing & Layout

4.1 Spacing Scale

It’s an 8px scale type, but with irregulars (5px, 7px, 11px, 13px, 17px). Actual extracted values:

Frequency shows heavy use of 10px and 13px — micro gaps. This is a tight layout grid — less whitespace than something airy like Material.

4.2 Layout

Breakpoints at: 600, 609, 714, 715, 760, 829, 959, 980, 1049, 1139, 1199, 1279, 1289, 1439px. Close spacing breakpoints (609 vs 600) suggest fine-tuning for awkward tablet widths.

Containers likely cap around 1439px desktop.

5. Visual Elements

Border Radius

Odd choices like 500px radius on images suggest circular cropping without using percentage.

Shadows

Sparse:

• rgb(169, 169, 170) 0px 0px 10px 0px — subtle perimeter
• rgba(0, 0, 0, 0.1) 0px 5px 15px 0px — soft depth
• rgb(38, 42, 46) 0px 0px 20px -5px — deeper accent shadow

Flat majority — shadows are rare.

Borders

Recurrent 1px solids — #ededed, #5a5d62, #005ca9 etc. Pure utilitarian separation.

6. Components

6.1 Buttons

We have five extracted button variants:

Primary CTA (btn btn-blue)

• Default: bg #0060a9, white text, radius 0 5px 5px 0, no border
• Hover: bg white, text #5e6366
• Font weight: 800, size 16px

Simple Outline (button)

• Default: transparent bg, white text, radius 5px, border 1px solid #5a5d62
• Hover: bg white, text #32383d
• Font weight: 600, size 13px

Big Blue (text-center btn-blue)

• Default: bg #0061aa, white text, padding 13px 20px, radius 5px
• Hover: bg #004076, text #5e6366
• Font weight: 400, size 16px

Light Blue CTA (blue cta)

• Default: bg #61aae1, text #246ba1, radius 0 3px 3px 0
• Hover: bg white, text #32383d
• Font weight: 400, size 14px

Framed CTA (btn-cta btn btn-blue)

• Default: bg #005ca9, white text, padding 12px 15px, radius 0 5px 5px 0, border 1px solid #005ca9
• Hover: bg white, text #32383d
• Font weight: 800, size 16px

All share hover inversion cues — flipping bg and text.

6.2 Links

Six variants, differing mainly in color: #005ca9, white, #246ba1, #537b2d, #262a2e, #d3d9de. Text-decoration usually none except some with underline default state (white links).

Hover states: never underlined; color retention.

6.3 Forms

Inputs: radii often 5px 0 0 5px for left-side field part of grouped control. Search has heavy vertical padding (33px top) — likely for label-over-input style.

Focus removes outlines entirely — could be risky for accessibility.

6.4 Cards

No explicit card data, but any box with shadow values above uses subtle grays; padding likely drawn from spacing tokens 10px–20px.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-dark-gray: #32383d;
  --color-mid-gray: #8c9195;
  --color-blue-accent: #246ba1;
  --color-near-black: #262a2e;
  --color-primary-blue: #005ca9;
  --color-light-gray: #d3d9de;
  --color-green-accent: #537b2d;
  --color-off-white: #f9f5f4;
  --color-lightest-gray: #ededed;

  /* Typography */
  --font-source-pro: 'source_sans_proregular';
  --font-source-sans-3: 'Source Sans 3';
  --font-arial: Arial;

  /* Spacing */
  --space-5: 5px;
  --space-7: 7px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-17: 17px;
  --space-20: 20px;
  --space-25: 25px;
  --space-28: 28px;
  --space-29: 29px;
  --space-30: 30px;
  --space-40: 40px;
  --space-45: 45px;
  --space-50: 50px;
  --space-70: 70px;
  --space-88: 88px;
  --space-125: 125px;

  /* Border Radius */
  --radius-3: 3px;
  --radius-5: 5px;
  --radius-14: 14px;
  --radius-50: 50px;
  --radius-100: 100px;
  --radius-500: 500px;

  /* Shadows */
  --shadow-light-gray: rgb(169, 169, 170) 0px 0px 10px 0px;
  --shadow-soft-dark: rgba(0, 0, 0, 0.1) 0px 5px 15px 0px;
  --shadow-deep-dark: rgb(38, 42, 46) 0px 0px 20px -5px;
}

8. AI Coding Assistant Prompt

# Sedo Design System Specification

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

## Brand Context
Sedo’s design values clarity, trust, and functionality. It uses a compact grid, reliable blue primary tones, and minimal shadowing to convey authority. Interactions are predictable, with hover states flipping colors.

## Color Palette
- White: #ffffff — Default backgrounds, text on dark.
- Dark Gray: #32383d — Headings, hero text.
- Mid Gray: #8c9195 — Secondary text.
- Blue Accent: #246ba1 — Links, secondary CTAs.
- Near Black: #262a2e — Text on light, high-contrast surfaces.
- Primary Blue: #005ca9 — Brand primary, main CTAs, partner logos.
- Light Gray: #d3d9de — Borders, dividers.
- Green Accent: #537b2d — Success states, secondary highlights.
- Off White: #f9f5f4 — Section background.
- Lightest Gray: #ededed — Input borders, surfaces.

## Typography
Fonts:
- 'source_sans_proregular'
- 'Source Sans 3'
- Arial (fallback for some buttons)

Sizes:
| Element   | Font                  | Size   | Weight | Line Height | Use For                |
|-----------|-----------------------|--------|--------|-------------|------------------------|
| H1        | source_sans_proregular| 60px   | 600    | 2.47        | Page hero headline     |
| H1        | source_sans_proregular| 58px   | 600    | 1.14        | Hero alt headline      |
| H1        | source_sans_proregular| 40px   | 600    | 1.00        | Section headline       |
| ...continues with extracted table...

## Spacing & Grid
Base unit: 8px grid with irregular steps.
Tokens: 5px, 7px, 10px, 11px, 12px, 13px, 14px, 15px, 17px, 20px, 25px, 28px, 29px, 30px, 40px, 45px, 50px, 70px, 88px, 125px.

Map:
- Button padding: 12–20px
- Section gaps: 40px+
- Form field padding: from 12px to large label overlay 33px top

## Border Radius
- none: 0 — hard edges
- sm: 3px — div containers, links
- md: 5px — buttons, UL
- varied: 0 5px 5px 0 — right-side buttons
- xl: 14px — some divs
- full: 100px and above — avatars, circular images

## Shadows & Depth
Minimal:
- Light gray glow: rgb(169,169,170) 0 0 10px
- Soft dark lift: rgba(0,0,0,0.1) 0 5px 15px
Avoid heavy drop shadows.

## Component Specifications

### Primary Button
Default: bg #0060a9; color #ffffff; padding 0; radius 0 5px 5px 0; no border; font-weight 800; font-size 16px.
Hover: bg #ffffff; color #5e6366.
Active/Focus: bg rgba(255,255,255,0.25).

### Secondary Button
Default: transparent bg; color #ffffff; radius 5px; border 1px solid #5a5d62; font-weight 600; font-size 13px.
Hover: bg #ffffff; color #32383d.

### Input Fields
Search: bg #ffffff; text color #262a2e; radius 5px 0 0 5px; padding 33px top, 19px sides; no border.
Email: bg #ffffff; border 1px solid #e6e6e6; radius 5px 0 0 5px; padding 12px 15px.

### Links
Primary: #005ca9, no underline.
White link: #ffffff, underline default, removing underline hover.

## Layout & Responsive Rules
Breakpoints: 600, 609, 714, 715, 760, 829, 959, 980, 1049, 1139, 1199, 1279, 1289, 1439px.
Adjust component wraps at these exact widths.

## Interaction Rules
Transition: 150ms ease for hover/focus.
Focus indicators: None visible — avoid for accessibility issues.

## DO List
- Use only palette colors.
- Maintain spacing multiples of defined tokens.
- Apply right-side radius to group buttons.
- Keep hover inversion styles consistent.
- Use Source Sans fonts for all visible text.

## DON'T List
- Don't invent new blues — primary must be exact hex.
- Don't apply heavy shadows.
- Don't round corners beyond defined tokens.
- Don't remove hover inversion unless necessary.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0060a9;
  color: #ffffff;
  padding: 0;
  border-radius: 0 5px 5px 0;
  font-weight: 800;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #5e6366;
}
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 1px solid #5a5d62;
  border-radius: 5px;
  font-weight: 600;
  font-size: 13px;
}
.btn-secondary:hover {
  background: #ffffff;
  color: #32383d;
}
```

### Input
```css
.input-email {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 5px 0 0 5px;
  padding: 12px 15px;
}
.input-email:focus { outline: none; }
```

9. Summary

TL;DR — Sedo’s system is compact and business-first. High-trust blues, dense spacing, minimal shadows, predictable inversion hovers. Typography is pragmatic, grid is tight, and every component looks designed for function over flair.

Brand Keywords: trust-tech, compact-grid, no-frills, authority-blue