Design system
Design system / About

Cabana anatomy, Leadjr judgment.

This page explains how to use the system while converting template components into Leadjr-native components.

PaperReceiptsActions
08 / Contract

The design system is the override layer.

Cabana can tell us what component coverage should exist. It does not decide how Leadjr should sound, look, or behave.

Design system wins

When Cabana, Base UI defaults, or a local prototype conflicts with Leadjr, Leadjr wins.

Base UI is the primitive layer

Use Base UI for accessibility and behavior, then style the result into Leadjr's square, editorial language.

Cabana is anatomy

Treat Cabana as a coverage checklist: variants, states, parts, and examples. Do not import its visual personality.

Receipts stay nearby

Any surface that implies a professional claim must keep evidence, status, or provenance close enough to inspect.

08B / Conversion

How new components enter the system.

Every imported idea has to become native to the evidence newspaper: useful, restrained, responsive, and source-aware.

  1. 01

    Start from Base UI behavior and accessibility, then apply Leadjr surface language.

  2. 02

    Use Cabana to understand parts, variants, states, and expected coverage.

  3. 03

    Replace Cabana's visual personality with hard borders, editorial type, warm paper, and restrained state language.

  4. 04

    Do not add a component until its responsive behavior is clear at mobile, tablet, and desktop widths.

  5. 05

    Do not let example content imply a professional claim unless it is visibly sample-only or backed by evidence.