Sample lesson · Harbor UI

Tokens, not values: colour and spacing in Harbor UI

Every colour and space comes from a token, so a change reaches every screen.

• Harbor UI has 18 tokens. Use them by name instead of writing a colour or a pixel value. A raw value cannot be found or changed in one place, and it skips the contrast checks.
• Start with these: --semantic-text (Body and heading text on canvas or surface), --semantic-text-muted (Secondary text and hints; never for body copy below 14px), --semantic-canvas (Page background), --semantic-surface (Cards, fields and dialogs), --semantic-action (Primary action fill and links) and --semantic-danger (Error text and destructive actions).

Your practice file, academy-sandbox/PriceTag.tsx, has a raw colour. Pick a fix.

/** Practice: this file is seeded with a raw colour. Fix it so the system's checks pass. */
export function PriceTag(props: { label: string }) {
  return <p style={{ color: "#0f1f3d" }}>{props.label}</p>;
}

1. Use the role token --semantic-text

   /** Practice: this file is seeded with a raw colour. Fix it so the system's checks pass. */
   export function PriceTag(props: { label: string }) {
     return <p style={{ color: "var(--semantic-text)" }}>{props.label}</p>;
   }
   

   Passes: no findings. In your repository, loom academy check tokens would record the lesson.

2. Use the primitive --primitive-navy-900

   /** Practice: this file is seeded with a raw colour. Fix it so the system's checks pass. */
   export function PriceTag(props: { label: string }) {
     return <p style={{ color: "var(--primitive-navy-900)" }}>{props.label}</p>;
   }
   

   Not yet: primitives skip the role. Use --semantic-text so a theme change reaches this text.

3. Write it as rgb()

   /** Practice: this file is seeded with a raw colour. Fix it so the system's checks pass. */
   export function PriceTag(props: { label: string }) {
     return <p style={{ color: "rgb(15, 31, 61)" }}>{props.label}</p>;
   }
   

   Not yet: Hard-coded colour rgb(15, 31, 61) (color).

4. Delete the component

   export {};
   

   Not yet: PriceTag is gone: a fix keeps the component working.