Sideline Broadsheet

About Sideline Broadsheet

Overview

Sideline Broadsheet is for sports products that read like a long-form magazine: match reports, athlete profiles, season recaps and editorial scoreboards. Hierarchy comes from type size, white space and a single cerise accent, not from neon or italics. Each view has one serif headline, one filled primary action and at least space.16 (64px) between sections.

Color

Cerise (brand, HSL hue ~325) is the only chromatic voice. It marks the primary button, inline links, focus rings and the accent surface. Neutrals carry a deliberate cool green tint (hue ~165, low chroma) through all 11 steps, so paper (neutral.50 #f5f8f7) and ink (neutral.950 #131a19) belong to the same family and cerise reads as its complement. Destructive is vermilion (danger.600 light, danger.400 dark). It sits about 40° of hue away from cerise, so errors never read as brand. Success is a cool emerald that matches the green-tinted neutrals. Warning is amber, used only as a pale fill (warning.200) with dark text (warning.900) in light mode. Light-mode contrast: primary-foreground on primary is 5.9:1, primary on background 5.5:1, muted-foreground (neutral.700) on muted 6.5:1 and on background 7.1:1, and ring (brand.500) on background 3.9:1. Dark-mode contrast: primary-foreground (brand.950) on brand.400 is 6.1:1, muted-foreground (neutral.300) on muted (neutral.800) 6.1:1, destructive-foreground on danger.400 6.0:1, and success-foreground on success.400 6.7:1.

Typography

The display tiers follow a perfect fourth (1.333): display-lg 64, display-md 48, heading-lg 36 and heading-md 27. Text sizes are body-lg 20, heading-sm 18, body-md 16, body-sm and label 14, and caption 12. IBM Plex Serif sets display-lg, display-md and heading-lg at 600–700. Tracking tightens as size grows: -0.025em at 64px, -0.02em at 48px and -0.015em at 36px. IBM Plex Sans handles all functional text, including heading-md and heading-sm, navigation, tables, forms, buttons and body copy. Body line heights are 1.6 for body-lg and body-md and 1.5 for body-sm. IBM Plex Mono (code, 14px) is for scores, timestamps, split times and stat columns, where figures must align. All weights used (400, 500, 600, 700) ship in the Plex families on Google Fonts.

Layout

Spacious density on a 4px grid. Section gaps use space.16–space.24 (64–96px). Reading columns cap at 680px and page containers at 1240px. Buttons and inputs are 44px tall, which meets touch-target size and keeps a calm vertical rhythm.

Elevation

Mostly flat, like a printed page. Cards use a 1px border (neutral.200 light, neutral.800 dark) plus shadow-sm. Shadow-md is for menus and popovers, and shadow-lg is for dialogs only. In dark mode, cards lift by surface step instead of shadow: background is neutral.950 and card and popover are neutral.900.

Shapes

Small radii read as precise and printed: radius.md (4px) for buttons and inputs, radius.lg (6px) for cards, and radius.xl (10px) for dialogs. Radius.full is reserved for badges such as LIVE, FINAL and POSTPONED.

Do

• Set headlines, pull quotes and scoreboard titles in IBM Plex Serif using display-lg (64px), display-md (48px) or heading-lg (36px). Use IBM Plex Sans for every button, input, label and table.
• Give each view one filled primary button (brand.600 light, brand.400 dark) and style inline links with the primary token. Render all other actions as secondary or ghost buttons.
• Set scores, times and stat tables in typography.code (IBM Plex Mono, 14px) and right-align numeric columns.
• Cap article text at 680px wide using body-lg (20px, line-height 1.6), and keep at least space.16 (64px) between page sections.
• Separate cards with a 1px border token and shadow-sm. Use shadow-md for menus and popovers and shadow-lg only for dialogs.
• Pair every status color (success, warning, destructive) with an icon or a text label such as LIVE, FINAL or POSTPONED, set in caption on a radius.full badge.
• Show focus as a 2px ring token outline with a 2px offset on buttons, inputs and links, in both modes.
• In dark mode, use neutral.950 for the page, neutral.900 for cards and popovers, and neutral.800 for borders, so surfaces lift without shadows.

Don’t

• Don't use cerise for errors, losses or negative deltas. Use the destructive (vermilion) token, which is deliberately a different hue.
• Don't set IBM Plex Serif below heading-lg (36px), in all caps, or in buttons, labels and table cells.
• Don't use pure black (#000000) or warm greys. Keep every surface, border and text color on the green-grey neutral ramp.
• Don't round buttons or inputs beyond radius.md, or cards beyond radius.lg. Reserve radius.full for badges.
• Don't place more than one cerise filled element in a single card or hero.
• Don't use the accent surface (brand.100 light, brand.900 dark) for passages longer than two lines. Keep it for highlights, selected table rows and pull-quote backgrounds.
• Don't use warning.400 as a text color on light backgrounds. In light mode, warning is a warning.200 fill with warning.900 text.
• Don't use less than space.8 (32px) between stacked content blocks.