360yield Design System Deep Dive

1. Brand Overview

360yield’s design language is stripped-down, utilitarian, and functional. This isn’t a marketing-first aesthetic—it’s built for operations, dashboards, and high-volume transactional interfaces. Everything about the interface says “efficiency.” There’s no heavy visual branding beyond a favicon, no lush imagery, no ornamental flourishes. The primary focus is usability in a data-rich environment.

The login screen we analyzed shows a preference for neutral grays, crisp typography, and a single, high-saturation blue for action states. This is common in enterprise SaaS tools: a restrained palette keeps the UI from fighting with the data, and one accent color carries the interactive load.

Typography choices reinforce the utilitarian feel. Century Gothic appears in headings—a slightly more geometric, clean look—and Open Sans dominates body, captions, and buttons. These are both classic web-safe fonts with broad OS support, so rendering consistency beats typographic novelty.

Spacing is tight. The smallest units go down to 1px, with a lot of values between 1px and 10px. This suggests a dense layout, again typical for enterprise dashboards where screen real estate is precious.

Borders and radius values are minimal—3px and 4px are as round as it gets. Shadows are barely there: a single rgba(0,0,0,0.1) shadow at 5px/10px blur shows up once. Most components are flat, relying on border color shifts for state change.

360yield’s philosophy here is clear: clarity, speed, and low visual noise. One primary blue drives CTAs. Grays create hierarchy through contrast. Typography is unpretentious but readable. Spacing is economical. This works well for a product where the brand’s identity is secondary to the data being presented.

2. Color System

2.1 Primary Colors

The primary action color is #278ceb (rgb(39,140,235)). It’s a bright, medium-blue leaning toward an azure tone. This is the only saturated color in the palette, so it stands out sharply against the neutral grays. It’s used for buttons and focus borders—exactly where you want the user’s eyes to land.

Psychologically, blue communicates trust, competence, and calmness—perfect for a platform handling ad yield optimization. Competitors in the ad-tech space often choose blues or greens for similar reasons (Google Ad Manager uses blues, The Trade Desk uses blues with orange accents). 360yield’s blue is slightly softer than pure “corporate” navy, but still high-contrast.

2.2 Complete Palette

2.3 Color Relationships

