GoGo Design System

Semantic surfaces

The only tokens that flip with the theme. The dark column is built from this design system's own grey ramp, so nothing new enters the palette.

Base

Monochrome

Named by ink percentage. Careful: grey-50 (#7F7F7F) is not Tailwind's gray-50 (#F8FAFC), and the standalone grey (#7C7C7C) is a different value again.

Brand & system

Accents

Outside the core palette, but each recurs across unrelated components - so they are named here rather than written as arbitrary values at each call site.

Chrome surface

Header, menu bar and footer. Fixed — the chrome is dark in both themes, so these do not flip.

Gradients

No Tailwind gradient namespace exists, so apply these with bg-(image:--gradient-…).

Typography

Google Sans. Each utility sets size, line-height and weight together — medium is the button style, label the indicator one.

Icons

Recoloured to currentColor, so a text utility sets the colour. View, ThumbsUp, BubbleChat and Clock01 keep the 50% opacity the design gives them.

Logo

Logo is for light backgrounds; LogoInverse for dark. The header uses LogoInverse.

Button

Enabled / Hover / Disabled. Hover and Enabled differ only by the shadow, so hover drops it rather than restyling. The 15px label sits outside the five text styles.

NotifBadge

20px counter. The red is #F44336 — note this is not the Red system token (#DA2031).

CategorySelection

Selected shows a 9px light-blue-alt dot and a SemiBold label; unselected drops the dot and sits at 70% opacity.

Toggle

role=switch. Off track is grey (#7C7C7C), on is light-blue. The theme switch above is this same component.

ArticleLabel

Translucent scrim chip, designed to sit over a card's hero image.

Home widgets

Weather, horoscope and currency share one WidgetCard — 280px gradient panel, 2px radius, dot-separated header with a trailing arrow. Only the gradient and body differ. Flags, condition glyphs and the decorative backdrops are caller-supplied, being data or artwork rather than design-system pieces.

SectionHeader

Opens each themed run of cards on the home page. Nav chips reuse CategorySelection, the same component the Menu Bar uses. Icon and overflow are slots — the design draws a different one-off glyph per section (newspaper, play-circle, coffee-02) and they are not in the exported icon set.

ArticleCard

One component for every article card. They share an anatomy — image, title, rule, description, stats — and differ only by layout, emphasis and which stats are present. The reading-time chip comes from readingTimeLabel(wordCount); it is null on every list endpoint, since the API only returns wordCount on news detail.

DropdownMenu

240px panel, 8px radius, shadow-menu. Built on the semantic tokens rather than literal fills, which is what makes it theme-aware.

Avatar

Ring variant uses #36AAE0 — note this is not the Light Blue token.

Auth

The login modal (85:31183) and the verification-code field (85:31725 empty, 85:31737 typed). The code row shows all three cell states at once: filled, empty, and focused once you click one.

App shell

Header, Menu Bar, Live Banner and Footer render full-bleed below, outside this container — that is the point: the backgrounds span the viewport while their content stays capped at max-w-site.