33Across Design System Deep Dive

1. Brand Overview

33Across positions itself squarely in the ad tech space — think high-velocity programmatic advertising, supply-side optimization, and monetization tools for publishers. The product is not aimed at casual users; it’s targeted at B2B stakeholders in publishing, advertising, and media buying. You feel this in the design choices — straightforward, functional, and stripped of fluff.

The visual language leans toward "enterprise clean" rather than "marketing glossy." There’s no sprawling illustration set or playful micro-interactions. Instead, typography is system-based (system-ui stack), colors are minimal, and the spacing is disciplined. This isn’t a site built to wow you with animations. It’s built to get you to the point — fast.

The primary accent color — a saturated orange (#dc7018) — is used sparingly, often in hover states and to signal interactive elements. That orange is loud enough to stand out against neutral backgrounds, but not so loud that it dominates.

Links start with a deep corporate blue (rgb(0, 81, 195)) in their default state, shifting to a brighter orange on hover. This dual-color link state is a small but effective way to convey "trustworthy but energetic" — blue for reliability, orange for engagement.

Typography is purely functional: no custom web fonts, no brand-specific ligatures. This is a conscious decision — faster load times, consistent rendering across devices, and easy maintenance. It signals a brand that values utility over aesthetic flourishes.

Layout is built on an 8px grid — the gold standard for responsive design — with a narrow breakpoint at 720px. That’s a clue: they’re optimizing for mobile and small tablet early, and probably using fluid grids rather than fixed container widths on larger screens.

Borders and radii are used more for structure than decoration: 50% radius for circular elements, solid borders for segmentation. No shadows — this is a flat design system, relying on color and spacing for hierarchy.

Overall vibe: functional minimalism with targeted color accents. This is a system for a brand that wants speed, clarity, and trustworthiness — not playful branding or heavy visual storytelling.

2. Color System

2.1 Primary Colors

The main brand color here is Orange #dc7018 (rgb(220, 112, 24)). It’s bright, warm, and high contrast against white. Orange is psychologically associated with energy, action, and friendliness. In B2B contexts, especially tech/advertising, it’s often used to break the monotony of blues and grays.

Interestingly, 33Across doesn’t blast you with orange. It’s primarily used for hover/focus states — you see it when interacting, not passively. That’s smart; it keeps the UI clean while reserving color for feedback.

Competitor comparison: Many ad tech brands lean heavily on blue (trust) or green (growth). Orange is rarer, which gives 33Across a distinct accent in the space.

2.2 Complete Palette

These are all the colors extracted from the site. Notice the absence of background colors in the data — likely default white backgrounds dominate.

2.3 Color Relationships

• Orange on White: Strong contrast (~5:1 ratio), good accessibility for interactive states.
• Blue on White: Even stronger contrast (~7:1), very readable.
• Dark Gray Borders: High contrast for separating components.
• Light Gray Dividers: Subtle, low contrast — meant for visual grouping without heavy separation.

WCAG: All primary text colors meet AA contrast standards against white backgrounds. Hover states maintain equal or higher contrast.

2.4 Usage Guide

Works well:

• Orange (#dc7018) on white or light gray backgrounds — strong and energetic.
• Blue (#0051c3) for default links, switching to orange on hover — clear interactive signaling.

Avoid:

• Orange text on dark backgrounds without testing — could fail contrast.
• Mixing orange hover with other warm colors — reduces distinctiveness.
• Using light gray (#d9d9d9) for text — too low contrast.

3. Typography

3.1 Font Families

All typography uses the system-ui stack:

system-ui, -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

No Google Fonts, no Adobe Fonts. This is purely for performance and rendering consistency.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is minimal: one large heading size (40px), one smaller heading (24px), and a single small text size for captions/links (12px). No mid-range body size in extracted data — likely defaults to browser’s base 16px.

Readability: 40px headings are bold but not heavy (weight 500). This keeps them airy. 12px captions are small, so they rely on high contrast colors to remain legible.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. All spacing values are multiples of 8px.

4.2 Layout

Breakpoint: 720px — triggers responsive changes for mobile/tablet. Likely uses fluid widths up to a max not extracted in the data. Section spacing heavily favors 32px increments.

5. Visual Elements

• Border Radius: Single value — 50%. Used for circular shapes (avatars, icons).
• Shadows: None. Flat design approach.
• Borders:
  • 4px solid dark gray (#313131) — strong visual separators.
  • 1px top border light gray (#d9d9d9) — subtle dividers.

6. Components

6.1 Buttons

No button styles extracted — likely default HTML buttons or custom components styled inline. The absence suggests links may double as primary actions.

6.2 Links

Default:

• Color: Blue (#0051c3)
• Text-decoration: none
• Weight: 400

Hover:

• Color: Orange (#ee730a)
• Text-decoration: underline

6.3 Forms

No input styles extracted — likely using browser defaults or minimal overrides.

6.4 Cards

No explicit card styles extracted — layout relies on spacing and borders.

7. Design Tokens

:root {
  /* Colors */
  --color-orange-accent: #dc7018;
  --color-link-blue: #0051c3;
  --color-link-hover-orange: #ee730a;
  --color-border-dark-gray: #313131;
  --color-divider-light-gray: #d9d9d9;

  /* Typography */
  --font-family-system: system-ui, -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-size-h1: 2.50rem; /* 40px */
  --font-size-h1-small: 1.50rem; /* 24px */
  --font-size-caption: 0.75rem; /* 12px */
  --font-size-link: 0.75rem; /* 12px */
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --line-height-default: 1.50;

  /* Spacing */
  --space-8: 0.50rem;
  --space-16: 1.00rem;
  --space-32: 2.00rem;
  --space-64: 4.00rem;
  --space-128: 8.00rem;

  /* Border Radius */
  --radius-circle: 50%;

  /* Borders */
  --border-4px-solid-dark: 4px solid #313131;
  --border-top-light: 1px solid #d9d9d9;

  /* Breakpoints */
  --breakpoint-mobile: 720px;
}

8. AI Coding Assistant Prompt

# 33Across Design System Specification

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

## Brand Context
33Across values functional minimalism and speed. Their design language is flat, with high-contrast interactive accents. Typography is system-based for performance and cross-platform consistency.

## Color Palette
- Brand Accent Orange: #dc7018 — hover/focus states, interactive highlights
- Link Blue: #0051c3 — default link text
- Link Hover Orange: #ee730a — link hover state
- Border Dark Gray: #313131 — strong component separators
- Divider Light Gray: #d9d9d9 — subtle section dividers

## Typography
Font family: `system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`

| Level       | Size     | Weight | Line Height | Use For          |
|-------------|----------|--------|-------------|------------------|
| H1          | 40px     | 500    | 1.50        | Page titles      |
| H1-small    | 24px     | 500    | 1.50        | Section headings |
| Caption     | 12px     | 400    | 1.50        | Small labels     |
| Link        | 12px     | 400    | 1.50        | Inline links     |

## Spacing & Grid
Base unit: 8px
Scale: 8px, 16px, 32px, 64px, 128px
Use multiples for padding, margins, and gaps.

## Border Radius
- full-circle: 50% — avatars, circular icons

## Shadows & Depth
Flat design — use borders for separation, no shadows.

## Component Specifications

### Navigation Links
Default:
```css
a {
  color: #0051c3;
  text-decoration: none;
  font-weight: 400;
  font-size: 12px;
}
a:hover {
  color: #ee730a;
  text-decoration: underline;
}
```

### Borders
```css
.divider {
  border-top: 1px solid #d9d9d9;
}
.strong-border {
  border: 4px solid #313131;
}
```

## Layout & Responsive Rules
- Breakpoint: 720px — adjust layout for mobile/tablet
- Maintain multiples of 8px for spacing
- Use fluid widths up to breakpoint, then responsive grid

## Interaction Rules
- Hover states change color (blue → orange)
- Underline appears on link hover
- No motion/transition extracted — keep changes instant

## DO List
- Use only extracted palette colors
- Maintain 8px spacing grid
- Use system-ui font stack
- Keep design flat — no shadows
- Reserve orange for interactive states
- Use high-contrast colors for text

## DON'T List
- Add custom colors
- Use non-system fonts
- Add shadows
- Mix rounded and sharp corners — only full circles where needed
- Use low-contrast text colors

## Code Examples

### Link
```css
a {
  color: #0051c3;
  text-decoration: none;
}
a:hover {
  color: #ee730a;
  text-decoration: underline;
}
```

### Circular Avatar
```css
.avatar {
  border-radius: 50%;
  border: 4px solid #313131;
}
```

### Divider
```css
.divider {
  border-top: 1px solid #d9d9d9;
  margin-top: 32px;
  margin-bottom: 32px;
}
```

9. Summary

TL;DR — 33Across runs a lean, flat design system: one bright accent orange reserved for interaction, deep blue for links, and strong gray borders for structure. Typography is all system fonts. Spacing is disciplined on an 8px grid. It’s built for speed and clarity.

Brand Keywords:

• functional-minimalist
• flat-enterprise
• high-contrast
• performance-focused
• interaction-driven