Components

Every component below is restyled via CSS targeting Docusaurus/Infima's existing class names in src/css/brand.css — no theme swizzling was required for any of them.

Buttons

Two variants, both rounded (--shumoul-radius-sm), both lift 1px on hover:

Variant	Background	Text	Use
.button--primary	--shumoul-blue-text (#0065D8)	White	Primary call to action (hero "Get Started", quick links)
.button--secondary / .button--outline	Transparent, bordered	--shumoul-text	Secondary actions (GitHub link, "View on GitHub")

Hover states shift toward teal (--shumoul-teal-soft background, teal border) on secondary buttons, and to a darker blue on primary buttons — giving buttons a visible but subtle state change without introducing a third hue.

Cards

border-radius: var(--shumoul-radius-lg), background: var(--shumoul-surface), border: 1px solid var(--shumoul-border). On hover, the border brightens to --shumoul-border-strong and a soft shadow appears (0 8px 24px rgba(0,0,0,.25)) — no color shift, just elevation, keeping the interaction subtle per the "never distracting" motion rule.

Badges

Pill-shaped (--shumoul-radius-pill), three variants mapped to the two brand hues only:

• .badge--primary → blue tint background, blue text
• .badge--secondary → neutral surface background, secondary text
• .badge--success → teal tint background, teal text (used where Docusaurus's default would be green)

Admonitions

See Colors § Semantic mapping for the full reasoning. In short: note/info get a blue left-border accent, tip/success get teal, and warning/danger get a heavier left-border (6px instead of 4px) plus bolder text to signal severity without red or orange.

Tables

Rounded container (--shumoul-radius-md) with overflow: hidden so the header row's background respects the rounded corners; header row uses --shumoul-surface-raised; alternating row tint is a near-invisible 1.5% white overlay, not a distinct color band.

Code blocks

Rounded container matching cards, syntax highlighted with prismThemes.vsLight (light mode) / prismThemes.vsDark (dark mode) — chosen specifically to avoid Dracula's purple-tinted background, which would have violated the "no purple" rule at the chrome level. Token colors inside code (keywords, strings, comments) are a readability concern, not brand chrome, and are intentionally exempt from the two-hue-only rule — see Theme Rules.

Tabs

Underline-style active indicator in brand blue, no background fill on the active tab (keeps the "minimal" requirement), hover state uses the same blue-tint used everywhere else for consistency.

Pagination (prev/next)

Rounded card-style links (--shumoul-radius-md) with a bordered surface background; hover state shifts border and background to the blue tint, matching the sidebar/navbar hover language so the whole site feels like one interaction model.

Table of Contents (TOC)

Left-bordered rail using --shumoul-border, active link in blue with font-weight: 600 — no background fill, keeping the TOC visually quiet next to the main content.

Search box

Pill-shaped (--shumoul-radius-pill), surface-colored background, brand-blue focus ring (box-shadow: 0 0 0 3px var(--shumoul-blue-soft)) replacing the browser/Infima default focus style with a consistent on-brand one.

Version dropdown

Restyled as a rounded dropdown menu matching the navbar's link hover language (blue tint on hover/active), consistent with every other interactive nav element rather than looking like a separate widget.

Icons

Docusaurus/Infima's built-in icons (external-link arrow, TOC carets, hamburger menu, search glyph) are all monochrome SVGs using currentColor already — no new icon library was introduced (keeping bundle size unchanged, per the performance requirement). Consistency was achieved by normalizing opacity (0.7–0.85) across all of them in brand.css, rather than mixing icon families or introducing a new dependency.

Where this is defined

src/css/brand.css — one section per component, in the same order as this page.