Smileybones Design System from arXiv
Smileybones Design System from arXiv
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.
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 tells staff which context they are working in.
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.
Link colors signal "you can act on this" and are a foundational part of accessibility. All link colors maintain accessible contrast levels with their background color in light and dark mode. In addition, inline links are always underlined and color is not the only signal.
Meets accessibility guidelines WCAG 2.2 SC 1.4.3 Contrast (Minimum) (Level AA) and WCAG 2.2 SC 1.4.1 Use of Color (Level A)
--ds-link
All interactive links. Author names, category links, DOIs.
--ds-link-hover
Link hover state.
--ds-link-visited
Visited link state.
Meets accessibility guideline WCAG 2.2 SC 1.4.11 Non-text Contrast (Level AA)
--ds-focus-ring
Keyboard focus indicator on the page, in light and dark mode.
--ds-focus-ring-on-dark
Required on Repository Brown surfaces, where the standard ring is invisible.
Tints and shades are used in a variety of ways: to define page areas and boundaries, to fill components, and to indicate disabled states. They come in two color families, warm brown and cool blue, which can be used to establish two kinds of content on complex pages. As an example, blue tints are used on HTML papers to distinguish content that belongs to arXiv (DOI, citation tools, and more) while author-created content belongs on the warm tints and white.
| Color and tokens | Light | Dark | Why it exists |
|---|---|---|---|
Canvas --ds-canvas |
|
|
The ground of every page and the footer. In dark mode the page is Repository Brown. |
Warm Tint --ds-tint-warm --ds-surface-hover |
|
|
The warm tint: the secondary page band, data cards, the table header row, row headers, striped rows, notes, tags, and the disabled button fill. Also the hover fill on a white surface. |
Accent Tint --ds-tint-accent --ds-accent-surface |
|
|
The accent tint on public pages: selected table rows and a pressed button. Also the ground of a panel arXiv adds over the paper: a popover, a dropdown, the reader footer band. |
Accent Tint, internal --ds-tint-accent |
|
|
The accent tint in internal tools: selected table rows and a pressed button. Inside .ds-internal, the accent tokens take Access Lime values. |
Accent Wash --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. |
Accent Hover --ds-accent-hover --ds-accent-border |
|
|
The hover step of an Open Blue fill, which takes --ds-text-on-accent like the fill it hovers from, and the edge of a panel arXiv adds over the paper. |
Border --ds-border |
|
|
Hairlines on inputs and cards, pressed fills, pill borders, the footer edge. Decorative only: it is below 3:1, so it is never the only edge of a control, and body-size grey text and links miss AA on it. |
Strong Border --ds-border-strong |
|
|
The edge of a control: input borders, switch edges, sort arrows. The one grey that clears 3:1 on white, which is what the edge of a control needs. |
Disabled Text --ds-text-disabled |
|
|
Disabled text only. A disabled control is exempt from contrast requirements. |
background: var(--ds-tint-warm);
background: var(--ds-tint-accent);.ds-internal. A component uses the token and gets the right colour on each surface.--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."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.
No near-whites lighter than Warm Tint. If a lighter step is genuinely needed, add it to color-mapping.md first rather than inventing one locally.
A component fill uses a tint or a status color. A new fill color is discussed with the design team first.
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 |
|---|---|---|
| Canvas · Warm Tint · Accent Tint | Repository Brown, Library Grey, Link Blue / Link Hover, Archival Blue, Visited Purple | Strong Border |
| Accent Wash #d2eafe | Repository Brown, Library Grey, Link Blue / Link Hover, Archival Blue, Visited Purple | Library Grey |
| Border #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.
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 Warm Tint — 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