Arxiv Brand Design System Technical Deep-Dive

1. Brand Overview

Arxiv is one of those rare digital brands that’s been around long enough to feel like infrastructure. It’s not chasing trends. It’s not trying to be “fresh” in a way that alienates its core audience. It’s a utilitarian tool for researchers, scientists, and academics — so the design language reflects that: functional, restrained, and very much optimized for information density over visual flair.

The vibe is academic minimalism. The UI is structured to serve people who care about content first. There’s no playful illustration style, no gradients, no skeuomorphic experiments. Instead, you get a flat design system with subtle typographic hierarchy, a mostly monochrome palette with sharp injections of deep reds and blues, and component styling that prioritizes clarity.

The philosophy here is “Don’t get in the way.” Every design choice seems to be about reducing noise. Even the primary brand color — a deep red (#a41919) — is used sparingly, mostly in interactive states or key brand markers. Buttons are small. Borders are thin. Shadows are almost nonexistent (only a faint inset shadow on inputs). It’s the kind of system that doesn’t scream at you; it just works.

Who’s this for? Researchers scanning hundreds of paper titles. Developers integrating with APIs. People who need speed and trustworthiness more than “delight.” The design reflects the brand’s institutional credibility and the seriousness of its audience.

I love that they’ve resisted the temptation to over-style. This is a low-drama UI. It’s also surprisingly consistent given the age and scale of the project. The typography stack (Lucida Grande + system fallbacks) is old-school, but it’s stable. The spacing scale is tidy (8px base with fractional values), and the breakpoints cover a wide range of devices without overcomplication.

If you’re building something for high-information environments — dashboards, data portals, academic repositories — there’s a lot you can learn from how Arxiv’s design system keeps the UI out of the way but still manages to be recognizably theirs.

2. Color System

2.1 Primary Colors

The main brand color is a deep, muted red: #a41919 (rgb(164, 25, 25)). It’s not a bright, aggressive red — it’s closer to an academic crimson. This works because it signals authority and tradition without feeling like an error state. It’s also more accessible than high-saturation reds in terms of readability when paired with white text.

Psychologically, this red sits firmly in the “serious” range — less about urgency, more about credibility. Compared to competitors (think ResearchGate with greens, PubMed with blues), Arxiv’s red is distinctive. It immediately marks the brand in listings or embedded components.

They don’t use this red everywhere. It appears in hover/focus states, in certain buttons (btn-header-donate borders and text), and occasionally in links. This restraint keeps it from becoming visually fatiguing.

2.2 Complete Palette

Here’s the extracted palette:

2.3 Color Relationships

The contrast between #a41919 (deep red) and #ffffff (white) is high — WCAG compliant for large and small text. Same for #005fcc (bright blue) on white. The #efefef is subtle enough for backgrounds without killing contrast for black text.

Dark mode? Not implemented here. The palette is built for light backgrounds. If you inverted it, #a41919 would hold up, but #efefef would need replacement for accessibility.

2.4 Usage Guide

Combinations that work:

• #a41919 text on #ffffff background — strong brand signal.
• #ffffff text on #440a0a background — high contrast, formal.
• #005fcc on white — clear, modern accent.

Avoid:

• Putting #1e8bc3 text on #efefef — low contrast.
• Using #fff1f1 for text — it’s a background tint only.
• Mixing #a41919 and #440a0a without white — too close, muddy contrast.

3. Typography

3.1 Font Families

The system uses Lucida Grande heavily, with fallbacks to helvetica, arial, verdana and sometimes Helvetica Neue. Buttons occasionally use Arial. Captions stick with Lucida Grande.

No Google Fonts or Adobe Fonts here — everything is system-safe. This keeps load times minimal and ensures consistency across devices.

3.2 Type Scale

3.3 Hierarchy

They’re not using massive jumps in size — the largest heading is 40px, then it drops quickly to 21.6px. This keeps things compact. Links range from 16px down to 10px for very small UI text. The hierarchy is subtle but functional: big titles, mid-size section heads, small body links. It’s readable and space-efficient.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid with fractional values.

4.2 Layout

Breakpoints (px): 330, 425, 426, 480, 500, 501, 550, 768, 769, 990, 1023, 1024.
This is a granular responsive system — they’re clearly tuning for specific device widths rather than a minimal 3-tier approach.

5. Visual Elements

Border Radius

Corners are small-radius — nothing pill-shaped. The highest number is 10px.

Shadows

One style: rgba(10, 10, 10, 0.1) 0px 1px 2px 0px inset — used on inputs. This is flat design with minimal depth.

Borders

Thin, functional borders. Many 1px solid in shades of black, gray (#cccccc, #dddddd, #767676). Occasional colored borders (#b31b1b deep red) on buttons.

6. Components

6.1 Buttons

Header Donate Button (btn-header-donate)

• Default: BG #ffffff, text #b31b1b, padding 3.03px 15.15px 0px, radius 7.575px, border 1px solid #b31b1b.
• Hover: Text #ffffff, BG #440a0a.
• Active: Text #000000.
• Focus: Text #ffffff, BG #440a0a.

Small Dark Button (button is-small is-cul-darker)

• Default: BG #711111, text #ffffff, padding 5px 12px, radius 2px, border transparent.
• Hover: BG #440a0a.
• Focus: BG #440a0a, text #ffffff.

6.2 Links

Four styles:

1. Blue (#0000ee), no underline default, underline on hover, hover color #000000.
2. White (#ffffff), underline default, hover #000000.
3. Deep red (#b31b1b), no underline default, hover underline & black color.
4. Black (#000000), no underline default, hover underline & black.

6.3 Forms

Text Input

• BG #ffffff, text #000000, no border, radius 2px 0px 0px 2px, padding 0px 6px, inset shadow.

Select
Two variants:

• Border 1px solid #cccccc, radius 0, padding 0px 6px, inset shadow.
• Border 1px solid #767676, radius 0, padding 0px, no shadow.

No fancy focus states — very utilitarian.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-light-gray: #efefef;
  --color-blue-1: #1e8bc3;
  --color-deep-red: #a41919;
  --color-light-red-tint: #fff1f1;
  --color-bright-blue: #005fcc;
  --color-dark-maroon: #440a0a;

  /* Typography */
  --font-lucida-grande: "Lucida Grande", helvetica, arial, verdana;
  --font-arial: Arial, sans-serif;
  --font-verdana: Verdana, arial, helvetica;

  /* Font sizes */
  --fs-h1-lg: 40px;
  --fs-h1-md: 21.6px;
  --fs-link-lg: 16px;
  --fs-button-lg: 25px;
  --fs-button-md: 15.15px;
  --fs-caption-sm: 12px;
  --fs-link-sm: 10.1px;

  /* Spacing */
  --space-1: 1px;
  --space-1-6: 1.6px;
  --space-3: 3px;
  --space-3-03: 3.03px;
  --space-4: 4px;
  --space-4-32: 4.32px;
  --space-5: 5px;
  --space-5-66: 5.66667px;
  --space-6-72: 6.72px;
  --space-7-2: 7.2px;
  --space-8: 8px;
  --space-10: 10px;
  --space-10-08: 10.08px;
  --space-10-8: 10.8px;
  --space-12: 12px;
  --space-14-4: 14.4px;
  --space-16: 16px;
  --space-17-928: 17.928px;
  --space-96: 96px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-2: 2px;
  --radius-7-575: 7.575px;
  --radius-10: 10px;
  --radius-search-left: 2px 0px 0px 2px;
  --radius-search-right: 0px 10px 10px 0px;

  /* Shadows */
  --shadow-inset-sm: rgba(10, 10, 10, 0.1) 0px 1px 2px 0px inset;
}

8. AI Coding Assistant Prompt

# Arxiv Design System Specification

You are an Arxiv design expert. Build UIs matching their visual language exactly.

## Brand Context
Arxiv values academic minimalism and functional clarity. The design prioritizes information density, restrained color use, and system fonts for maximum accessibility and speed. Components are purpose-built with minimal decoration.

## Color Palette
- White: #ffffff — Base background, text inverse
- Light Gray: #efefef — Neutral surface backgrounds
- Blue 1: #1e8bc3 — Accent, hover/focus states
- Deep Red (Primary): #a41919 — Brand primary, borders, key accents
- Very Light Red Tint: #fff1f1 — Background accent for hover/focus
- Bright Blue: #005fcc — Accent, hover/focus states
- Dark Maroon: #440a0a — Button hover/focus backgrounds

## Typography
- Headings: "Lucida Grande", helvetica, arial, verdana
- Buttons: Arial, sans-serif
- Small text: Verdana, arial, helvetica

| Element     | Size    | Weight | Line Height | Use For            |
|-------------|---------|--------|-------------|--------------------|
| H1 Large    | 40px    | 400    | -           | Page titles        |
| H1 Medium   | 21.6px  | 700    | -           | Section headings   |
| Link Large  | 16px    | 400    | -           | Navigation links   |
| Button Large| 25px    | 400    | -           | Prominent CTAs     |
| Button Med  | 15.15px | 400    | -           | Secondary actions  |
| Caption Sm  | 12px    | 400    | 1.07        | Metadata           |
| Link Small  | 10.1px  | 400    | -           | Minor UI text      |

## Spacing & Grid
Base: 8px grid.  
Values: 1px, 1.6px, 3px, 3.03px, 4px, 4.32px, 5px, 5.66667px, 6.72px, 7.2px, 8px, 10px, 10.08px, 10.8px, 12px, 14.4px, 16px, 17.928px, 96px.

## Border Radius
- None: 0px — tables
- Sm: 2px — small buttons, inputs
- Md: 7.575px — donate button
- Lg: 10px — search inputs
- Search Left: 2px 0px 0px 2px
- Search Right: 0px 10px 10px 0px

## Shadows & Depth
Flat design. Only use `rgba(10, 10, 10, 0.1) 0px 1px 2px inset` for input fields.

## Component Specifications

### Primary Button (`btn-header-donate`)
Default: BG #ffffff, color #b31b1b, padding 3.03px 15.15px 0px, radius 7.575px, border 1px solid #b31b1b.  
Hover: BG #440a0a, color #ffffff.  
Active: color #000000.  
Focus: BG #440a0a, color #ffffff.

### Secondary Button (`button is-small is-cul-darker`)
Default: BG #711111, color #ffffff, padding 5px 12px, radius 2px, border transparent.  
Hover: BG #440a0a, color #ffffff.  
Focus: BG #440a0a, color #ffffff.

### Links
- Blue: #0000ee, no underline default, underline+black hover.
- White: #ffffff underline default, hover black.
- Deep Red: #b31b1b no underline default, underline+black hover.
- Black: #000000 no underline default, underline+black hover.

### Input Field
Default: BG #ffffff, color #000000, no border, radius 2px 0px 0px 2px, padding 0px 6px, inset shadow.

### Select Field
Variant 1: Border 1px solid #cccccc, radius 0px, padding 0px 6px, inset shadow.  
Variant 2: Border 1px solid #767676, radius 0px, padding 0px, no shadow.

## Layout & Responsive Rules
Breakpoints: 330px, 425px, 426px, 480px, 500px, 501px, 550px, 768px, 769px, 990px, 1023px, 1024px.

## Interaction Rules
No transitions specified; keep changes instant for speed. Focus indicators match hover states.

## DO List
- Use only colors from palette
- Maintain 8px grid (or fractional values from list)
- Use Lucida Grande for headings, Arial for buttons
- Keep borders thin (1px)
- Apply inset shadow only to inputs

## DON'T List
- Don’t add drop shadows to buttons/cards
- Don’t use rounded corners beyond 10px
- Don’t introduce new colors
- Don’t add animations unrelated to state changes

## Code Examples

### Primary Button
```css
.btn-header-donate {
  background: #ffffff;
  color: #b31b1b;
  padding: 3.03px 15.15px 0;
  border-radius: 7.575px;
  border: 1px solid #b31b1b;
  font-size: 15.15px;
}
.btn-header-donate:hover,
.btn-header-donate:focus {
  background: #440a0a;
  color: #ffffff;
}
.btn-header-donate:active {
  color: #000000;
}

Small Dark Button

.button.is-small.is-cul-darker {
  background: #711111;
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 2px;
  border: 1px solid transparent;
}
.button.is-small.is-cul-darker:hover,
.button.is-small.is-cul-darker:focus {
  background: #440a0a;
}

Input Field

.input-text {
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: 2px 0 0 2px;
  padding: 0 6px;
  box-shadow: rgba(10, 10, 10, 0.1) 0px 1px 2px inset;
}

---

## 9. Summary

**TL;DR** — Arxiv’s design system is academic minimalism made digital: deep reds for brand cues, system fonts for speed, an 8px grid with tight fractional spacing, and flat components with minimal decoration. It’s built to get out of the way and let the content carry the experience.

**Brand Keywords**  
- academic-minimalist  
- functional-clarity  
- restrained-color  
- flat-utilitarian  
- content-first