Style Guide — RefRight Design System

Colors

One brand color, one accent (used sparingly), four semantic, ten-step slate. Light + dark adapt automatically.

Brand · Indigo

Brand light

#eef2ff

Brand

#4f46e5

Hover

#4338ca

Dark

#312e81

Vela accent · sparingly used

Reserved for the Svela parent brand-mark and the Student-tier badge. Avoided in everyday UI to keep the product palette clean and trustworthy.

Light

#f5f3ff

Vela

#7c3aed

Dark

#4c1d95

Semantic

Success

#15803d

Warning

#b45309

Danger

#b91c1c

Info

#1d4ed8

Slate (neutrals)

50

#f8fafc

100

#f1f5f9

200

#e2e8f0

300

#cbd5e1

400

#94a3b8

500

#64748b

600

#475569

700

#334155

800

#1e293b

900

#0f172a

Typography

Inter for UI & reading. JetBrains Mono for citations & code. Tightened for enterprise density.

display · 44 / 700Format references the way the journal wants.

h1 · 32 / 700RefRight Pro

h2 · 24 / 600Frequently asked questions

h3 · 20 / 600Verify your DOIs

h4 · 16 / 600Citation style

lead · 15 / 400Paste your references and we'll format them for any of 54 journals.

body · 14 / 400Default body text for most paragraphs and form fields.

small · 13 / 400Helper text, captions, secondary descriptions.

caption · 11 / 600Section eyebrow

mono · 13 / 40010.1038/s41586-021-03819-2

Spacing

4 px base. Use multiples for all margins, padding, gaps.

1 · 4

2 · 8

3 · 12

4 · 16

5 · 20

6 · 24

8 · 32

12 · 48

16 · 64

Radii & shadows

Subtler than v1. md on inputs and buttons, lg on cards, full on pills only.

Border radii

xs · 3

sm · 4

md · 6

lg · 8

xl · 12

2xl · 16

full

Shadow scale

xs

sm

md

lg

Buttons

Primary indigo for the main action. Secondary (outlined) for the secondary. Ghost for nav. Vela violet only for special CTAs.

Variants

Link button

Sizes

States & groups

Form inputs

36 px height. Subtle elevation by default. Clear focus ring. Inline validation.

Email (work address)

@

Citation style

References

DOI DOI not found in CrossRef.

Auto-fill DOI Check retractions

Auto-detect bibliography

Cards

Default, elevated, interactive, accented. Tightened padding for enterprise density.

Default

Plain card

Base surface with thin border. Used for lists, settings panels, content blocks.

Elevated

Elevated card

Soft drop-shadow. Used for dialogs, drawers, popovers.

Interactive

Hover me

Border darkens on hover. Used for clickable list items.

Accent

Featured

Brand-bordered. Used for highlight cards (e.g., "Most popular" pricing).

KPI & stat cards

Used on the dashboard. Tabular numerals for clean alignment.

References this month 1,284 ↑ 12.4% vs last month

DOIs verified 96.2% ↑ 2.1 pts

Retractions caught 7 — same

Avg. format time 2.4s ↓ 0.3 s

Citation cards

Domain-specific. Left border conveys validation status at a glance.

Smith, J., & Doe, A. (2020). Reference parsing for the modern bibliography. Nature Methods, 17(8), 1023–1031.

10.1038/s41592-020-0900-2 Verified 2,140 citations

Brown, R. (2019). Methods in citation analysis. Unknown publisher.

Missing journal & volume Auto-fill available

Wei, X., et al. (2018). Disputed findings. The Lancet, 391(10120), 105–110.

Retracted — Aug 2019 10.1016/S0140-6736(18)00000-0

Smith, J. (2020). Reference parsing for the modern bibliography. Nature Methods, 17, 1023.

Possible duplicate of #1 Merge · Remove

Badges, pills & dots

Always paired with text or context — never floating alone.

Badges

Default Brand Vela Success Warning Danger Info Solid

Pills

54 journals Live Beta Indexed in PubMed v 2.1.4

Alerts

Inline messaging for system feedback. Four severities.

i

CrossRef is responding slowly

Auto-fill may be slightly delayed. Manual entry still works as expected.

✓

All references formatted

47 references converted to APA 7. No issues detected.

!

3 possible duplicates flagged

Click each highlighted reference to review or remove.

×

2 retracted papers found

References #14 and #22 have been retracted. Please review before submission.

Toasts

Transient confirmation. Top-right of the viewport. Auto-dismiss after 4 s.

✓ References saved to library.

! DOI verification rate-limited. Retrying in 30 s.

× Sign-in failed. Check your password and try again.

Modal

Static example. In production the overlay covers the viewport.

Tabs & segmented controls

Tabs for primary navigation in a page. Segmented for binary or 2–3 option toggles.

Tabs

Segmented

Empty states

Use whenever a list, tab, or page has no content yet. Always offer a clear next action.

📚

Your library is empty

Save references from the workspace, import from BibTeX/RIS, or look up a DOI to get started.

Progress & skeletons

Used during batch processing and async loading.

Progress bar

Verifying DOIs 62%

Quota used 887 / 1,000

Skeleton loader

Breadcrumbs

Use on deep pages (style manager, library subfolders, settings).

Avatars & user chips

Use the user's initials. Background tints by user-hash later.

SV SV SV SV

Tables

Used for compare grids, library lists, usage logs.

Reference	Year	DOI	Status
Verified
Smith, J. (2020). Title of paper. Nature, 580(7803), 100–105.	2020	`10.1038/s41586-020...`	OK
Brown, R. & Lee, S. (2019). Comparative review. Cell, 178(4), 720–735.	2019	`10.1016/j.cell.2019...`	OK
Needs review
Anonymous (n.d.). Untitled. Unknown.	—	—	Incomplete
Wei, X. et al. (2018). Disputed paper. The Lancet, 391, 105–110.	2018	`10.1016/S0140...`	Retracted