Design System

v1.0

Token reference and component library for StudyLens. Every color, component, and pattern on this page is rendered using the live token system — toggle dark mode in the header to see all tokens switch automatically.

Color Palette

All colors are CSS custom properties defined in globals.css. Light values shown first, dark values after the slash. Swatches render the live token — they switch automatically with the theme.

Core

--background

#ffffff/#020617

--foreground

#0f172a/#f8fafc

--card

#ffffff/#0f172a

--card-foreground

#0f172a/#f8fafc

--popover

#ffffff/#0f172a

--popover-foreground

#0f172a/#f8fafc

Brand

--primary

#0f766e/#2dd4bf

--primary-foreground

#ffffff/#042f2e

--secondary

#f1f5f9/#1e293b

--secondary-foreground

#0f172a/#f8fafc

--accent

#f8fafc/#1e293b

--accent-foreground

#0f172a/#f8fafc

UI

--muted

#f1f5f9/#1e293b

--muted-foreground

#64748b/#94a3b8

--border

#e2e8f0/#1e293b

--input

#e2e8f0/#1e293b

--ring

#0f766e/#2dd4bf

Destructive

--destructive

#dc2626/#ef4444

--destructive-foreground

#ffffff/#fef2f2

Semantic

--success

#16a34a/#22c55e

--success-foreground

#166534/#bbf7d0

--success-muted

#f0fdf4/#052e16

--warning

#ca8a04/#eab308

--warning-foreground

#854d0e/#fef08a

--warning-muted

#fefce8/#422006

--info

#2563eb/#60a5fa

--info-foreground

#1e40af/#93c5fd

--info-muted

#eff6ff/#172554

Coverage Tiers

--gold

#d97706/#f59e0b

--gold-foreground

#92400e/#fde68a

--gold-muted

#fffbeb/#451a03

--silver

#6b7280/#9ca3af

--silver-foreground

#374151/#d1d5db

--silver-muted

#f9fafb/#111827

--bronze

#ea580c/#f97316

--bronze-foreground

#9a3412/#fed7aa

--bronze-muted

#fff7ed/#431407

Typography

Type Scale — Geist Sans

text-xs0.75rem / 12pxExtra small text

text-sm0.875rem / 14pxSmall text

text-base1rem / 16pxBase text

text-lg1.125rem / 18pxLarge text

text-xl1.25rem / 20pxExtra large text

text-2xl1.5rem / 24px2XL heading

text-3xl1.875rem / 30px3XL heading

text-4xl2.25rem / 36px4XL heading

Type Scale — Geist Mono

text-xsconst data = await fetch(url);

text-smconst data = await fetch(url);

text-baseconst data = await fetch(url);

text-lgconst data = await fetch(url);

text-xlconst data = await fetch(url);

Font Weights

Regular (400)

Medium (500)

Semibold (600)

Bold (700)

Spacing Scale

Tailwind spacing utilities. Each unit = 0.25rem = 4px.

1

0.25rem / 4px

2

0.5rem / 8px

3

0.75rem / 12px

4

1rem / 16px

5

1.25rem / 20px

6

1.5rem / 24px

8

2rem / 32px

10

2.5rem / 40px

12

3rem / 48px

16

4rem / 64px

20

5rem / 80px

24

6rem / 96px

Border Radius

rounded-sm6px

rounded-md8px

rounded-lg12px

rounded-xl16px

Shadows

shadow-sm

shadow-md

shadow-lg

Buttons

Variants

Sizes

States

All Variants x Sizes

Variant	Small	Default	Large
`default`
`outline`
`ghost`
`link`
`destructive`

Badges

All Variants

Default

Gold

Silver

Bronze

High

Medium

Low

Destructive

Outline

Coverage Tiers

Gold

Full text analyzed — highest coverage

Silver

Abstract + registry data analyzed

Bronze

Metadata only — limited analysis

Confidence Indicators

High confidence

Medium confidence

Low confidence

Cards

Study Overview

A card component with header, title, description, and content areas.

Cards use bg-card and border-border tokens.

Interactive Card

Cards support hover states with hover:shadow-md. Used for collection listings and dashboard cards.

Gold

randomized controlled trial

Effect of Mediterranean Diet on Cardiovascular Outcomes

Estruch et al. — New England Journal of Medicine — 2018

This demonstrates how cards compose with badges, titles, and metadata — matching the study page header pattern.

Inputs

Default

With placeholder

Disabled

With icon (search pattern)

Skeletons

Text Lines

Card Skeleton

Loading Spinner

Uses border-muted + border-t-primary

Domain Components

Preprint Banner

PREPRINT — This study has not been peer reviewed.

Quality Flags

Peer Reviewed

Sample Size (N = 7,447)

Short duration (12 weeks)

Preregistered

Funding not declared

Conflicts not declared

Teaching Cards

What is a Randomized Controlled Trial?

Understanding Sample Size

Sample size (N) is the number of participants in a study. Larger samples provide more reliable results. Very small studies (N < 30) have wide uncertainty margins. Always check whether the study was adequately powered.

Learn more →

Fact Card

Main Finding

Mediterranean diet supplemented with extra-virgin olive oil reduced cardiovascular events by 30% compared to control diet.

High confidence

Source(Results)

Sample Size

7,447 participants

High confidence

P-Value

p = 0.003

Medium confidence

Media Link

Mediterranean Diet Linked to Lower Heart Risk

Reuters Health · Feb 25, 2018

Layout Patterns

Container Widths

max-w-sm(384px)

max-w-lg(512px)

max-w-2xl(672px)

max-w-4xl(896px)

max-w-6xl(1152px)

Feature Grid (4-col)

Extracted Facts

Description text using text-muted-foreground token.

Media Coverage

Description text using text-muted-foreground token.

Quality Checklist

Description text using text-muted-foreground token.

Teaching Layer

Description text using text-muted-foreground token.

Study Page Layout (main + sidebar)

Main Content Area

Facts, abstract, and media coverage render here in a single column.

Sidebar

Quick stats, quality flags, and teaching cards.

Icons

Font Awesome icons used throughout StudyLens. All rendered at the actual component size.

faFlask

faNewspaper

faBookOpen

faLayerGroup

faMagnifyingGlass

faArrowUpRight...

faChevronDown

faChevronRight

faTriangleExcl...

faCheck

faMinus

faPlus

faSpinner

faUsers

faCalendarDays

faQuoteLeft

faSun

faMoon

Accessibility

Contrast Ratios (WCAG 2.1 AA)

AA requires 4.5:1 for normal text, 3:1 for large text. All primary text combinations meet AA or better.

foreground on background

AAA

15.4:1

muted-foreground on background

5.0:1

primary-foreground on primary

4.6:1

destructive-foreground on destructive

4.6:1

success-foreground on success-muted

AAA

7.1:1

info-foreground on info-muted

AAA

6.3:1

Focus States

Tab through these elements to see focus ring styles. Focus rings use the ring token (teal in light, teal-400 in dark).

WCAG 2.1 AA Checklist

All text meets 4.5:1 contrast ratio on its background

Focus indicators are visible on all interactive elements

Color is not the sole means of conveying information

Interactive targets are at least 44x44px touch area

Page structure uses semantic HTML headings

All images have descriptive alt text

Forms have associated labels