ScholarOne Design System — Pattern Library

1. Design Tokens — Colors

All colors are CSS custom properties defined in :root. Use the variable names, never raw hex values.

accessibility_new Accessibility

This color system is designed to meet WCAG 2.2 Level AA contrast requirements. Every foreground/background pairing has been audited to ensure a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text and UI components. Use --gray-500 or darker for any text that conveys information; --gray-400 is reserved for placeholder text and decorative elements only.

Brand

--primary

#1966d2

--primary-dark

#11508c

--primary-light

#e8f0fe

Semantic

--success

#15803d

--success-bg

#f0fdf4

--warning

#b45309

--warning-bg

#fffbeb

--error

#b91c1c

--error-bg

#fef2f2

--info

#2563eb

--info-bg

#eff6ff

Gray Scale

--gray-50

#f8f9fa

--gray-100

#f0f1f3

--gray-200

#e5e7eb

--gray-300

#d1d5db

--gray-400

#9ca3af

--gray-500

#6b7280

--gray-600

#4b5563

--gray-700

#374151

--gray-800

#1f2937

--gray-900

#1a1a2e

Extended Palette

--purple

#7c3aed

--purple-bg

#f3e8ff

--amber

#b45309

--amber-bg

#fef3c7

--blue-dark

#1d4ed8

--blue-bg

#dbeafe

2. Typography

Primary font: Roboto (400, 500, 700). Monospace for manuscript IDs: Roboto Mono.

Page Title — 24px / 700

Section Heading — 20px / 700

Component Label — 15px / 700

Body Text — 14px / 400

Body Medium — 14px / 500

Secondary Text — 13px / 400 / gray-500

Caption — 12px / 400 / gray-500

Section Label — 11px / 700 / uppercase / gray-400

JEM-2025-1847 — Manuscript ID (monospace / 13px / 600 / primary)

3. Status Badges

Used in queue tables and manuscript lists. Classes: .status-badge + .urgent | .warning | .info | .success

error Overdue schedule Due Soon hourglass_top In Review check_circle Complete

<span class="status-badge urgent"> <span class="material-symbols-outlined">error</span> Overdue </span>

4. Status Dot Indicator

Inline colored dot + descriptive text. Used in Gateway table STATUS columns as an alternative to the pill-style status badges. Class: .status-dot + state modifier.

Gateway live app — This pattern matches the live production app. In Gateway, it's implemented with DaisyUI + Tailwind CSS + Alpine.js.

Status Dot Variants

Make Decision — 9 days overdue Awaiting Referee Reports — due in 3 days Review Complete Submitted — under review Draft — not yet submitted

In a Table Context

Manuscript	Status	Days
EJP-109449 A third resonance in the damped oscillator	Make Decision — 9 days overdue	12 days
NJP-119321 Performance of Parity QAOA	Invite Referees — due in 5 days	25 days
QST-104090 Monitoring photonic linear clusters	Review Complete	8 days

Comparison: Dot vs Badge

Status dots (.status-dot) are used in Gateway table rows where space is tight and the status text itself is descriptive. Status badges (.status-badge) are the pill-style indicators used in prototypes and contexts where a compact label is needed. Both use the same semantic color tokens.

<span class="status-dot overdue">Make Decision — 9 days overdue</span> <span class="status-dot warning">Awaiting Reports — due in 3 days</span> <span class="status-dot on-track">Review Complete</span> <span class="status-dot in-progress">Submitted — under review</span> <span class="status-dot neutral">Draft — not yet submitted</span>

5. Health Status Badges

Pill badges for journal health indicators on the analytics dashboard. Used inline with section titles. Classes: .gw-health-badge + .critical / .warning / .good

Gateway live app — This pattern matches the live production app. In Gateway, it's implemented with DaisyUI + Tailwind CSS + Alpine.js.

Badge Variants

Critical Warning Good

Health Cards (In Context)

Submission Volume

Critical

Comparing submission counts between quarters

Editorial Quality

Good

Acceptance rate stability indicates healthy editorial process

Process Efficiency

Good

Time to decision trends affect author satisfaction

Activity Level

Warning

Recent submission activity indicates declining engagement

