Doi Design System Deep-Dive

1. Brand Overview

Doi.org is the home of the DOI (Digital Object Identifier) system — the infrastructure that keeps scholarly publishing and research citations stable. This isn't a consumer-facing lifestyle brand. It's a standards body serving universities, scientific publishers, and technologists who care about persistence, accuracy, and interoperability.

The vibe is unapologetically utilitarian. No splashy gradients. No playful illustrations. Everything is tuned for clarity: flat colors, straightforward typography, restrained interaction states. This is a brand designed to convey trust and authority in a technical ecosystem.

The design philosophy leans on legibility and consistency over visual drama. The use of Futura PT — a geometric sans — signals a modernist bent. Futura is a 1920s font, but here it's deployed in a way that feels timeless rather than retro. It says: “we’re precise, we’re structured, and we’ve been around.”

Color choices are conservative: muted blue-gray (#5c7292) as the main accent, white backgrounds, black text. There's a small injection of yellow (#fab70c), but it's rare — likely reserved for callouts. The palette is functional, with clear states for links and inputs, and no ornamental colors.

This is a site for people who already know what a DOI is. The design doesn’t try to “sell” — it organizes. That’s a refreshing change from brands obsessed with attention-grabbing, because here the priority is: don’t break trust, don’t introduce ambiguity, keep it accessible.

2. Color System

2.1 Primary Colors

The main brand color is #5c7292 — a desaturated blue-gray. It’s calm, serious, and avoids the corporate “trust blue” clichés. In psychology terms, blue-gray signals professionalism and stability without the coldness of pure gray. Compared to competitors (think Crossref or ORCID), Doi's primary is less saturated, less “web 2.0.” It's understated — fitting for an infrastructure provider.

Links hover to this color, white text on accents flips to this color on hover. It’s the connective tissue between typography and interaction states.

Yellow (#fab70c) is the wildcard. It’s bright, warm, and high-contrast. It draws attention immediately, so it’s probably used sparingly for highlights or warnings.

2.2 Complete Palette

2.3 Color Relationships

White (#ffffff) and black (#000000) provide maximum contrast — WCAG AAA compliant for body text. The blue-gray (#5c7292) on white passes accessibility easily for headings and links.

Yellow (#fab70c) on white has borderline contrast for small text — use it for icons or large text, not fine print. Red (#ff0000) is vivid, but on white it’s fine for alerts. Bright blue (#005fcc) is excellent for focus outlines — it pops without clashing with the brand primary.

Dark mode? No evidence in the data. The palette is clearly designed for light backgrounds.

2.4 Usage Guide

Works well:

• Black text (#000000) on white backgrounds — default.
• Blue-gray (#5c7292) accents for links, headings.
• Yellow (#fab70c) as sparing attention highlight.

Avoid:

• Yellow body text on white — fails WCAG for small sizes.
• Red for non-error contexts — it reads as warning.
• Mixing bright blue (#005fcc) with yellow — high clash.

3. Typography

3.1 Font Families

The site uses Futura PT and Futura PT Bold — no fallbacks listed in data, meaning it’s probably served via self-hosted or licensed source. No Google Fonts, no Adobe Fonts API. This is a deliberate choice: keep control over rendering.

Geometric sans fonts like Futura are sharp, precise. They suit technical brands, but can feel cold if overused. Here, the variety of weights (300, 500, 600, 700) adds warmth and hierarchy.

3.2 Type Scale

3.3 Hierarchy

The jump from 60px to 24px for headings is dramatic — clear separation between hero titles and section headings. Multiple 18px styles, some uppercase, some not, are used for subheads and navigation links. The uppercase transforms add structure, but the mixed casing elsewhere keeps it readable.

Line heights are generous (1.5) except for tight headings at 1.2 — these feel more assertive. This is a system optimized for clarity at varied screen sizes.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px — confirmed by multiple multiples. Values:

4.2 Layout

Breakpoints range from 320px to 1600px — clear intent to support everything from small phones to large desktops. Common steps: 576px (bootstrap-like), 768px, 992px, 1200px. This matches traditional responsive grids.

5. Visual Elements

Border Radius

Two values:

• 4px — used on code blocks.
• 50% — used for circular elements (avatars, icons).

No other radii. This is a sharp-cornered brand, except for perfect circles.

Shadows

None. This is flat design. Depth is conveyed with borders, not drop shadows.

Borders

• 1px solid #dddddd — code blocks.
• 2px solid #ffffff — divs.
• 2px solid #707070 — inputs.
• Non-uniform 0px 2px 0px 0px — possibly nav separators.

6. Components

6.1 Buttons

Data shows no explicit button styles extracted — likely simple text links styled as buttons. This reinforces the flat, utilitarian vibe.

6.2 Links

Four variants:

1. Black (#000000), weight 600, underline on hover.
2. Blue-gray (#5c7292), weight 300, underline on hover.
3. White (#ffffff), weight 700, hover to blue-gray.
4. Mid-gray (#707070), weight 300, hover to blue-gray.

6.3 Forms

Text input:

• Default: white background, black text, 2px solid #707070 border, no radius, 12px padding.
• Focus: border #86b7fe, box-shadow rgba(220, 53, 69, 0.25) 0 0 0 0.25rem — interesting: shadow color is reddish, likely a bootstrap leftover.

6.4 Cards

No explicit card component extracted. Likely flat white backgrounds with spacing tokens.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-blue-gray: #5c7292;
  --color-yellow: #fab70c;
  --color-light-gray: #f4f4f4;
  --color-red: #ff0000;
  --color-mid-gray: #dddddd;
  --color-bright-blue: #005fcc;

  /* Typography */
  --font-futura-pt: "futura-pt";
  --font-futura-pt-bold: "futura-pt-bold";

  /* Spacing */
  --space-2: 2px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-120: 120px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-full: 50%;

  /* Borders */
  --border-code: 1px solid #dddddd;
  --border-div: 2px solid #ffffff;
  --border-input: 2px solid #707070;

  /* Shadows */
  --shadow-none: none;
}

8. AI Coding Assistant Prompt

# Doi Design System Specification

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

## Brand Context
Doi.org represents the Digital Object Identifier system — infrastructure for scholarly publishing. The design is utilitarian, flat, and precise. It uses geometric sans typography, muted blue-gray accents, and a strict 8px spacing grid.

## Color Palette
- White: #ffffff — page backgrounds, inputs, base surfaces
- Black: #000000 — body text, default links
- Blue-Gray: #5c7292 — primary accents, link hovers, logos
- Yellow: #fab70c — highlights, callouts
- Light Gray: #f4f4f4 — section backgrounds, subtle dividers
- Red: #ff0000 — error messages
- Mid Gray: #dddddd — borders for code blocks, dividers
- Bright Blue: #005fcc — focus outlines, hover emphasis

## Typography
- Fonts: "futura-pt", "futura-pt-bold"
- No fallbacks listed — assume licensed/self-hosted
- Sizes/weights:
| Context   | Font             | Size          | Weight | Line Height | Transform |
|-----------|------------------|---------------|--------|-------------|-----------|
| heading-1 | futura-pt-bold   | 60px          | 300    | 1.50        | none      |
| heading-1 | futura-pt        | 24px          | 300    | 1.50        | none      |
| link      | futura-pt-bold   | 24px          | 300    | 1.67        | uppercase |
... (include all from extracted data)

## Spacing & Grid
Base: 8px grid.
Scale: 2px, 8px, 10px, 12px, 16px, 20px, 30px, 40px, 50px, 60px, 120px.
Use multiples for all margins/paddings.

## Border Radius
- sm: 4px — code blocks
- full: 50% — avatars, circular icons

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

## Component Specifications
### Input Field
Default: background #ffffff, text #000000, border 2px solid #707070, radius 0, padding 12px.
Focus: border-color #86b7fe, box-shadow rgba(220,53,69,0.25) 0 0 0 0.25rem, outline 0.

### Links
Variant 1: color #000000, font-weight 600, underline on hover.
Variant 2: color #5c7292, font-weight 300, underline on hover.
Variant 3: color #ffffff, font-weight 700, hover to #5c7292.
Variant 4: color #707070, font-weight 300, hover to #5c7292.

## Layout & Responsive Rules
Breakpoints: 320px, 480px, 576px, 700px, 720px, 768px, 800px, 960px, 992px, 1200px, 1260px, 1400px, 1600px.
Follow mobile-first approach.

## Interaction Rules
Transitions: 150ms ease for hover/focus changes.
Focus indicators: bright blue (#005fcc) for outlines.

## DO List
- Use only colors from palette.
- Maintain 8px grid.
- Use Futura PT for all text.
- Keep corners sharp except for perfect circles.
- Use underline only on hover for links.

## DON'T List
- Add shadows — brand is flat.
- Use colors outside palette.
- Mix rounded and sharp corners.
- Overuse yellow — keep it for highlights.

## Code Examples
### Link Example
```css
a {
  color: #000000;
  font-weight: 600;
  text-decoration: none;
}
a:hover {
  color: #5c7292;
  text-decoration: underline;
}
```

### Input Example
```css
input[type="text"] {
  background: #ffffff;
  color: #000000;
  border: 2px solid #707070;
  border-radius: 0;
  padding: 12px;
}
input[type="text"]:focus {
  border-color: #86b7fe;
  box-shadow: rgba(220, 53, 69, 0.25) 0 0 0 0.25rem;
  outline: none;
}
```

9. Summary

TL;DR — Doi.org’s design is flat, precise, and built for clarity. Blue-gray accents, geometric sans fonts, and a strict spacing grid keep it functional and trustworthy. No shadows, no fluff — just infrastructure-grade UI.

Brand Keywords:

• infrastructure-flat
• scholarly-authoritative
• geometric-minimal
• trust-first
• utilitarian-clarity