Design System

Every visual decision on BaseballScorecard.org follows these rules. If something looks different from the rest of the site, it's a bug.

Brand Colors

Primary Green
#377049

Stone Dark
#1c1918

Stone Mid
#868278

Stone Light
#faf9f6

Out Red
#a04a49

Pitcher Blue
#2a6d8d

Challenge Purple
#7B2D8E

Light Mode Palette

Token	Hex	Usage
`--sc-text`	`#1c1918`	Primary text, diamond outlines
`--sc-text-light`	`#6b6462`	Secondary text, stats
`--sc-bg`	`#faf9f6`	Page background
`--sc-cell-bg-empty`	`#e8e6e1`	Empty cells, headers
`--sc-cell-bg-future`	`#f2f0ec`	Future inning cells
`--grid-line`	`#868278`	All borders and dividers
`--sc-scored`	`#377049`	Scored runners, active states
`--sc-out`	`#a04a49`	Out paths, strikes
`--sc-sub`	`#44403a`	Substitution indicators
`--sc-pitcher-line`	`#2a6d8d`	Pitcher change lines
`--sc-challenge`	`#7B2D8E`	ABS challenge badges
`--sc-active-cell`	`#e0f0e4`	Live batter highlight

Dark Mode Palette

Token	Hex	Usage
`--sc-text`	`#f5f2e9`	Primary text
`--sc-bg`	`#1c1918`	Page background
`--sc-cell-bg`	`#292524`	Play cell background
`--grid-line`	`#7e7a76`	Borders
`--sc-sub`	`#d4d0c8`	Substitution indicators

All colors are CSS custom properties. Theme switching toggles data-theme on <html>. No JavaScript needed for the swap.

Diamond Rendering

Single (1B)

Double (2B)

Triple (3B)

Home Run

Scored (not HR)

These SVGs use var(--sc-text) and var(--sc-bg), so they automatically switch between light and dark mode.

Pitch Call Colors

Ball
B

Strike
C S F T

In Play
X D E

ABS Challenge
W / L

Substitution Line Pattern

All sub indicators use the same dotted square pattern.

Pinch Hitter: before the at-bat

Pinch Runner: after the at-bat

Pitcher change line with stats (strikes / pitches / Ks)

5px squares, 4px gaps, consistent everywhere.

Indicator Icons

Out Badge

RBI Diamond

Sub Letter

All indicators share the same base size for visual consistency. The HR diamond is intentionally larger.

Loading Bar

Rainbow gradient, 4px height, appears after 1s delay

Typography

Element	Size	Weight	Notes
Team name header	`2.25em`	700	Scales to `1.25em` on mobile
Lineup player name	`clamp(1.1rem, 0.8vw + 1rem, 1.5rem)`	800/600	800 starter, 600 sub
Table data	`1em`	400	All tables
Table header	`1em`	700	Column headers
Section title	`1.1em`	700	Spanning headers
Walk notation	`largeSize * 1.0`	900	BB, IBB, HBP, CI
Out notation	`largeSize * 0.6`	400	G6-3, F8, L7
K notation	`largeSize * 0.7`	400	K, backwards K

Rules

Never combine bold AND italic
Team abbreviations never bold in tables
All table data left-aligned (never centered)
Only full team names in section headers are bold

Borders

Use	Style	Exception
All structural borders	`1px solid var(--grid-line)`
Square corners	`border-radius: 0`	No exceptions
Drop shadows	Never
Linescore RHE separator	`2.5px solid var(--text)`	Only thick border
Scorecard grid bold	`2.5px`	Row/inning boundaries

Grid and Layout

Layout	Desktop	Mobile
W-L + Linescore	35% / 65% side by side	Stacked
Game Info / Weather / Umpires	3 equal columns	Stacked
Standings	2-column grid	1 column

body { overflow-x: hidden } prevents horizontal page scroll. Wide tables scroll within containers.

Team Logos

Displayed for educational purposes. All logos are the trademark and property of their respective owners.

Light mode

Dark mode

30 teams, SVG format, stored locally at /img/logos/light/ and /img/logos/dark/
Auto-swap via CSS class toggling
vertical-align: middle for alignment with text

Accessibility

WCAG AA contrast on all text and UI
Skip-to-content link (first focusable element)
aria-label on all interactive elements
aria-live="polite" on auto-refresh status
Keyboard navigation for all controls
See Accessibility for the full statement

Design System ​

Brand Colors ​

Light Mode Palette ​

Dark Mode Palette ​

Diamond Rendering ​

Pitch Call Colors ​

Substitution Line Pattern ​

Indicator Icons ​

Loading Bar ​

Typography ​

Rules ​

Borders ​

Grid and Layout ​

Team Logos ​

Accessibility ​