--- version: alpha name: Sideline Broadsheet description: "Magazine-style sports UI: IBM Plex Serif headlines, one cerise accent and cool green-grey ink-on-paper neutrals in spacious layouts." colors: background: "#f5f8f7" foreground: "#131a19" card: "#ffffff" card-foreground: "#131a19" popover: "#ffffff" popover-foreground: "#131a19" primary: "#b92477" primary-foreground: "#ffffff" secondary: "#eaefee" secondary-foreground: "#232c2b" muted: "#eaefee" muted-foreground: "#4a5755" accent: "#ffe0f0" accent-foreground: "#520837" destructive: "#bb3015" destructive-foreground: "#ffffff" success: "#0b663f" success-foreground: "#ffffff" warning: "#fbdc7f" warning-foreground: "#3d2a00" border: "#d8dfdd" input: "#bdc7c4" ring: "#d93c92" dark-background: "#131a19" dark-foreground: "#f5f8f7" dark-card: "#232c2b" dark-card-foreground: "#f5f8f7" dark-popover: "#232c2b" dark-popover-foreground: "#f5f8f7" dark-primary: "#ee66b0" dark-primary-foreground: "#330122" dark-secondary: "#364140" dark-secondary-foreground: "#eaefee" dark-muted: "#364140" dark-muted-foreground: "#bdc7c4" dark-accent: "#520837" dark-accent-foreground: "#ffe0f0" dark-destructive: "#f46a4d" dark-destructive-foreground: "#330500" dark-success: "#3fb67f" dark-success-foreground: "#012113" dark-warning: "#d9a51b" dark-warning-foreground: "#261a00" dark-border: "#364140" dark-input: "#4a5755" dark-ring: "#ee66b0" typography: display-lg: fontFamily: IBM Plex Serif fontSize: 64px fontWeight: 700 lineHeight: 1.04 letterSpacing: -0.025em display-md: fontFamily: IBM Plex Serif fontSize: 48px fontWeight: 700 lineHeight: 1.08 letterSpacing: -0.02em heading-lg: fontFamily: IBM Plex Serif fontSize: 36px fontWeight: 600 lineHeight: 1.15 letterSpacing: -0.015em heading-md: fontFamily: IBM Plex Sans fontSize: 27px fontWeight: 600 lineHeight: 1.25 letterSpacing: -0.008em heading-sm: fontFamily: IBM Plex Sans fontSize: 18px fontWeight: 600 lineHeight: 1.4 body-lg: fontFamily: IBM Plex Sans fontSize: 20px fontWeight: 400 lineHeight: 1.6 body-md: fontFamily: IBM Plex Sans fontSize: 16px fontWeight: 400 lineHeight: 1.6 body-sm: fontFamily: IBM Plex Sans fontSize: 14px fontWeight: 400 lineHeight: 1.5 label: fontFamily: IBM Plex Sans fontSize: 14px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0.01em caption: fontFamily: IBM Plex Sans fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.03em code: fontFamily: IBM Plex Mono fontSize: 14px fontWeight: 400 lineHeight: 1.5 rounded: sm: 2px md: 4px lg: 6px xl: 10px full: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 20px height: 44px button-secondary: backgroundColor: "{colors.secondary}" textColor: "{colors.secondary-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 20px height: 44px button-destructive: backgroundColor: "{colors.destructive}" textColor: "{colors.destructive-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 20px height: 44px input: backgroundColor: "{colors.background}" textColor: "{colors.foreground}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 0 16px height: 44px card: backgroundColor: "{colors.card}" textColor: "{colors.card-foreground}" rounded: "{rounded.lg}" padding: 32px popover: backgroundColor: "{colors.popover}" textColor: "{colors.popover-foreground}" rounded: "{rounded.lg}" padding: 12px helper-text: backgroundColor: "{colors.background}" textColor: "{colors.muted-foreground}" typography: "{typography.body-sm}" table-row-alt: backgroundColor: "{colors.muted}" textColor: "{colors.muted-foreground}" typography: "{typography.body-sm}" height: 44px badge: backgroundColor: "{colors.accent}" textColor: "{colors.accent-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 24px badge-success: backgroundColor: "{colors.success}" textColor: "{colors.success-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 24px badge-warning: backgroundColor: "{colors.warning}" textColor: "{colors.warning-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 24px badge-destructive: backgroundColor: "{colors.destructive}" textColor: "{colors.destructive-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 24px button-primary-dark: backgroundColor: "{colors.dark-primary}" textColor: "{colors.dark-primary-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 20px height: 44px button-secondary-dark: backgroundColor: "{colors.dark-secondary}" textColor: "{colors.dark-secondary-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 20px height: 44px button-destructive-dark: backgroundColor: "{colors.dark-destructive}" textColor: "{colors.dark-destructive-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 20px height: 44px input-dark: backgroundColor: "{colors.dark-background}" textColor: "{colors.dark-foreground}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 0 16px height: 44px card-dark: backgroundColor: "{colors.dark-card}" textColor: "{colors.dark-card-foreground}" rounded: "{rounded.lg}" padding: 32px popover-dark: backgroundColor: "{colors.dark-popover}" textColor: "{colors.dark-popover-foreground}" rounded: "{rounded.lg}" padding: 12px helper-text-dark: backgroundColor: "{colors.dark-background}" textColor: "{colors.dark-muted-foreground}" typography: "{typography.body-sm}" table-row-alt-dark: backgroundColor: "{colors.dark-muted}" textColor: "{colors.dark-muted-foreground}" typography: "{typography.body-sm}" height: 44px badge-dark: backgroundColor: "{colors.dark-accent}" textColor: "{colors.dark-accent-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 24px badge-success-dark: backgroundColor: "{colors.dark-success}" textColor: "{colors.dark-success-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 24px badge-warning-dark: backgroundColor: "{colors.dark-warning}" textColor: "{colors.dark-warning-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 24px badge-destructive-dark: backgroundColor: "{colors.dark-destructive}" textColor: "{colors.dark-destructive-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 24px --- # 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. Moods: editorial, confident, crisp, calm. Built for: sports, media, publishing. Density: spacious. Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name. ## Colors 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. - **Primary** `#b92477` / dark `#ee66b0`: the single action color. Primary buttons, links, focus ring. - **Background / Foreground** `#f5f8f7` / dark `#131a19` on `#131a19` / dark `#f5f8f7`: page surface and body text. - **Card** `#ffffff` / dark `#232c2b`: raised surfaces. - **Secondary** `#eaefee` / dark `#364140`: secondary buttons and quiet controls. - **Muted** `#eaefee` / dark `#364140` with **muted-foreground** `#4a5755` / dark `#bdc7c4`: helper text, table stripes, disabled-looking surfaces. - **Accent** `#ffe0f0` / dark `#520837`: highlights, selected rows, badges. - **Destructive** `#bb3015` / dark `#f46a4d`, **Success** `#0b663f` / dark `#3fb67f`, **Warning** `#fbdc7f` / dark `#d9a51b`: status only, always paired with an icon or label. - **Border** `#d8dfdd` / dark `#364140`, **Input** `#bdc7c4` / dark `#4a5755`, **Ring** `#d93c92` / dark `#ee66b0`. All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time. ## 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. - Display: **IBM Plex Serif** (fallback Georgia, serif) - Interface: **IBM Plex Sans** (fallback system-ui, sans-serif) - Mono: **IBM Plex Mono** (fallback ui-monospace, monospace) | Token | Font | Size | Line height | Weight | |---|---|---|---|---| | display-lg | IBM Plex Serif | 64px | 1.04 | 700 | | display-md | IBM Plex Serif | 48px | 1.08 | 700 | | heading-lg | IBM Plex Serif | 36px | 1.15 | 600 | | heading-md | IBM Plex Sans | 27px | 1.25 | 600 | | heading-sm | IBM Plex Sans | 18px | 1.4 | 600 | | body-lg | IBM Plex Sans | 20px | 1.6 | 400 | | body-md | IBM Plex Sans | 16px | 1.6 | 400 | | body-sm | IBM Plex Sans | 14px | 1.5 | 400 | | label | IBM Plex Sans | 14px | 1.25 | 500 | | caption | IBM Plex Sans | 12px | 1.4 | 500 | | code | IBM Plex Mono | 14px | 1.5 | 400 | ## 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. Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px. ## Elevation & Depth 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. - sm: `0 1px 2px rgba(19, 26, 25, 0.06)` - md: `0 6px 16px -4px rgba(19, 26, 25, 0.14)` - lg: `0 20px 48px -12px rgba(19, 26, 25, 0.24)` ## 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. Radius scale: sm 2px, md 4px, lg 6px, xl 10px, full 9999px. ## Components Components ending in `-dark` are the dark-mode versions. Button: 44px tall, 20px horizontal padding, label type. Input: 44px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 32px padding, 1px border, sm shadow. Badge: pill, caption type. ## Do's and Don'ts - **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. - **Do:** 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. - **Do:** Set scores, times and stat tables in typography.code (IBM Plex Mono, 14px) and right-align numeric columns. - **Do:** Cap article text at 680px wide using body-lg (20px, line-height 1.6), and keep at least space.16 (64px) between page sections. - **Do:** Separate cards with a 1px border token and shadow-sm. Use shadow-md for menus and popovers and shadow-lg only for dialogs. - **Do:** 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. - **Do:** Show focus as a 2px ring token outline with a 2px offset on buttons, inputs and links, in both modes. - **Do:** 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:** Don't set IBM Plex Serif below heading-lg (36px), in all caps, or in buttons, labels and table cells. - **Don't:** Don't use pure black (#000000) or warm greys. Keep every surface, border and text color on the green-grey neutral ramp. - **Don't:** Don't round buttons or inputs beyond radius.md, or cards beyond radius.lg. Reserve radius.full for badges. - **Don't:** Don't place more than one cerise filled element in a single card or hero. - **Don't:** 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:** 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:** Don't use less than space.8 (32px) between stacked content blocks.