Rounds Style Guide

Design tokens, type system, and shared utility classes.

Colours

--paper#FBF7EEPaper — page background
--paper-soft#F6F1E4Paper Soft — subtle surface
--surface#F1ECDCSurface — card / panel bg
--ink#2D2A24Ink — primary text
--ink-soft#5A5347Ink Soft — secondary text
--text-mute#8A8170Text Mute — tertiary text
--text-faint#B5AC97Text Faint — hints / dividers
--accent#5B7A88Accent — links / interactive
--accent-deep#455C68Accent Deep — hover state
--accent-soft#E3E6E1Accent Soft — chips / badges
--gold#B8954AGold — premium / highlights
--gold-soft#EDE3CCGold Soft — premium surface
--hairline#E4DBC3Hairline — borders
--hairline-soft#EBE3CCHairline Soft — subtle borders

Typography

Aa Bb Cc
IBM Plex Sans.font-sansBody text, UI labels, bylines
Aa Bb Cc
Fraunces.serifHeadlines, quotes, display type
Aa Bb Cc
IBM Plex Mono.monoEyebrows, metadata, code
DisplayThe quick brown fox
H1The quick brown fox jumps
H2The quick brown fox jumps over
BodyThe quick brown fox jumps over the lazy dog.
CaptionThe quick brown fox jumps over the lazy dog

Utility Classes

Eyebrow / Tag

  • .eyebrowMono uppercase tag with accent colour
  • .eyebrow.premiumGold variant for premium content
  • .eyebrow.mutedMuted colour variant
  • .dot-sep3px circular separator dot
  • .tag-rowFlex container for tags with gap

Section Header

  • .section-headerFlex row: title + see-all link
  • .section-titleFraunces 24px / 32px heading
  • .section-linkAccent-coloured see-all link

Avatar

  • .avatar36px circle, centred initials
  • .avatar.a1Accent background
  • .avatar.a2Ink-soft background
  • .avatar.a3Ink background
  • .avatar.a4Gold background

Byline

  • .byline-blockFlex row: avatar + text + save button
  • .byline-nameBold 14px author name
  • .byline-meta12px muted role / timestamp
  • .save-btnCircular bookmark border button

Live Specimens

.eyebrow
Latest Briefing
.eyebrow.premium
Premium Access
.section-header
Top StoriesSee all
.avatar
TA
TA
TA
TA
.byline-block
TA
Tobi Opeyemi Amure
Founder & Editor
.tag-row
BiotechRead time

Device Frame

The .device wrapper scales the layout across three breakpoints: