Begoniav2.0

How to use

Resources

Quick start

  1. Load the fonts and icons

    Open Sans and the Phosphor duotone icons load from a CDN. Mosk is not on Google Fonts: download it from the Typography page and add it with @font-face.

    HTML
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/duotone/style.css">

  2. Add the tokens

    The semantic tokens below come from tokens.json, the same file this site is built from. Every card on the other pages copies its own value when you click it.

    CSS
    :root {
  --bg: #092730;
  --text: #FBFBFB;
  --text-muted: #CBCFD1;
  --accent: #75DFDB;
  --card-bg: #194f7166;
  --card-border: #c1e8f366;
}

:root[data-theme='light'] {
  --bg: #ECECEC;
  --text: #1C1C1C;
  --text-muted: #555555;
  --accent: #006DD9;
  --card-bg: #46b9dc40;
  --card-border: #2391ff66;
}

  3. Set the base styles

    CSS
    body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Mosk", "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2 { font-family: "Open Sans", sans-serif; font-weight: 600; }

/* Phosphor's back layer is 20%; Begonia uses 25%. */
.ph-duotone::before { opacity: 0.25; }

How the pieces fit

  1. Figma file

    The source of the design.

  2. Claude artifact

    Keeps the tokens, the brand book and components.

  3. This site

    Documents the tokens and copies them as CSS.

Design in Figma, keep the values as tokens in the Claude artifact, then use this site to find a value and copy it straight into code.