<div class="gw-health-card"> <div class="gw-health-card-header"> <h4>Submission Volume</h4> <span class="gw-health-badge critical">Critical</span> </div> <p>Comparing submission counts between quarters</p> </div>  <span class="gw-health-badge good">Good</span>

6. Article Type Badges

Used in queue rows. Classes: .article-type-badge + type modifier.

Special Issue Clinical Trial Review Original Research

<span class="article-type-badge special-issue">Special Issue</span>

7. Match Score, Load, & Value Indicators

Used in reviewer tables and grid cards. Semantic coloring based on quality tier.

Match Badges

92% 74% 45%

Load Indicators

Light Moderate Heavy

Value Indicators

14 days 21 days 38 days

85% 62% 28%

Editorial Board Badge

verified Board Member

8. Recommendation & Review Badges

Used in decisions page and manuscript detail.

Recommendation Badges

check_circle Accept edit Minor Revisions rate_review Major Revisions cancel Reject compare_arrows Split

Review Dots (completion indicators)

Timeline Badges (history page)

Accept Minor Major Reject

9. Keyword Tags

Two sizes: compact for table rows, standard for flyout panels.

Table size (.keyword-tag)

Immunotherapy Melanoma Clinical Trials

Flyout size (.flyout-keyword)

10. Buttons

General purpose and flyout action buttons.

General Buttons

Flyout Buttons (flex: 1, fill footer)

AI Chat FAB

auto_awesome Ask AI Assistant

11. Search & Filter Bar

Search across manuscripts and filter results by urgency, status, type, and other attributes.

Search Box

Filter Toolbar

Filter Panel (Expanded)

<div class="gw-filter-toolbar"> <button class="gw-filter-toggle active"> <span class="material-symbols-outlined">filter_list</span> Hide filters </button> <div class="gw-search-input"> <span class="material-symbols-outlined">search</span> <input type="text" placeholder="Search..."> </div> </div>  <div class="gw-filter-panel"> <div class="gw-filter-panel-header"> <h3>Filters</h3> </div> <div class="gw-filter-group"> <div class="gw-filter-group-label">Urgency</div> <label class="gw-filter-option"> <input type="checkbox"> <span class="status-dot overdue">Overdue</span> <span class="gw-filter-count">69</span> </label> </div> </div>

12. Tab Bar — Gateway (Underline Style)

Horizontal tabs with underline indicator, icons, and count badges. Matches the live Gateway Editor Center and Dashboard tabs. Classes: .gw-tab-bar, .gw-tab, .gw-tab-count

Gateway live app — This pattern matches the live production app. In Gateway, it's implemented with DaisyUI + Tailwind CSS + Alpine.js.

Editor Center Tabs (with count badges)

Simple Tabs (no badges)

Count Badge Variants

42 .urgent 3 .success 12 .info 70 .neutral

<div class="gw-tab-bar"> <button class="gw-tab"> <span class="material-symbols-outlined">notifications</span> Needs Action <span class="gw-tab-count urgent">42</span> </button> <button class="gw-tab active">All Manuscripts <span class="gw-tab-count neutral">70</span> </button> </div>

13. Flyout Panel (right rail)

480px wide panel that slides from the right. Used for reviewer details, manuscript previews, and decision forms.

14. Modal / Dialog

Centered overlay dialog for confirmations, forms, and detail views. Includes backdrop, header with close button, scrollable body, and action footer. Classes: .gw-modal-backdrop, .gw-modal, .gw-modal-header

Gateway live app — This pattern matches the live production app. In Gateway, it's implemented with DaisyUI + Tailwind CSS + Alpine.js.

Confirmation Dialog

Wide Variant (for forms)

<div class="gw-modal-backdrop"> <div class="gw-modal"> <div class="gw-modal-header"> <h3>Confirm Decision</h3> <button class="gw-modal-close"> <span class="material-symbols-outlined">close</span> </button> </div> <div class="gw-modal-body"> Dialog content here... </div> <div class="gw-modal-footer"> <button class="btn btn-ghost">Cancel</button> <button class="btn btn-primary">Confirm</button> </div> </div> </div>  <div class="gw-modal wide">...</div>