The primary blue (#278ceb) against white (#ffffff) yields a contrast ratio around 4.6:1—just within WCAG AA for normal text. For large button labels, this is fine. Against dark gray (#666666), contrast is lower (~3.5:1), so it’s less ideal for small text but acceptable for icons or decorative elements.

Grays span from #000000 down to #f5f5f5, giving a full range for text hierarchy and surface separation. There's no explicit dark mode, but the palette could be inverted easily.

2.4 Usage Guide

• Best combinations: #278ceb on #ffffff for CTAs; #666666 on #f5f5f5 for readable UI chrome.
• Avoid: Blue on mid-gray backgrounds (#808080, #bcbcbc) for text—contrast drops below accessibility thresholds.
• Accent discipline: Only use #278ceb for interactive elements. Don’t dilute its impact with decorative usage.

3. Typography

3.1 Font Families

• Century Gothic: Used for H1 headings. No fallbacks listed—likely relying on OS defaults.
• Open Sans: Dominates captions, body, links, buttons. Multiple weights: 300, 400, 500, 700.
• OpenSans-Bold: Explicit bold variant for captions.

No Google Fonts or Adobe Fonts sources detected—these are system-installed or self-hosted.

3.2 Type Scale

3.3 Hierarchy

The type scale is compressed—only 4px between the largest heading and the smallest caption. This makes sense for tight, data-heavy UI. Hierarchy comes more from weight than from size; headings use bold weight, captions vary between 300 and 700. High line heights (2.73 for H1) give breathing room in the vertical rhythm without increasing font size.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid.

4.2 Layout

Breakpoint at 600px suggests a mobile/desktop split at small tablet width. No wide desktop-specific breakpoints detected—likely fluid layouts above that. Tight spacing values reinforce dense grids.

5. Visual Elements

Border Radius

Rounded corners are minimal—no pill shapes, no large radii. This keeps the UI sharp and data-focused.

Shadows

One shadow: rgba(0, 0, 0, 0.1) 5px 10px 10px 0px. Very soft, used sparingly.

Borders

Borders are utilitarian, mostly for separation.

6. Components

6.1 Buttons

Primary button specs:

Default

• Background: #278ceb
• Color: #666666
• Padding: 7px 10px
• Border radius: 0px
• Border: 0px solid #cccccc
• Font: Open Sans, 12px, weight 300

Hover

• Background: #8d9eb0
• Color: #666666
• Border: none

Active

• Background: transparent
• Border: none

Focus

• Outline: 0px
• Box-shadow: #59a326 0px 0px 1px

Odd choice: text color on primary button is gray (#666666), not white. This works because the blue is light enough, but it’s unconventional.

6.2 Links

Link variant 1:

• Default: #316eb7, no underline, weight 500
• Hover: no change (possibly underline in other contexts)

Link variant 2:

• Default: #666666, no underline, weight 300
• Hover: underline

6.3 Forms

Text input:

• Default: transparent background
• Text color: #808080
• Border: none
• Padding-left: 10px
• Focus: border-color #278ceb

No explicit validation styles extracted.

6.4 Cards

No dedicated card component detected; presentation elements have 4px or 10px radius, 1px solid border (#ced4da), flat background.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-neutral-dark-gray: #666666;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-neutral-light-gray-1: #cecece;
  --color-neutral-mid-gray: #808080;
  --color-neutral-light-gray-2: #bcbcbc;
  --color-neutral-very-light-gray: #f5f5f5;
  --color-primary-blue: #278ceb;
  --color-deep-navy: #0e2846;
  --color-medium-blue: #2380d8;
  --color-link-blue: #316eb7;
  --color-hover-gray: #8d9eb0;
  --color-focus-green: #59a326;
  --color-border-gray: #ced4da;
  --color-tooltip-border-gray: #e1e1e1;

  /* Typography */
  --font-heading: "Century Gothic";
  --font-body: "Open Sans";
  --font-body-bold: "OpenSans-Bold", "Open Sans Bold", "Open Sans";

  --font-size-h1: 15px;
  --font-size-caption-lg: 13px;
  --font-size-caption-md: 12px;
  --font-size-caption-sm: 11px;

  --line-height-h1: 2.73;
  --line-height-caption-lg: 2.46;
  --line-height-caption-md: 1.58;
  --line-height-caption-sm: 1.55;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-21: 21px;
  --space-30: 30px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 10px;

  /* Shadows */
  --shadow-soft: rgba(0, 0, 0, 0.1) 5px 10px 10px 0px;
}

8. AI Coding Assistant Prompt

# 360yield Design System Specification

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

## Brand Context
360yield's design is utilitarian, data-focused, and low-noise. Neutrals dominate, with one bright blue for primary actions. Typography is geometric for headings and humanist for body text. Spacing is tight, borders minimal, and shadows rare.

## Color Palette
- Neutral Dark Gray: #666666 — Panel headers, UI chrome, text
- Black: #000000 — Titles
- White: #ffffff — Button text
- Neutral Light Gray 1: #cecece — Dividers
- Neutral Mid Gray: #808080 — Input text
- Neutral Light Gray 2: #bcbcbc — Form labels
- Neutral Very Light Gray: #f5f5f5 — Background surfaces
- Primary Blue: #278ceb — Buttons, focus borders
- Deep Navy: #0e2846 — Alternate hover/focus background
- Medium Blue: #2380d8 — Alternate hover/focus background
- Link Blue: #316eb7 — Links
- Hover Gray: #8d9eb0 — Button hover background
- Focus Green: #59a326 — Button focus ring
- Border Gray: #ced4da — Presentation borders
- Tooltip Border Gray: #e1e1e1 — Tooltip borders

## Typography
- Heading: "Century Gothic", no fallback
- Body/Buttons: "Open Sans"
- Bold Body: "OpenSans-Bold", "Open Sans Bold", "Open Sans"

| Element   | Size  | Weight | Line Height | Use For         |
|-----------|-------|--------|-------------|-----------------|
| H1        | 15px  | 700    | 2.73        | Page headings   |
| Caption   | 13px  | 300    | 2.46        | Light captions  |
| Caption   | 13px  | 400    | —           | Captions        |
| Button    | 13px  | 400    | —           | Buttons         |
| Caption   | 12px  | 300    | 1.58        | Light captions  |
| Link      | 12px  | 500    | 1.58        | Links           |
| Button    | 12px  | 300    | 1.58        | Small buttons   |
| Caption   | 12px  | 700    | 1.58        | Bold captions   |
| Caption   | 11px  | 700    | 1.55        | Small bold text |

## Spacing & Grid
Base: 8px grid. Scale: 1px, 2px, 3px, 4px, 5px, 7px, 8px, 10px, 21px, 30px.

## Border Radius
- sm: 3px — Tooltips
- md: 4px — Presentation elements
- lg: 10px — Presentation elements

## Shadows & Depth
- Soft shadow: rgba(0,0,0,0.1) 5px 10px 10px 0px — used sparingly

## Component Specifications

### Primary Button
Default:

background: #278ceb; color: #666666; padding: 7px 10px; border-radius: 0px; border: 0px solid #cccccc; font-family: "Open Sans"; font-size: 12px; font-weight: 300;

Hover:

background: #8d9eb0; color: #666666; border: none;

Active:

background: transparent; border: none;

Focus:

outline: 0px; box-shadow: #59a326 0px 0px 1px;

### Link
Variant 1:
- Default: #316eb7, no underline, weight 500
- Hover: same color

Variant 2:
- Default: #666666, no underline, weight 300
- Hover: underline

### Input Field
Default:

background: transparent; color: #808080; border: none; border-radius: 0px; padding-left: 10px;

Focus:

border-color: #278ceb;

## Layout & Responsive Rules
- Breakpoint: 600px — switch to mobile layout
- Tight spacing: use smallest units possible for dense data views

## Interaction Rules
- Transition timing: 150ms ease for hover/focus changes
- Focus indicators: use box-shadow with focus green (#59a326)

## DO List
- Use ONLY colors from palette
- Maintain 8px grid for spacing
- Use Century Gothic for headings
- Keep borders minimal
- Reserve primary blue for interactive elements

## DON'T List
- Add decorative shadows
- Mix large and small corner radii arbitrarily
- Use colors outside palette
- Reduce contrast below WCAG AA

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #278ceb;
  color: #666666;
  padding: 7px 10px;
  border-radius: 0;
  border: none;
  font-family: "Open Sans";
  font-size: 12px;
  font-weight: 300;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #8d9eb0; }
.btn-primary:focus { box-shadow: #59a326 0 0 1px; outline: none; }
```

Input:
```css
.input {
  color: #808080;
  padding-left: 10px;
  background: transparent;
  border: none;
}
.input:focus { border-color: #278ceb; outline: none; }
```

9. Summary

TL;DR
360yield’s design system is utilitarian: neutral grays, one saturated blue for actions, tight spacing, minimal borders, almost no shadows. Typography is clean and readable, with hierarchy created by weight more than size.

Brand Keywords

• data-focused-minimalism
• blue-accent-discipline
• utilitarian-clarity
• tight-spacing-economy