Design System Inspiration of Fever
1. Visual Theme & Atmosphere
Fever calls itself "the leading global live-entertainment discovery tech platform", helping
millions of people each week find experiences in their cities, "with a mission to democratize
access to culture and entertainment in real life". Its careers page counts 3,000+ employees of 56+
nationalities, a campus in Madrid, local offices in more than 15 cities and a platform in more than
150 cities. The contracting company is Fever Labs Inc., a Delaware corporation with offices at
50 Greene St, New York.
The site is photographic and dark-on-light: a full-bleed video hero ("Experience your city"), then
an off-white page #fafbfb of plan cards, near-black ink #031419, a blue #0079ca
for primary actions, and hot magenta #eb0052 for alerts and badges. Type is Montserrat.
What makes it worth reading:
- Component-scoped tokens. 608
--fv-* properties named by component and role —
--fv-plan-view-color-action-background-primary, --fv-text-field-focus-box-shadow,
--fv-order-reschedule-*, --fv-voucher-card-*.
- A blue-grey neutral ramp.
#031419, #06232c, #2c4751, #536b75, #a7b2ba, #ccd2d8.
- Paired weak tints. Each status has a weak background — primary
#e6f4ff, accent #f0ebfd,
positive #e8f8f0, danger #fff0f4.
Primary tasks
- Pick a city; filter plans by category.
- Open a plan and buy tickets.
2. Color Palette & Roles
Measured with getComputedStyle on feverup.com/en and /en/madrid: 617 root custom properties,
608 of them --fv-*. All first-party.
Blue (primary)
- Primary (
#0079ca) — --fv-button-primary-background, --fv-plan-view-color-action-*-primary.
- Primary hover (
#0068b0) — --fv-plan-view-button-background-primary-hover; the text field's
focus border.
- Primary weak (
#e6f4ff) · Focus glow (#add4ee, a 4px text-field shadow).
Ink and neutrals
- Ink (
#031419) — light-button and chip text · Black (#000405) — the selected chip.
- Main contrast (
#06232c) — dark buttons · Subtle contrast (#2c4751).
- Text secondary (
#536b75) · Text disabled (#a7b2ba).
- Canvas (
#ffffff) · Surface (#fafbfb) · Surface subtle (#f2f3f3) · Border
(#ccd2d8).
Accent and status
Accent #6f41d7 · Accent weak #f0ebfd · Danger #eb0052 · Success #18824c ·
Warning #9f5800.
3. Typography Rules
Font family
Montserrat (400, 600), Montserrat, sans-serif, loaded (document.fonts).
Scale
Body and links 16px/400; chips 14px/600.
4. Component Stylings
Measured on the Madrid city page, focus read under a real Tab key and a hover counted only when
:hover matched. The consent banner offered only "Accept" and was never answered.
- Selected chip — All:
#000405, #fafbfb 14px/600, 64px radius, 38px. Hover no change;
focus a 2px #000405 outline.
- Chip — Live Music and others: white,
#031419 label, #a7b2ba border. Hover #fafbfb;
same focus.
- See all —
#031419 16px. Hover and press turn it #536b75 and underline.
Radius
64px chips, 32px city search, 100px buttons.
5. Layout Principles
- A white header with city picker, a video hero with search, then rows of plan cards and category
chips.
6. Depth & Elevation
Flat cards on #fafbfb; the hero is photographic.
7. Do's and Don'ts
Do
- Use
#0079ca for primary actions with #0068b0 hover.
- Keep ink and neutrals on the blue-grey ramp.
- Pair every status colour with its weak tint.
Don't
- Don't use pure black text; the ink is
#031419.
- Don't use magenta
#eb0052 for actions; it is danger and alerts.
- Don't drop the 2px chip focus outline.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. Agent Prompt Guide
Quick Color Reference
#0079ca blue · #0068b0 blue hover · #031419 ink · #536b75 secondary · #fafbfb surface ·
#ccd2d8 border · #6f41d7 accent · #eb0052 danger
Example Component Prompts
- "38px pill chips in Montserrat 14px/600: selected
#000405 with #fafbfb text, others white with
a #a7b2ba border tinting #fafbfb on hover."
- "A text field with a 2px
#0068b0 focus border and a 4px #add4ee glow."
10. Voice & Tone
Not assessed as authored voice.
11. Brand Narrative
Fever turns a city into a menu of things to do — music, sports, culture, pop-ups — and its
interface steps back behind photography: off-white, blue-grey ink, one blue for buying and magenta
for urgency.
12. Principles
- Culture for everyone. The mission it states.
- Components own their tokens.
- Weak and strong pairs.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Hover: chips tint #fafbfb; links turn #536b75 and underline. Focus: 2px outlines on chips; a
2px #0068b0 border and #add4ee glow on text fields (tokens).
15. Motion & Easing
Not measured.
Tier 1 sources: https://feverup.com/en/madrid (live city page — 617 root custom properties read via getComputedStyle; Montserrat loaded; three components measured at rest, hover, pressed and focus, captured 2026-09-26); https://feverup.com/en/zz-this-does-not-exist (nonsense-path control — HTTP 404 in the browser, read 2026-09-26); https://feverup.com/legal/terms_en.html (Terms — Fever Labs Inc., Delaware corporation, offices at 50 Greene St, New York, read 2026-09-26); https://careers.feverup.com/ (careers — mission, 3,000+ employees, campus in Madrid, 150+ cities, read 2026-09-26)