15. Toast Notification

Fixed bottom-center. Dark background with success icon.

check

Invitation Sent

Dr. Michael Johnson has been invited to review

16. View Toggle

Switch between table and grid/card views. Used in invite-reviewers and all-manuscripts.

17. Pagination

Navigate between pages of results. The prototype uses numbered page buttons; the live Gateway app uses a summary + per-page dropdown + page navigation pattern. Both are valid; use whichever matches your context.

Numbered Pages (Prototype)

Page 2 of 156

Items-per-page (Gateway)

Default State

Showing 1 – 25 of 70

Page 1 of 3

Mid-page State

Showing 26 – 50 of 70

Page 2 of 3

<div class="gw-pagination"> <span class="gw-pagination-summary">Showing 1 – 25 of 70</span> <div class="gw-pagination-controls"> <div class="gw-per-page"> <select> <option>25 per page</option> <option>50 per page</option> </select> </div> <div class="gw-page-nav"> <button class="gw-page-nav-btn" disabled> <span class="material-symbols-outlined">chevron_left</span> </button> <span class="gw-page-info">Page 1 of 3</span> <button class="gw-page-nav-btn"> <span class="material-symbols-outlined">chevron_right</span> </button> </div> </div> </div>

18. Sortable Table Headers

Uppercase column headers with bi-directional sort arrows. Active sort column highlights in blue. Classes: .gw-table, .gw-th.sortable, .sorted-asc / .sorted-desc

Gateway live app — This pattern matches the live production app. In Gateway, it's implemented with DaisyUI + Tailwind CSS + Alpine.js.

With Active Sort

Manuscript ▲▼	Status	Journal ▲▼	Days ▲▼	In Status Since ▲▼
EJP-109449 A third resonance in the damped oscillator	Make Decision — 9 days overdue	European Journal of Physics	12 days	04-Mar-2026
NJP-119321 Performance of Parity QAOA	Invite Referees — due in 5 days	New Journal of Physics	25 days	19-Feb-2026
QST-104090 Monitoring photonic linear clusters	Review Complete	Quantum Science and Technology	8 days	08-Mar-2026

<table class="gw-table"> <thead> <tr> <th class="gw-th sortable sorted-asc"> Manuscript <span class="gw-th-sort"> <span class="gw-th-sort-arrow">▲</span> <span class="gw-th-sort-arrow">▼</span> </span> </th> <th class="gw-th">Status</th> <th class="gw-th sortable">Journal ...</th> </tr> </thead> <tbody>...</tbody> </table>

19. Sidebar (Light / Expanded)

White background, 220px wide, text + icon labels, blue active state with left border. Matches the live Gateway app layout. Classes: .gw-sidebar, .gw-nav-item, .gw-beta-badge

Gateway live app — This pattern matches the live production app. In Gateway, it's implemented with DaisyUI + Tailwind CSS + Alpine.js.

<div class="gw-sidebar"> <div class="gw-sidebar-section"> <a href="#" class="gw-nav-item"> <span class="material-symbols-outlined">home</span> Home </a> <a href="#" class="gw-nav-item active"> <span class="material-symbols-outlined">edit_square</span> Editor Center <span class="gw-beta-badge">Beta</span> </a> </div> </div>

20. Hero Banner

Full-width gradient banner with icon, title, document count, and subtitle. Used at the top of each Gateway center page. Classes: .gw-hero, .gw-hero-icon, .gw-hero-title

Gateway live app — This pattern matches the live production app. In Gateway, it's implemented with DaisyUI + Tailwind CSS + Alpine.js.

Default Hero

edit_note

Editor Center (70 documents)

Manage manuscripts in your queue

Author Center Variant

description

Author Center (12 documents)

Track your submitted manuscripts

<div class="gw-hero"> <div class="gw-hero-icon"> <span class="material-symbols-outlined">edit_note</span> </div> <div class="gw-hero-content"> <h2 class="gw-hero-title"> Editor Center <span class="count">(70 documents)</span> </h2> <p class="gw-hero-subtitle">Manage manuscripts in your queue</p> </div> </div>

21. KPI Stat Cards

