Starter kits

A starter kit in sugarcube is a set of ready-to-use design tokens that we created for you. They are perfect for smaller teams or projects that do not already have a design system or the resources to build one. They are also great as jumping off points for rapid CSS prototyping.

Design tokens can be structured in many different ways. Sugarcube’s starter kits follow what we might call a layered approach:

1. Primitive Tokens. These are things like raw color values, spacing units, font sizes, etc. For example, color.neutral.100 might be a primitive token that maps to a value like #fafafa.

2. Semantic Tokens. This is a layer on top of primitive tokens. For example, surface.primary is a semantic token that might reference, or be aliased to, color.neutral.100.

3. Theme Layer. These are typically tokens that override, or assign different values to, semantic tokens. For example, in a ‘dark’ theme we might assign to surface.primary the value color.neutral.900 instead of color.neutral.100.

Sugarcube uses a hybrid approach for border and stroke tokens, balancing flexibility with practicality:

For components and elements that need frequent customization, we use decomposed individual properties:

{
  "stroke": {
    "width": {
      "thin": { "$value": { "value": 1, "unit": "px" } },
      "medium": { "$value": { "value": 2, "unit": "px" } }
    },
    "style": { "$value": "solid" },
    "color": {
      "primary": { "$value": "{color.neutral.200}" },
      "accent": { "$value": "{color.accent.500}" }
    }
  }
}

{
  "panel": {
    "stroke": {
      "width": { "$value": "{stroke.width.thin}" },
      "style": { "$value": "{stroke.style}" },
      "color": { "$value": "{stroke.color.primary}" }
    }
  },
  "input": {
    "stroke": {
      "width": { "$value": "{stroke.width.thin}" },
      "style": { "$value": "{stroke.style}" },
      "color": { "$value": "{stroke.color.primary}" }
    }
  }
}

{
  "card": {
    "border": {
      "width": { "$value": "{panel.stroke.width}" },
      "style": { "$value": "{panel.stroke.style}" },
      "color": { "$value": "{panel.stroke.color}" }
    }
  }
}

.card {
  border-style: var(--card-border-style);
  border-width: var(--card-border-width);
  border-color: var(--card-border-color);
}

/* Form inputs also use decomposed approach */
input {
  border-style: var(--input-border-style);
  border-width: var(--input-border-width);
  border-color: var(--input-border-color);
}

For global elements that are rarely customized, we use composite border tokens for cleaner CSS:

{
  "border": {
    "blockquote": {
      "$value": {
        "width": "{blockquote.stroke.width}",
        "style": "{blockquote.stroke.style}",
        "color": "{blockquote.stroke.color}"
      }
    },
    "table": {
      "$value": {
        "width": "{table.stroke.width}",
        "style": "{table.stroke.style}",
        "color": "{table.stroke.color}"
      }
    }
  }
}

/* Cleaner global styles */
blockquote {
  border-inline-start: var(--blockquote-border);
}

table {
  border: var(--table-border);
}

Decomposed for Flexibility

Components and form inputs benefit from granular control:

.card[data-variant="accent"] {
  --card-border-color: var(--stroke-color-accent);
}

input[data-variant="error"] {
  --input-border-color: var(--stroke-color-error);
}

Composite for Cleanliness

Global elements rarely need customization, so cleaner CSS is preferred:

/* Simple semantic border usage */
blockquote {
  border-inline-start: var(--blockquote-border);
}

Global Changes

Semantic stroke changes still affect all related elements:

:root {
  --panel-stroke-color: var(--stroke-color-accent);
}

Appropriate Constraints

This approach recognizes that different elements have different customization needs:

• Components & Form Inputs → Frequent customization → Decomposed
• Global Elements → Rare customization → Composite

The following kits are currently available from the sugarcube registry. This may expand in the future.

• flexoki-static
• flexoki-fluid
• tailwind-static
• tailwind-fluid
• radix-static
• radix-fluid

Each kit is named after the MIT-licensed color palette it uses and whether it uses static or fluid space and sizing tokens.

Learn more about static and fluid dimensions in the design tokens documentation.

These are starter kits - the clue is in the name! While we’ve made thoughtful decisions about token structure and composition patterns, you’re completely free to:

• Extend the token system with your own semantic tokens
• Customize the composition patterns to match your needs
• Modify the hybrid approach to be fully decomposed or fully composite
• Add new primitive tokens or semantic layers
• Reorganize the token hierarchy to better suit your project

The starter kits provide a solid foundation and demonstrate best practices, but they’re designed to be a starting point, not a constraint. Feel free to adapt and evolve them as your design system grows!