The full arXiv palette, rendered. Written spec and rationale: color-mapping.md (source of truth — if this page and the spec disagree, the spec wins). Hard rules live in DESIGN-POLICIES.md: all colors come from this palette; no one-off hex values.
arXiv's defining brand colors grouped by prominence and role. These key colors are expanded upon in the design system with additional tints and shades, but the identity remains consistent.
#a5d6fe
--ds-accent
arXiv's primary brand color. Featured in public primary buttons and as an accent color. Lighter tints appear as background colors on public pages.
#1c1a17
--ds-text
arXiv's text workhorse clears accessibility guidelines on every approved surface. In addition, Repository Brown is also used for the primary header background and dark mode background.
#1f5e96
--ds-accent-strong
Brand accent blue; public section headings.
#6b6459
--ds-text-muted
Secondary text, labels, muted interactive elements. Every warm tint is a step of Library Grey toward white.
#ffe000
--ds-smileybones-yellow
The color of arXiv's smileybones mascot. Used sparingly on marketing materials and on secondary platforms like the blog. Fails text contrast, use for fills and graphics only.
#c4d82e
--ds-accent
Access Lime signals that "you are in an internal tool." It is not used on public pages. Fails text contrast, use for fills, borders, icons and graphics only.
These colors harken back to arXiv's legacy as part of Cornell University. Campus Red is Cornell's primary brand color, while Publishing Pink was a complement color to make it our own. Campus Red can still be found in arXiv's primary logomark which was developed and trademarked in 2021. Since the arXiv spinout these colors are used sparingly when we need to reference our history or are co-branding with Cornell University.
#b31b1b
The X in the logo mark; very occasional accent. Never headers, buttons, large fields, or text. No token: it is drawn in the logo, not written in a stylesheet.
#fb595a
Rare: time-limited announcements, celebratory accents. Never errors or body text. No token.
Do not cross Open Blue and Access Lime
Access Lime never appears on public pages; Open Blue never on internal tools. The color difference is functional and quickly informs the user staff which context they are working in.
Colors that signal "you can act on this." Link-vs-body contrast fails 3:1, so inline links are also underlined — color is never the only signal (WCAG 1.4.1). Link Blue is its own blue, not a brand blue: Open Blue is 1.5:1 on white and cannot carry text at all, and Archival Blue is reserved for headings, so links take a darker blue chosen for reading.
Text links
#1565c0
--ds-link
All interactive links, light mode. Author names, category links, DOIs.
#1050a0
--ds-link-hover
Link hover state.
#7b2fbe
--ds-link-visited
Visited link state.
Focus indicators
#1565c0
--ds-focus-ring
Keyboard focus indicator on light surfaces.
#64b5f6
--ds-focus-ring-on-dark
Required on Repository Brown surfaces, where the standard ring is invisible.
Tints for section depth without hard borders fall into two families: warm-toned and cool-toned, following our two primary brand colors.
Every warm tint is Library Grey stepped toward white; the number in the token is the percentage. Three are grounds and edges; two darker steps have jobs of their own, the edge of a control and disabled text.
#f8f7f7
--ds-grey-5
--ds-canvas
The page ground behind everything. Footer, metadata bands, internal page background.
#f0f0ee
--ds-grey-10
--ds-surface-muted
A secondary band one step down from the page, a hover fill, the disabled button fill.
#dad8d6
--ds-grey-25
--ds-border
--ds-border-muted
Component hairlines — inputs, tracks, card edges — and the deepest warm fill: pressed states, pill borders, the footer edge. Decorative only (below 3:1); never the sole boundary of an interactive control, and body-size grey and links miss AA on it.
#aeaaa4
--ds-grey-55
--ds-text-disabled
Disabled states only — exempt from contrast requirements.
#89837a
--ds-grey-80
--ds-border-strong
The edge of a control: input borders, switch tracks, sort arrows. The one grey that clears 3:1 on white, which is what a control's boundary needs.
Every cool tint is Open Blue stepped toward white: light blues reserved for arXiv-added chrome layered over content — popovers, the TOC dropdown, active inline states, the read-aloud highlight, the reader footer band. The recognizable rule: light blue = arXiv chrome speaking, not the paper.
#edf7ff
--ds-blue-20
--ds-accent-surface
The ground of a popover, a dropdown, the reader footer band.
#d2eafe
--ds-blue-50
--ds-accent-wash
The deepest chrome blue that still holds AA for body text: an active inline anchor, a hover inside a panel, the read-aloud highlight.
#c0e2fe
--ds-blue-70
--ds-accent-hover
--ds-accent-border
The hover step of an Open Blue fill, carrying --ds-text-on-accent like the fill it hovers from, and the edge of a chrome panel. Inside .ds-internal both roles take the lime values instead.
--ds-
token. The hex values on this page are specimens to read, not values to paste into a
stylesheet. A color with no token is not available to build with.verification/check-contrast.py fails if a token change ever breaks one. That is
the reason to take colours from tokens and never to override one: a hex typed by hand is a
pairing nobody has checked.Dark-mode status and mechanics live on the dark mode page.
The backgrounds above, sorted by the job they do. Reach for the named token. If your job is not listed, that is a color-mapping.md question — not a new value (see the three tiers below).
| The job | Reach for | Where it shows up |
|---|---|---|
| Page / section background, warm | Warm Wash --ds-canvas | The default subtle ground — footer, metadata bands, internal page background |
| Secondary content band | Card Grey --ds-surface-muted | Related band, reader header — one step down from the page, no hard border needed |
| Card surface / hover fill | Card Grey --ds-surface-muted | Card fills and hover fills — same tint as the secondary band, doing a smaller job |
| Active / pressed fill, deepest warm band | Border Light --ds-border-muted | Footer edge, pressed states, pill borders. The darkest warm tint — body-size grey text and links miss AA here (use Repository Brown or Link Hover) |
| Decorative hairline | Border Light --ds-border | Input / card / track edges. Below 3:1 — never the sole boundary of an interactive control |
| arXiv chrome floating over paper | Tint Light + Open Blue Bright --ds-accent-surface --ds-accent-border | Popovers, the TOC dropdown, the reader footer band — the "light blue = arXiv speaking, not the paper" rule (G4) |
| Inline active anchor · read-aloud highlight · panel hover | Active Wash --ds-accent-wash | The deepest arXiv-chrome blue that still holds AA for normal-size text |
| Open Blue hover step | Open Blue Bright --ds-accent-hover | Hover state for Open Blue primary fills |
| Public primary action fill | Open Blue --ds-accent | The one brand fill that carries Repository Brown text at AA (11.3:1) — see pairings below |
| Status surface (success / info / warning / error) | the status tints | See Status and alerts above — each pairs with a distinct icon and leading word |
No near-whites lighter than Warm Wash. If a lighter step is genuinely needed, add it to color-mapping.md first rather than inventing one locally.
"No one-off hex values" has three tiers. Tier 1 — palette tokens (everything on this page): free to use in their documented roles. Tier 2 — component-internal constants: a handful of values that exist only inside a component's own CSS — the button-border gradient stops, the dark header's hover and divider shades. They are part of those components, not the palette; do not lift them for new uses. Tier 3 — everything else: does not exist. If a new value seems needed, it is a color-mapping.md change, not a local invention.
Recommended pairings
The recommended set — what to reach for on each surface. It is deliberately not exhaustive: any pairing not listed here, and any new tint, must be checked against WCAG AA before use (4.5:1 normal text; 3:1 large text and UI boundaries).
| On this surface | Text & links | UI borders |
|---|---|---|
| White · Warm Wash · Card Grey · Tint Light | Repository Brown, Library Grey, Link Blue / Link Hover, Archival Blue, Visited Purple | UI Boundary Grey |
| Active Wash #d2eafe | Repository Brown, Library Grey, Link Blue / Link Hover, Archival Blue, Visited Purple | Library Grey |
| Border Light #dad8d6 | Repository Brown, Link Hover, Archival Blue, Visited Purple | Library Grey |
| Open Blue #a5d6fe | Repository Brown | Repository Brown |
Repository Brown is the workhorse — it clears AA on every approved surface, which is why buttons set Repository Brown on Open Blue.
Buttons change clothes on tinted surfaces
The secondary button's white fill reads as "primary" against a tinted band, so tinted
sections add the .on-tint
modifier: the fill swaps to Card Grey — same luminance as the surface, warm hue —
so the button reads as secondary through warm-on-cool material difference, not through
low contrast. Live from the button pattern:
On white — default secondary
On a tinted band — add .on-tint