Skip to main content
Version: Next

Shumoul Brand System

This is the single source of truth for the Shumoul Developer Portal's visual identity. Every color, font, spacing value, and component style used across this site is defined once, here, as CSS custom properties in src/css/custom.css and src/css/brand.css — no page or component should hardcode a color, font, or spacing value that duplicates what's documented here.

What this covers​

  • Colors — the approved palette, the exact CSS variables, and the WCAG contrast data behind every text/background pairing.
  • Typography — Cairo font loading, weights, and the responsive type scale.
  • Spacing — the 4px-based spacing scale and corner-radius system.
  • Components — buttons, cards, badges, admonitions, tables, code blocks, tabs, pagination, and icons.
  • Logo Usage — the official mark, its dark-mode variant, and placement rules.
  • Theme Rules — dark-mode-primary policy, motion, accessibility, and the rules for extending this system without breaking it.

Why this exists​

The portal must visually match platform.shumoul.com and read as one official Shumoul product family, not a generic Docusaurus site. This folder is that contract — anyone adding a new page, component, or framework section to this portal should style it using only the tokens documented here.

The golden rule​

If a color, font, spacing value, or radius isn't defined on this page or its children, don't invent one — add it here first, then use it everywhere it's needed.