Frontiersin Design System Deep Dive

1. Brand Overview

Frontiersin sits in a very specific space: science-led, publisher-driven, but with a UX that wants to feel accessible to anyone hunting down research. You’re not looking at “design for design’s sake” here — almost everything is driven by clarity and utility. The site’s visual tone is clean, academic, and restrained, but there’s a splash of bold corporate blue in just the right spots to signal actions. This is a brand aimed squarely at researchers, academics, and a curious public base who need trustworthy content, not lifestyle fluff.

The first impression? Solid and institutional, without being museum-stuffy. That’s thanks to the MuseoSans family — a geometric sans that’s professional yet avoids the hardness of something like Helvetica Neue UltraLight — and a highly structured 8px spacing grid. You can feel it in the layout: predictable, calming, no surprise pixel gaps.

What’s notable is their approach to interaction color: the main blue (#0c4ded) pops against the primarily neutral (#ffffff, #6b6b6b, #545454) backgrounds. It’s a strong “action color” that always reads correctly, while all other text and surface treatments stick with grayscale values. Unlike lifestyle brands that fling 6–8 accent colors around, Frontiersin keeps it lean. This builds trust — everything colorful means something.

Buttons and links follow a strict hierarchy: blue = interactive primary, grey = secondary, white backgrounds for content bodies. Rounding is present but not overdone — you’ll see 8px radius on cards and small components, then big pill shapes (32px, 96px) for call-to-action buttons. Shadows are used sparingly — mostly subtle, multi-layer rgba stacks for modals or focused states — reinforcing the flat, minimal look.

If their design philosophy had to be boiled down:

• Function over flourish.
• Emphasis on clarity and trust.
• Keep structure tight via grid and type scale.
• Let color speak only when it’s meant to guide.

2. Color System

2.1 Primary Colors

The core brand color is #0c4ded — a saturated blue with a touch of depth. This is pure CTA territory: buttons, cookie/settings links, action confirmations. Psychologically it’s a safe corporate blue, but intense enough to suggest urgency (“click this now”). Compared to a competitor like PLOS ONE, which uses softer blues and more tonal variation, Frontiersin’s palette is more directive — there’s less room for ambiguity.

Interestingly, while --maincolor50 = #003bde and --maincolor30 = #3673f7 exist in CSS variables, the site consistently uses #0c4ded for live UI interactions. The variable blues (--maincolor…) appear staged for gradients, hover states, or thematic pages, suggesting a broader system in the background.

2.2 Complete Palette

2.3 Color Relationships

The neutrals anchor everything — text (#6b6b6b, #545454) sits on white surfaces, with blue reserved for actions. Both primary blue #0c4ded and deep blue #003bde pass WCAG contrast against white easily (over 5:1). Even white text on the navy blues has the necessary contrast — they’re not flirting with accessibility failures. The only caution: grey text on light-blue backgrounds would need testing; they haven’t built those combinations in high frequency.

2.4 Usage Guide

Works well:

• #0c4ded + #ffffff for buttons — crisp and legible
• Deep blues (--maincolor50) for hover states — clearly a change
• Greys as text over pure white surfaces
• Navy shades for large panels, with white link text

Avoid:

• Grey text over pastel blues — could drop contrast
• Using too many blues in one view — reduces the action signal value

3. Typography

3.1 Font Families

Everything runs on MuseoSans, a clean geometric sans, with fallbacks to system staples Helvetica and Arial. No Google Fonts, no Adobe subscription — likely self-hosted. This fits the academic publisher vibe: unique, professional, but safe if web font fails.

3.2 Type Scale

3.3 Hierarchy

Large jumps in size (56 → 32px) set strong page titles vs subheads; weights shift to signal emphasis without relying on color. The consistent 16px body/link/button size works across devices, making scaling predictable. The smaller captions are still readable because MuseoSans holds shape well at small sizes.

4. Spacing & Layout

4.1 Spacing Scale

8px grid confirmed — values are clean multiples (4px exists, but less common).

Full list with counts: 1px (7 uses), 2px (4), 4px (10), 5px (7), 6px (15), 8px (34), 10px (13), 11.2px (6), 12px (16), 15px (3), 16px (54), 18px (3), 20px (3), 24px (87), 32px (9), 40px (7), 48px (3), 56px (7), 72px (2), 80px (3).

This frequency distribution screams: 16px and 24px are the everyday gaps (button padding, card interior padding, section spacing).

4.2 Layout

Breakpoints: fine-grained — mobile from 359px up, desktop up to 1921px. This is obsessive responsive tuning — they’re designing for weird intermediate widths (426px, 476px, 550px, etc.) to keep content clean no matter the viewport.

5. Visual Elements

• Border Radius: Ranges from hard-edged (1px, 2px) to fully pill (32px, 96px). Common card/input radius = 8px. CTA buttons go 32px or even 96px for a pill look.
• Shadow: Only a handful, mostly multi-stack rgba shadows for modals/focus indicators. Normal runtime is flat — the shadows are subtle depths, not dramatic drop shadows.
• Borders: 1px solid dominates — in grey tones for dividers (#d5d5d5, #a2a2a2), or blues for active states.

6. Components

6.1 Buttons

Primary CTA (BypassBlock__button)

• Default: bg #003bde, white text, padding 6px 16px, radius 32px. No shadow.
• Font: MuseoSans, 14px, weight 500.
• Hover/Focus: Not defined in data (likely stays blue).
• Opinion: 32px radius makes it friendly, crisp.

Secondary Border (Ibar__button)

• Default: transparent bg, grey text #545454, padding 5px 16px, radius 16px, border 1px solid #545454.
• Hover: opacity 0.6, text blue (#003bde), bg white.
• Active: blue to greenish bg (odd).
• Focus: complex shadow stack, bg #1eaedb, border black.

Filter Pill (FilterButtonsSelect__filterItem)

• Default: bg grey #545454, white text, radius 96px, border 1px solid #d5d5d5.
• Hover: bg #003bde, text blue (!), opacity 0.9 — inconsistent text contrast here.
• Focus: turns bg #1eaedb, border black.

Consent / Inline Primary

• Default: bg #0c4ded, white text, padding 8px 24px, radius 32px, border matches bg.

6.2 Links

All are text-decoration:none by default, underline only for blue (#0c4ded) strong links. Hover tends to set color to #3860be.

6.3 Forms

Single text input style:

• Default: bg navy #001991, white text, 8px radius, border white 1px.
• Padding: 18px top, 16px right/left, 6px bottom (label above field?).
• Focus: bg #1eaedb, border black with outline, subtle shadow.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --neutral-dark: #6b6b6b;
  --neutral-medium: #545454;
  --neutral-black: #000000;
  --neutral-white: #ffffff;
  --action-blue: #0c4ded;
  --accent-blue-medium: #0092d1;
  --maincolor0: #eef5ff;
  --maincolor5: #cee1ff;
  --maincolor10: #aecbff;
  --maincolor20: #6d9efd;
  --maincolor30: #3673f7;
  --maincolor50: #003bde;
  --maincolor55: #0035d4;
  --maincolor60: #002fca;
  --maincolor70: #0024b0;
  --maincolor80: #001991;
  --maincolor90: #001959;

  /* Typography */
  --font-family-base: 'MuseoSans', Helvetica, Arial;
  --font-size-h1: 3.50rem;
  --font-size-body: 1.00rem;
  --font-size-caption: 0.88rem;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11.2px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-72: 72px;
  --space-80: 80px;

  /* Border Radius */
  --radius-sm: 1px;
  --radius-md: 8px;
  --radius-lg: 32px;
  --radius-pill: 96px;

  /* Shadows */
  --shadow-modal: rgba(40,40,40,0.12) 0px 8px 10px, rgba(40,40,40,0.08) 0px 3px 14px;
}

8. AI Coding Assistant Prompt

# Frontiersin Design System Specification

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

## Brand Context
Frontiersin focuses on clarity, trust, and function-first design for academic publishing. Minimal color use keeps emphasis on content. Structure is enforced via an 8px grid and a consistent MuseoSans typography scale.

## Color Palette
- Neutral Dark: #6b6b6b — Body text, links
- Neutral Medium: #545454 — Section headers, secondary text
- Neutral Black: #000000 — High-contrast outlines/focus rings
- Neutral White: #ffffff — Backgrounds, text on dark surfaces
- Action Blue: #0c4ded — Primary buttons, CTAs, key interactive elements
- Accent Blue Medium: #0092d1 — Hover/focus accents
- maincolor0: #eef5ff — Background tints
- maincolor5: #cee1ff — Light blue accent
- maincolor10: #aecbff — Pastel blue accents
- maincolor20: #6d9efd — Info sections
- maincolor30: #3673f7 — Gradient mid blue
- maincolor50: #003bde — Hover for primary CTA
- maincolor55: #0035d4 — Deep hover variant
- maincolor60: #002fca — Deep backgrounds
- maincolor70: #0024b0 — Dark nav
- maincolor80: #001991 — Input backgrounds
- maincolor90: #001959 — Footer/nav deep bg

## Typography
Font family: "MuseoSans", Helvetica, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 56px | 500 | 1.20 | Page titles |
| H2 | 32px | 500 | 1.38 | Section headings |
| H3 | 28px | 500 | 1.39 | Content subheads |
| H4 | 24px | 400 | N/A | Smaller headings |
| Body | 16px | 400 | N/A | Article text |
| Caption | 14px | 500 | 1.37 | Figure captions |

## Spacing & Grid
Base: 8px grid.
Values: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 56px, 72px, 80px.

## Border Radius
- none: 0px — tables, strict containers
- sm: 1px — spans
- md: 8px — inputs, cards
- lg: 32px — pill buttons
- pill: 96px — CTA buttons, filters

## Shadows & Depth
Minimal shadows. Primary modal shadow:
rgba(40,40,40,0.12) 0px 8px 10px,
rgba(40,40,40,0.08) 0px 3px 14px.

## Component Specifications
Primary Button:
```css
.btn-primary {
  background: #003bde;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 32px;
  font-weight: 500;
  font-size: 14px;
  border: none;
}
.btn-primary:hover { background: #003bde; }
```

Secondary Button:
```css
.btn-secondary {
  background: transparent;
  color: #545454;
  padding: 5px 16px;
  border-radius: 16px;
  border: 1px solid #545454;
}
.btn-secondary:hover {
  color: #003bde;
  background: #ffffff;
}
```

Input Field:
```css
.input-text {
  background: #001991;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 8px;
  padding: 18px 16px 6px;
}
.input-text:focus {
  background: #1eaedb;
  border-color: #000000;
}
```

## Layout & Responsive Rules
Breakpoints: 359px, 400px, 425px, 476px, 530px, 768px, 1024px, 1280px, 1441px, 1720px, 1921px.

## Interaction Rules
- State changes: ~150ms ease
- Focus: visible outline or shadow per data
- Hover: color change in CTA blue tokens

## DO
- Use only colors from the palette
- Maintain 8px grid
- Use MuseoSans for all text
- Keep hover blues darker than base action blue
- Show clear focus states

## DON'T
- Invent new accent colors
- Mix random corner radii
- Overuse shadows
- Use grey text over pastel blue backgrounds

## Code Examples
Primary Button in Tailwind:
```html
<button class="bg-[#003bde] text-white py-[6px] px-[16px] rounded-[32px] font-medium text-sm">Click me</button>
```

Card Component:
```html
<div class="bg-white rounded-[8px] p-6 shadow-[rgba(40,40,40,0.12)_0px_8px_10px]">Content here</div>
```

Form Input:
```html
<input type="text" class="bg-[#001991] text-white border border-white rounded-[8px] py-[18px] px-[16px] focus:bg-[#1eaedb] focus:border-black"/>
```

9. Summary

TL;DR: Frontiersin’s design is content-first, with a disciplined use of blue as the sole action signal, MuseoSans for all typography, and an 8px grid maintaining structural sanity. Rounded shapes soften CTAs, while most of the interface stays flat with subtle shadows only when absolutely necessary.

Brand Keywords:

• academic-functional
• trust-neutral
• grid-disciplined
• action-minimal