Design system

Your design system is the shared foundation behind every component: the color of a primary action, the height of an input, the typeface of a heading, and the space between elements. CodeRocket stores those decisions as a structured model and turns them into CSS.

Start with global tokens

A token is a named design value. Instead of choosing a different blue for every button, you define primary once and reuse it throughout the library.

Changes apply to components that inherit those values. Open a complete block alongside individual components to check whether your choices still work in context.

Keep color pairs together

Semantic colors describe a purpose: primary for the main action, surface for a card, and destructive for a destructive action. Each background has a matching foreground for readable content.

For example, these values belong together:

:root {
  --cr-primary: #2563eb;
  --cr-primary-foreground: #ffffff;
  --cr-surface: #ffffff;
  --cr-surface-foreground: #171717;
  --cr-radius-md: 6px;
  --cr-control-height: 32px;
}

The Accessibility view checks the main text/background pairs against a 4.5:1 contrast threshold. Changing only a background can make its text unreadable. Review focus, hover, disabled and error states in your application as well.

Give one component an override

An override changes a particular component while keeping the rest of your system consistent. For example, you can give dialogs a larger corner radius without rounding every input.

1. Open Components and select Dialog.
2. In Customize, adjust its component-specific Corner radius.
3. Switch to Button to confirm that its shared radius is unchanged.
4. Use Reset in the Dialog override section to return to the inherited value.

The style model resolves from the broadest rule to the most specific:

Global tokens → Component recipe → Component override → Instance style

Recipes provide component defaults. Overrides are your library-level exceptions. After export, your application can provide instance props, classes or styles when one use needs a different treatment.

Typography and font loading

Set the body and heading families separately. The visual controls offer system sans, serif and monospace stacks, which work without external font requests.

The model also accepts inter and geist. If you use either in a generated or imported design, load that font in your application. Selecting a family in the model does not download a font file. Use the exported ThemeScope so components inherit the intended typography and overlays share the same theme.

Light and dark appearance

Switching appearance in the editor starts from the corresponding semantic palette. It replaces the current color palette; use Undo if you want your previous edited colors back.

An export contains the appearance you saved. For a runtime theme toggle in your app, maintain a token set for each appearance and switch the CSS scope in your application.

A model you can keep

Every export includes design-system.json with schemaVersion: 1. It contains the saved name, framework, appearance, global tokens, recipes and overrides. The model is separate from the generated React or Vue source, so you can keep both under version control.

Save records a new version of the model. Restoring a version changes the design preview; it does not delete custom components saved to the library. Export and installation explains how to move the complete library into your project.