Metric cards for the Analytics dashboard. Each shows a label, large value, trend arrow with delta, comparison text, and a colored progress bar. Classes: .gw-kpi-grid, .gw-kpi-card, .gw-kpi-trend

Gateway live app — This pattern matches the live production app. In Gateway, it's implemented with DaisyUI + Tailwind CSS + Alpine.js.

KPI Grid

Submissions arrow_downward -31%

19,717 vs 28,579 previous period

Acceptance Rate arrow_upward 1.4pp

21.7% vs 20.3% previous period

Time to First Decision arrow_upward -2.3%

59.9 days Target: < 30 days

Reviewer Response arrow_upward 1.3pp

10.1% Invitation acceptance rate

<div class="gw-kpi-grid"> <div class="gw-kpi-card"> <div class="gw-kpi-header"> <span class="gw-kpi-label">Submissions</span> <span class="gw-kpi-trend down"> <span class="material-symbols-outlined">arrow_downward</span> -31% </span> </div> <span class="gw-kpi-value">19,717</span> <span class="gw-kpi-compare">vs 28,579 previous period</span> <div class="gw-kpi-bar"> <div class="gw-kpi-bar-fill critical" style="width: 69%;"></div> </div> </div> </div>

22. Empty States

Placeholder for tables or pages with no data. Centered layout with icon, title, description, and optional action button. Class: .gw-empty-state

Gateway live app — This pattern matches the live production app. In Gateway, it's implemented with DaisyUI + Tailwind CSS + Alpine.js.

Table Empty State

inbox

No manuscripts found

There are no manuscripts matching your current filters. Try adjusting your search criteria or removing some filters.

Search Empty State

search_off

No results for "quantum entanglement"

We couldn't find any manuscripts matching your search. Check for typos or try a broader search term.

<div class="gw-empty-state"> <div class="gw-empty-state-icon"> <span class="material-symbols-outlined">inbox</span> </div> <h3>No manuscripts found</h3> <p>There are no manuscripts matching your filters.</p> <button class="btn btn-ghost">Clear Filters</button> </div>

23. Loading States

Skeleton shimmer placeholders and spinner for content loading. Apply .gw-skeleton to any element for the shimmer effect. Classes: .gw-skeleton-text, .gw-skeleton-heading, .gw-spinner

Gateway live app — This pattern matches the live production app. In Gateway, it's implemented with DaisyUI + Tailwind CSS + Alpine.js.

Skeleton Card

Skeleton Table Rows

Spinner

Loading manuscripts…

<div class="gw-skeleton gw-skeleton-heading" style="width: 50%;"></div> <div class="gw-skeleton gw-skeleton-text" style="width: 100%;"></div> <div class="gw-skeleton gw-skeleton-text" style="width: 80%;"></div>  <div class="gw-skeleton gw-skeleton-circle" style="width: 40px; height: 40px;"></div>  <div class="gw-loading-state"> <div class="gw-spinner"></div> <p>Loading manuscripts…</p> </div>

24. Additional Patterns

Active Filter Tags (on dark backgrounds)

Immunology close 2024 close Available close

Page Footer

Shadows

--shadow-sm

--shadow-md

--shadow-lg

Border Radius Scale

4px

8px

12px

16px

1. Design Tokens — Colors

2. Typography

3. Status Badges

4. Status Dot Indicator

5. Health Status Badges

Submission Volume

Editorial Quality

Process Efficiency

Activity Level

6. Article Type Badges

7. Match Score, Load, & Value Indicators

8. Recommendation & Review Badges

9. Keyword Tags

10. Buttons

11. Search & Filter Bar

Filters

12. Tab Bar — Gateway (Underline Style)

13. Flyout Panel (right rail)

14. Modal / Dialog

Confirm Decision

Invite Referee

15. Toast Notification

16. View Toggle

17. Pagination

18. Sortable Table Headers

19. Sidebar (Light / Expanded)

20. Hero Banner

Editor Center (70 documents)

Author Center (12 documents)

21. KPI Stat Cards

22. Empty States

No manuscripts found

No results for "quantum entanglement"

23. Loading States

24. Additional Patterns