Design system · v1.1

The Optimal design system

Tokens, type, voice, components and logos for every surface Optimal puts in front of people: the site, the app, social, decks and the clinic's own screens.

<optimal-logo> · "Into Range"

Foundations

Single-purpose specimen cards, each built straight from colors_and_type.css.

Brand colourForest, deep accent, sage, navy NeutralsCream and bone surfaces GreysThe warm grey ramp AlphaRings, badges, capsules Semanticbg, fg, border and link roles Type · websiteCastoro display, Public Sans UI Type · appHanken Grotesk and Inter Spacing and shapePills, 8 px cards, 4 px chrome ComponentsButtons, chips, cards, accordion

Brand

Logos, the animated logo and iconography.

LogoWordmarks, symbols, clearspace NEW IN 1.1Animated logoStage and inline variants, light and dark IconsThe Iconify sets in use NEW IN 1.2IllustrationEngraved plates, engravings, isometric figures NEW IN 1.2Social1080px frames, hatching, capsules, grain

UI kits

Hi-fi recreations from the 2024 Figma. Copy the markup, but take the address, prices and dates from the README's current facts.

WebsiteHero to footer, desktop Weight-loss appHome, lessons, chat, progress Landing pageA full page composed from the system

Use it in a project

Pin a tag so a later change never restyles a shipped page.

Claude Code skill

# in any repo, then cloud sessions pick it up
git submodule add \
  https://github.com/Optimal-Research-Team/optimal-design-system \
  .claude/skills/optimal-design-system

CDN

<!-- tokens + optional dark theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/
  Optimal-Research-Team/optimal-design-system@v1.2.0/
  colors_and_type.css">

npm

npm i github:Optimal-Research-Team/
  optimal-design-system#v1.2.0

import 'optimal-design-system/tokens.css'