--- version: alpha name: "Loom Base" description: "The Loom Base design system (@loom/base), exported by Loom from its records: 2312 tokens, 69 components, 11 patterns." colors: "--base-color-background-canvas": "#f3eee3" "--base-color-background-surface": "#fbf8f1" "--base-color-background-sunken": "#ebe4d6" "--base-color-background-subtle": "#e2d9c8" "--base-color-background-inverse": "#17140f" "--base-color-background-selected": "#eceefa" "--base-color-background-backdrop": "#13110f7a" "--base-color-text-default": "#17140f" "--base-color-text-subtle": "#4a443a" "--base-color-text-disabled": "#8f8571" "--base-color-text-inverse": "#f3eee3" "--base-color-text-link": "#1e2a78" "--base-color-text-link-hover": "#151d55" "--base-color-text-accent": "#b02a1e" "--base-color-border-default": "#d1c6b2" "--base-color-border-strong": "#716856" "--base-color-border-inverse": "#17140f" "--base-color-border-accent": "#b02a1e" "--base-color-border-rule": "#17140f" "--base-color-action-primary-background": "#17140f" "--base-color-action-primary-background-hover": "#38332b" "--base-color-action-primary-background-pressed": "#4a443a" "--base-color-action-primary-text": "#fbf8f1" "--base-color-action-secondary-background": "#fbf8f1" "--base-color-action-secondary-background-hover": "#ebe4d6" "--base-color-action-secondary-background-pressed": "#e2d9c8" "--base-color-action-secondary-text": "#17140f" "--base-color-action-secondary-border": "#17140f" "--base-color-action-quiet-background": "#00000000" "--base-color-action-quiet-background-hover": "#ebe4d6" "--base-color-action-quiet-background-pressed": "#e2d9c8" "--base-color-action-quiet-text": "#17140f" "--base-color-action-danger-background": "#a0312a" "--base-color-action-danger-background-hover": "#7f1814" "--base-color-action-danger-background-pressed": "#600204" "--base-color-action-danger-text": "#fefdfb" "--base-color-action-disabled-background": "#e2d9c8" "--base-color-action-disabled-border": "#d1c6b2" "--base-color-control-background": "#fbf8f1" "--base-color-control-background-hover": "#f3eee3" "--base-color-control-checked": "#1e2a78" "--base-color-control-on-checked": "#fbf8f1" "--base-color-control-track": "#d1c6b2" "--base-color-control-thumb": "#fbf8f1" "--base-color-focus-ring": "#1e2a78" "--base-color-status-info-background": "#e8f1ff" "--base-color-status-info-border": "#5478ba" "--base-color-status-info-text": "#152e5e" "--base-color-status-success-background": "#d5fcde" "--base-color-status-success-border": "#3f8b58" "--base-color-status-success-text": "#003b1a" "--base-color-status-warning-background": "#ffedd8" "--base-color-status-warning-border": "#a46b0c" "--base-color-status-warning-text": "#452a00" "--base-color-status-danger-background": "#ffebe8" "--base-color-status-danger-border": "#a0312a" "--base-color-status-danger-text": "#7f1814" "--base-color-status-neutral-background": "#e8e6e1" "--base-color-status-neutral-border": "#c0bdb8" "--base-color-status-neutral-text": "#32302c" "--base-color-ai-background": "#f2edff" "--base-color-ai-border": "#826bab" "--base-color-ai-text": "#4d386f" "--base-color-field-indigo-background": "#1e2a78" "--base-color-field-madder-background": "#b02a1e" "--base-color-field-saffron-background": "#e9a21b" "--base-color-field-teal-background": "#0b6b66" "--base-color-field-ink-background": "#17140f" "--base-color-field-on-dark-text": "#f3eee3" "--base-color-field-on-dark-text-subtle": "#e2d9c8" "--base-color-field-on-dark-border": "#f3eee3" "--base-color-field-on-dark-focus": "#f3eee3" "--base-color-field-on-dark-action": "#fbf8f1" "--base-color-field-on-dark-action-hover": "#ffffff" "--base-color-field-on-dark-action-pressed": "#e2d9c8" "--base-color-field-on-dark-action-text": "#17140f" "--base-color-field-on-light-text": "#17140f" "--base-color-field-on-light-text-subtle": "#26221c" "--base-color-field-on-light-border": "#17140f" "--base-color-field-on-light-focus": "#17140f" "--base-color-field-on-light-action": "#17140f" "--base-color-field-on-light-action-hover": "#38332b" "--base-color-field-on-light-action-pressed": "#4a443a" "--base-color-field-on-light-action-text": "#fbf8f1" "--base-color-thread-see": "#6f7fe0" "--base-color-thread-shape": "#d4574a" "--base-color-thread-govern": "#e9a21b" "--base-color-thread-run": "#1d948c" "--base-color-thread-slack": "#38332b" "--base-color-health-woven-thread": "#1e2a78" "--base-color-health-woven-ground": "#dde1f6" "--base-color-health-holding-thread": "#0b6b66" "--base-color-health-holding-ground": "#c5e6e2" "--base-color-health-shape-thread": "#9e6b08" "--base-color-health-shape-ground": "#fbe7bd" "--base-color-health-loose-thread": "#b02a1e" "--base-color-health-loose-ground": "#fbecea" "--base-color-health-chip-background": "#fbf8f1" "--base-color-health-chip-text": "#17140f" typography: "--base-font-family-sans": { fontFamily: "'Atkinson Hyperlegible Next', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, system-ui, sans-serif" } "--base-font-family-mono": { fontFamily: "'Martian Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace" } "--base-font-family-display": { fontFamily: "Archivo, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, system-ui, sans-serif" } "--base-font-family-overline": { fontFamily: "'Martian Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace" } "--base-font-size-display": { fontSize: "64px" } "--base-font-size-headline-lg": { fontSize: "36px" } "--base-font-size-headline-md": { fontSize: "30px" } "--base-font-size-headline-sm": { fontSize: "24px" } "--base-font-size-title": { fontSize: "20px" } "--base-font-size-subtitle": { fontSize: "18px" } "--base-font-size-body-lg": { fontSize: "18px" } "--base-font-size-body": { fontSize: "16px" } "--base-font-size-body-sm": { fontSize: "14px" } "--base-font-size-label": { fontSize: "14px" } "--base-font-size-caption": { fontSize: "13px" } "--base-font-size-overline": { fontSize: "12px" } "--base-font-size-page-title": { fontSize: "56px" } "--base-font-size-figure": { fontSize: "72px" } "--base-font-size-masthead": { fontSize: "72px" } "--base-font-size-numeral": { fontSize: "120px" } "--base-font-size-band": { fontSize: "96px" } "--base-font-weight-regular": { fontWeight: 400 } "--base-font-weight-medium": { fontWeight: 500 } "--base-font-weight-strong": { fontWeight: 600 } "--base-font-weight-display": { fontWeight: 900 } "--base-font-weight-numeral": { fontWeight: 900 } rounded: "--base-radius-control": "2px" "--base-radius-surface": "2px" "--base-radius-pill": "9999px" "--base-radius-none": "0px" spacing: "--base-space-inset-xs": "4px" "--base-space-inset-sm": "8px" "--base-space-inset-md": "16px" "--base-space-inset-lg": "24px" "--base-space-inset-control-x": "16px" "--base-space-stack-xs": "4px" "--base-space-stack-sm": "8px" "--base-space-stack-md": "16px" "--base-space-stack-lg": "24px" "--base-space-stack-xl": "40px" "--base-space-inline-xs": "4px" "--base-space-inline-sm": "8px" "--base-space-inline-md": "16px" "--base-space-inline-lg": "24px" "--base-space-layout-gutter": "16px" "--base-space-layout-section": "48px" "--base-space-weave": "4px" components: base-ai-status: { backgroundColor: "{colors.--base-color-ai-background}", rounded: "{rounded.--base-radius-surface}", padding: "{spacing.--base-space-inset-md}" } base-ai-status-detail: { textColor: "{colors.--base-color-text-default}" } base-ai-status-error: { backgroundColor: "{colors.--base-color-status-danger-background}" } base-ai-status-icon: { width: "20px", height: "20px", textColor: "{colors.--base-color-ai-text}" } base-ai-status-icon-error: { textColor: "{colors.--base-color-status-danger-text}" } base-ai-status-icon-partial-failure: { textColor: "{colors.--base-color-status-warning-text}" } base-ai-status-partial-failure: { backgroundColor: "{colors.--base-color-status-warning-background}" } base-ai-status-step: { textColor: "{colors.--base-color-text-default}" } base-ai-status-title: { textColor: "{colors.--base-color-text-default}" } base-alert-danger: { backgroundColor: "{colors.--base-color-status-danger-background}" } base-alert-dismiss: { rounded: "{rounded.--base-radius-control}", textColor: "{colors.--base-color-text-default}" } base-alert-dismiss-hover: { backgroundColor: "{colors.--base-color-background-subtle}" } base-alert-icon-danger: { textColor: "{colors.--base-color-status-danger-text}" } base-alert-icon-info: { textColor: "{colors.--base-color-status-info-text}" } base-alert-icon-success: { textColor: "{colors.--base-color-status-success-text}" } base-alert-icon-warning: { textColor: "{colors.--base-color-status-warning-text}" } base-alert-info: { backgroundColor: "{colors.--base-color-status-info-background}" } base-alert-message: { textColor: "{colors.--base-color-text-default}" } base-alert-success: { backgroundColor: "{colors.--base-color-status-success-background}" } base-alert-title: { textColor: "{colors.--base-color-text-default}" } base-alert-warning: { backgroundColor: "{colors.--base-color-status-warning-background}" } base-app-header: { backgroundColor: "{colors.--base-color-background-canvas}" } base-app-header-brand: { textColor: "{colors.--base-color-text-default}", rounded: "{rounded.--base-radius-control}" } base-app-header-context: { textColor: "{colors.--base-color-text-subtle}" } base-app-shell: { backgroundColor: "{colors.--base-color-background-canvas}", textColor: "{colors.--base-color-text-default}" } base-avatar: { rounded: "{rounded.--base-radius-pill}", backgroundColor: "{colors.--base-color-status-neutral-background}" } base-avatar-initials: { textColor: "{colors.--base-color-status-neutral-text}" } base-badge-ai: { backgroundColor: "{colors.--base-color-ai-background}", textColor: "{colors.--base-color-ai-text}" } base-badge-danger: { backgroundColor: "{colors.--base-color-status-danger-background}", textColor: "{colors.--base-color-status-danger-text}" } base-badge-info: { backgroundColor: "{colors.--base-color-status-info-background}", textColor: "{colors.--base-color-status-info-text}" } base-badge-neutral: { backgroundColor: "{colors.--base-color-status-neutral-background}", textColor: "{colors.--base-color-status-neutral-text}" } base-badge-success: { backgroundColor: "{colors.--base-color-status-success-background}", textColor: "{colors.--base-color-status-success-text}" } base-badge-warning: { backgroundColor: "{colors.--base-color-status-warning-background}", textColor: "{colors.--base-color-status-warning-text}" } base-band-scale-bandLabel: { textColor: "{colors.--base-color-text-default}" } base-band-scale-heading: { textColor: "{colors.--base-color-text-default}" } base-band-scale-item-holding: { textColor: "{colors.--base-color-health-holding-thread}" } base-band-scale-item-loose: { textColor: "{colors.--base-color-health-loose-thread}" } base-band-scale-item-shape: { textColor: "{colors.--base-color-health-shape-thread}" } base-band-scale-item-woven: { textColor: "{colors.--base-color-health-woven-thread}" } base-band-scale-marker: { textColor: "{colors.--base-color-text-accent}" } base-band-scale-swatch: { height: "40px", backgroundColor: "{colors.--base-color-background-sunken}" } base-band-scale-swatch-holding: { backgroundColor: "{colors.--base-color-health-holding-ground}" } base-band-scale-swatch-loose: { backgroundColor: "{colors.--base-color-health-loose-ground}" } base-band-scale-swatch-shape: { backgroundColor: "{colors.--base-color-health-shape-ground}" } base-band-scale-swatch-woven: { backgroundColor: "{colors.--base-color-health-woven-ground}" } base-box: { textColor: "{colors.--base-color-text-default}" } base-box-canvas: { backgroundColor: "{colors.--base-color-background-canvas}" } base-box-sunken: { backgroundColor: "{colors.--base-color-background-sunken}" } base-box-surface: { backgroundColor: "{colors.--base-color-background-surface}", rounded: "{rounded.--base-radius-surface}" } base-breadcrumbs-current: { textColor: "{colors.--base-color-text-subtle}" } base-breadcrumbs-link: { textColor: "{colors.--base-color-text-link}", rounded: "{rounded.--base-radius-control}" } base-breadcrumbs-link-hover: { textColor: "{colors.--base-color-text-link-hover}" } base-button-danger: { backgroundColor: "{colors.--base-color-action-danger-background}", textColor: "{colors.--base-color-action-danger-text}" } base-button-danger-hover: { backgroundColor: "{colors.--base-color-action-danger-background-hover}" } base-button-danger-pressed: { backgroundColor: "{colors.--base-color-action-danger-background-pressed}" } base-button-disabled: { backgroundColor: "{colors.--base-color-action-disabled-background}", textColor: "{colors.--base-color-text-disabled}" } base-button-primary: { backgroundColor: "{colors.--base-color-action-primary-background}", textColor: "{colors.--base-color-action-primary-text}" } base-button-primary-hover: { backgroundColor: "{colors.--base-color-action-primary-background-hover}" } base-button-primary-pressed: { backgroundColor: "{colors.--base-color-action-primary-background-pressed}" } base-button-quiet: { backgroundColor: "{colors.--base-color-action-quiet-background}", textColor: "{colors.--base-color-action-quiet-text}" } base-button-quiet-hover: { backgroundColor: "{colors.--base-color-action-quiet-background-hover}" } base-button-quiet-pressed: { backgroundColor: "{colors.--base-color-action-quiet-background-pressed}" } base-button-secondary: { backgroundColor: "{colors.--base-color-action-secondary-background}", textColor: "{colors.--base-color-action-secondary-text}" } base-button-secondary-hover: { backgroundColor: "{colors.--base-color-action-secondary-background-hover}" } base-button-secondary-pressed: { backgroundColor: "{colors.--base-color-action-secondary-background-pressed}" } base-button-selected: { backgroundColor: "{colors.--base-color-background-selected}", textColor: "{colors.--base-color-text-link}" } base-card-body: { textColor: "{colors.--base-color-text-default}" } base-card-description: { textColor: "{colors.--base-color-text-subtle}" } base-card-outlined: { backgroundColor: "{colors.--base-color-background-surface}" } base-card-raised: { backgroundColor: "{colors.--base-color-background-surface}" } base-card-sunken: { backgroundColor: "{colors.--base-color-background-sunken}" } base-card-title: { textColor: "{colors.--base-color-text-default}" } base-checkbox-box: { width: "16px", height: "16px", rounded: "{rounded.--base-radius-control}", backgroundColor: "{colors.--base-color-control-background}" } base-checkbox-box-checked: { backgroundColor: "{colors.--base-color-control-checked}" } base-checkbox-box-disabled: { backgroundColor: "{colors.--base-color-action-disabled-background}" } base-checkbox-group-control: { width: "16px", height: "16px", rounded: "{rounded.--base-radius-control}", backgroundColor: "{colors.--base-color-control-background}" } base-checkbox-group-control-disabled: { backgroundColor: "{colors.--base-color-action-disabled-background}" } base-checkbox-group-control-selected: { backgroundColor: "{colors.--base-color-control-checked}" } base-checkbox-group-error: { textColor: "{colors.--base-color-status-danger-text}" } base-checkbox-group-hint: { textColor: "{colors.--base-color-text-subtle}" } base-checkbox-group-itemLabel: { textColor: "{colors.--base-color-text-default}" } base-checkbox-group-itemLabel-disabled: { textColor: "{colors.--base-color-text-disabled}" } base-checkbox-group-label: { textColor: "{colors.--base-color-text-default}" } base-checkbox-group-mark: { textColor: "{colors.--base-color-control-on-checked}" } base-checkbox-hint: { textColor: "{colors.--base-color-text-subtle}" } base-checkbox-label: { textColor: "{colors.--base-color-text-default}" } base-checkbox-label-disabled: { textColor: "{colors.--base-color-text-disabled}" } base-checkbox-mark: { textColor: "{colors.--base-color-control-on-checked}" } base-citation-link: { textColor: "{colors.--base-color-ai-text}", rounded: "{rounded.--base-radius-control}", backgroundColor: "{colors.--base-color-ai-background}" } base-cloth-caption: { textColor: "{colors.--base-color-text-default}" } base-cloth-cell-holding: { backgroundColor: "{colors.--base-color-health-holding-ground}" } base-cloth-cell-loose: { backgroundColor: "{colors.--base-color-health-loose-ground}" } base-cloth-cell-shape: { backgroundColor: "{colors.--base-color-health-shape-ground}" } base-cloth-cell-table: { backgroundColor: "{colors.--base-color-background-surface}" } base-cloth-cell-woven: { backgroundColor: "{colors.--base-color-health-woven-ground}" } base-cloth-cellCount: { textColor: "{colors.--base-color-health-chip-text}" } base-cloth-cellLabel: { textColor: "{colors.--base-color-health-chip-text}" } base-cloth-corner: { textColor: "{colors.--base-color-text-subtle}" } base-cloth-family: { textColor: "{colors.--base-color-text-default}" } base-cloth-glyph-holding: { textColor: "{colors.--base-color-health-holding-thread}" } base-cloth-glyph-loose: { textColor: "{colors.--base-color-health-loose-thread}" } base-cloth-glyph-shape: { textColor: "{colors.--base-color-health-shape-thread}" } base-cloth-glyph-woven: { textColor: "{colors.--base-color-health-woven-thread}" } base-cloth-product: { textColor: "{colors.--base-color-text-default}" } base-cloth-tag: { backgroundColor: "{colors.--base-color-health-chip-background}", textColor: "{colors.--base-color-health-chip-text}", rounded: "{rounded.--base-radius-control}" } base-cloth-weave-holding: { textColor: "{colors.--base-color-health-holding-thread}" } base-cloth-weave-loose: { textColor: "{colors.--base-color-health-loose-thread}" } base-cloth-weave-shape: { textColor: "{colors.--base-color-health-shape-thread}" } base-cloth-weave-woven: { textColor: "{colors.--base-color-health-woven-thread}" } base-colour-block-description-indigo: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-description-madder: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-description-saffron: { textColor: "{colors.--base-color-field-on-light-text}" } base-colour-block-description-teal: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-indigo: { backgroundColor: "{colors.--base-color-field-indigo-background}" } base-colour-block-label-indigo: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-label-madder: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-label-saffron: { textColor: "{colors.--base-color-field-on-light-text}" } base-colour-block-label-teal: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-link-indigo: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-link-madder: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-link-saffron: { textColor: "{colors.--base-color-field-on-light-text}" } base-colour-block-link-teal: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-linkIcon-indigo: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-linkIcon-madder: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-linkIcon-saffron: { textColor: "{colors.--base-color-field-on-light-text}" } base-colour-block-linkIcon-teal: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-madder: { backgroundColor: "{colors.--base-color-field-madder-background}" } base-colour-block-saffron: { backgroundColor: "{colors.--base-color-field-saffron-background}" } base-colour-block-teal: { backgroundColor: "{colors.--base-color-field-teal-background}" } base-colour-block-value-indigo: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-value-madder: { textColor: "{colors.--base-color-field-on-dark-text}" } base-colour-block-value-saffron: { textColor: "{colors.--base-color-field-on-light-text}" } base-colour-block-value-teal: { textColor: "{colors.--base-color-field-on-dark-text}" } base-combo-box-button: { textColor: "{colors.--base-color-text-subtle}" } base-combo-box-control: { backgroundColor: "{colors.--base-color-control-background}", rounded: "{rounded.--base-radius-control}", textColor: "{colors.--base-color-text-default}" } base-combo-box-control-disabled: { backgroundColor: "{colors.--base-color-action-disabled-background}", textColor: "{colors.--base-color-text-disabled}" } base-combo-box-control-hover: { backgroundColor: "{colors.--base-color-control-background-hover}" } base-combo-box-empty: { textColor: "{colors.--base-color-text-subtle}" } base-combo-box-error: { textColor: "{colors.--base-color-status-danger-text}" } base-combo-box-hint: { textColor: "{colors.--base-color-text-subtle}" } base-combo-box-label: { textColor: "{colors.--base-color-text-default}" } base-combo-box-option: { textColor: "{colors.--base-color-text-default}" } base-combo-box-option-disabled: { textColor: "{colors.--base-color-text-disabled}" } base-combo-box-option-focus-visible: { backgroundColor: "{colors.--base-color-background-subtle}" } base-combo-box-option-hover: { backgroundColor: "{colors.--base-color-background-subtle}" } base-combo-box-option-selected: { backgroundColor: "{colors.--base-color-background-selected}" } base-combo-box-popover: { backgroundColor: "{colors.--base-color-background-surface}", rounded: "{rounded.--base-radius-control}" } base-combo-box-required: { textColor: "{colors.--base-color-status-danger-text}" } base-confirm-action: { backgroundColor: "{colors.--base-color-background-surface}", rounded: "{rounded.--base-radius-surface}", padding: "{spacing.--base-space-inset-md}" } base-confirm-action-description: { textColor: "{colors.--base-color-text-subtle}" } base-confirm-action-outcome: { textColor: "{colors.--base-color-text-subtle}" } base-confirm-action-step: { textColor: "{colors.--base-color-text-default}" } base-confirm-action-title: { textColor: "{colors.--base-color-text-default}" } base-dialog: { backgroundColor: "{colors.--base-color-background-surface}", textColor: "{colors.--base-color-text-default}", rounded: "{rounded.--base-radius-surface}", padding: "{spacing.--base-space-inset-lg}" } base-dialog-backdrop: { backgroundColor: "{colors.--base-color-background-backdrop}", padding: "{spacing.--base-space-inset-md}" } base-dialog-body: { textColor: "{colors.--base-color-text-default}" } base-dialog-close: { rounded: "{rounded.--base-radius-control}", textColor: "{colors.--base-color-text-subtle}" } base-dialog-close-hover: { backgroundColor: "{colors.--base-color-background-subtle}" } base-dialog-description: { textColor: "{colors.--base-color-text-subtle}" } base-dialog-title: { textColor: "{colors.--base-color-text-default}" } base-disclosure-chevron: { width: "20px", height: "20px", textColor: "{colors.--base-color-text-subtle}" } base-disclosure-content: { textColor: "{colors.--base-color-text-default}" } base-disclosure-trigger: { textColor: "{colors.--base-color-text-default}", rounded: "{rounded.--base-radius-control}" } base-disclosure-trigger-hover: { backgroundColor: "{colors.--base-color-background-subtle}" } base-drawer: { backgroundColor: "{colors.--base-color-background-surface}", textColor: "{colors.--base-color-text-default}", padding: "{spacing.--base-space-inset-lg}", width: "480px" } base-drawer-backdrop: { backgroundColor: "{colors.--base-color-background-backdrop}" } base-drawer-body: { textColor: "{colors.--base-color-text-default}" } base-drawer-close: { rounded: "{rounded.--base-radius-control}", textColor: "{colors.--base-color-text-subtle}" } base-drawer-close-hover: { backgroundColor: "{colors.--base-color-background-subtle}" } base-drawer-description: { textColor: "{colors.--base-color-text-subtle}" } base-drawer-title: { textColor: "{colors.--base-color-text-default}" } base-empty-state-description: { textColor: "{colors.--base-color-text-subtle}" } base-empty-state-icon: { width: "24px", height: "24px", textColor: "{colors.--base-color-text-subtle}" } base-empty-state-title: { textColor: "{colors.--base-color-text-default}" } base-error-summary: { backgroundColor: "{colors.--base-color-background-surface}", rounded: "{rounded.--base-radius-surface}", padding: "{spacing.--base-space-inset-md}" } base-error-summary-link: { textColor: "{colors.--base-color-status-danger-text}", rounded: "{rounded.--base-radius-control}" } base-error-summary-title: { textColor: "{colors.--base-color-text-default}" } base-feedback-controls-thanks: { textColor: "{colors.--base-color-text-subtle}" } base-form-field-error: { textColor: "{colors.--base-color-status-danger-text}" } base-form-field-hint: { textColor: "{colors.--base-color-text-subtle}" } base-form-field-label: { textColor: "{colors.--base-color-text-default}" } base-form-field-required: { textColor: "{colors.--base-color-status-danger-text}" } base-heading: { textColor: "{colors.--base-color-text-default}" } base-health-band-edge-indigo: { textColor: "{colors.--base-color-field-on-dark-text}" } base-health-band-edge-madder: { textColor: "{colors.--base-color-field-on-dark-text}" } base-health-band-edge-saffron: { textColor: "{colors.--base-color-field-on-light-text}" } base-health-band-edge-teal: { textColor: "{colors.--base-color-field-on-dark-text}" } base-health-band-eyebrow-indigo: { textColor: "{colors.--base-color-field-on-dark-text-subtle}" } base-health-band-eyebrow-madder: { textColor: "{colors.--base-color-field-on-dark-text-subtle}" } base-health-band-eyebrow-saffron: { textColor: "{colors.--base-color-field-on-light-text-subtle}" } base-health-band-eyebrow-teal: { textColor: "{colors.--base-color-field-on-dark-text-subtle}" } base-health-band-headline-indigo: { textColor: "{colors.--base-color-field-on-dark-text}" } base-health-band-headline-madder: { textColor: "{colors.--base-color-field-on-dark-text}" } base-health-band-headline-saffron: { textColor: "{colors.--base-color-field-on-light-text}" } base-health-band-headline-teal: { textColor: "{colors.--base-color-field-on-dark-text}" } base-health-band-indigo: { backgroundColor: "{colors.--base-color-field-indigo-background}" } base-health-band-lede-indigo: { textColor: "{colors.--base-color-field-on-dark-text}" } base-health-band-lede-madder: { textColor: "{colors.--base-color-field-on-dark-text}" } base-health-band-lede-saffron: { textColor: "{colors.--base-color-field-on-light-text}" } base-health-band-lede-teal: { textColor: "{colors.--base-color-field-on-dark-text}" } base-health-band-madder: { backgroundColor: "{colors.--base-color-field-madder-background}" } base-health-band-saffron: { backgroundColor: "{colors.--base-color-field-saffron-background}" } base-health-band-teal: { backgroundColor: "{colors.--base-color-field-teal-background}" } base-icon-glyph-ai: { textColor: "{colors.--base-color-ai-text}" } base-icon-glyph-danger: { textColor: "{colors.--base-color-status-danger-text}" } base-icon-glyph-info: { textColor: "{colors.--base-color-status-info-text}" } base-icon-glyph-subtle: { textColor: "{colors.--base-color-text-subtle}" } base-icon-glyph-success: { textColor: "{colors.--base-color-status-success-text}" } base-icon-glyph-warning: { textColor: "{colors.--base-color-status-warning-text}" } base-link: { textColor: "{colors.--base-color-text-link}", rounded: "{rounded.--base-radius-control}" } base-link-hover: { textColor: "{colors.--base-color-text-link-hover}" } base-loose-threads-bandLabel: { textColor: "{colors.--base-color-text-subtle}" } base-loose-threads-cellLink: { textColor: "{colors.--base-color-text-link}" } base-loose-threads-knot-holding: { textColor: "{colors.--base-color-health-holding-thread}" } base-loose-threads-knot-loose: { textColor: "{colors.--base-color-health-loose-thread}" } base-loose-threads-knot-shape: { textColor: "{colors.--base-color-health-shape-thread}" } base-loose-threads-knot-woven: { textColor: "{colors.--base-color-health-woven-thread}" } base-loose-threads-link: { textColor: "{colors.--base-color-text-default}" } base-loose-threads-summary: { textColor: "{colors.--base-color-text-subtle}" } base-loose-threads-title: { textColor: "{colors.--base-color-text-default}" } base-loose-threads-where: { textColor: "{colors.--base-color-text-subtle}" } base-masthead: { backgroundColor: "{colors.--base-color-background-canvas}" } base-masthead-context: { textColor: "{colors.--base-color-text-default}" } base-masthead-dateline: { textColor: "{colors.--base-color-text-default}" } base-masthead-issue: { textColor: "{colors.--base-color-text-default}" } base-masthead-note: { textColor: "{colors.--base-color-text-default}" } base-masthead-title: { textColor: "{colors.--base-color-text-default}" } base-masthead-titleAccent: { textColor: "{colors.--base-color-text-accent}" } base-menu-disabled: { textColor: "{colors.--base-color-text-disabled}" } base-menu-hover: { backgroundColor: "{colors.--base-color-action-secondary-background-hover}" } base-menu-item: { textColor: "{colors.--base-color-text-default}" } base-menu-item-disabled: { textColor: "{colors.--base-color-text-disabled}" } base-menu-item-focus-visible: { backgroundColor: "{colors.--base-color-background-subtle}" } base-menu-item-hover: { backgroundColor: "{colors.--base-color-background-subtle}" } base-menu-item-selected: { backgroundColor: "{colors.--base-color-background-selected}" } base-menu-popover: { backgroundColor: "{colors.--base-color-background-surface}", rounded: "{rounded.--base-radius-control}" } base-menu-pressed: { backgroundColor: "{colors.--base-color-action-secondary-background-pressed}" } base-menu-quiet: { backgroundColor: "{colors.--base-color-action-quiet-background}", textColor: "{colors.--base-color-action-quiet-text}" } base-menu-secondary: { backgroundColor: "{colors.--base-color-action-secondary-background}", textColor: "{colors.--base-color-action-secondary-text}" } base-numeral-caption: { textColor: "{colors.--base-color-text-default}" } base-numeral-label: { textColor: "{colors.--base-color-text-default}" } base-numeral-unit: { textColor: "{colors.--base-color-text-accent}" } base-numeral-value: { textColor: "{colors.--base-color-text-default}" } base-page-header-description: { textColor: "{colors.--base-color-text-subtle}" } base-page-header-eyebrow: { textColor: "{colors.--base-color-text-accent}" } base-page-header-title: { textColor: "{colors.--base-color-text-default}" } base-pagination-gap: { textColor: "{colors.--base-color-text-subtle}" } base-pagination-page: { rounded: "{rounded.--base-radius-control}", backgroundColor: "{colors.--base-color-action-quiet-background}", textColor: "{colors.--base-color-text-default}" } base-pagination-page-current: { backgroundColor: "{colors.--base-color-background-surface}" } base-pagination-page-hover: { backgroundColor: "{colors.--base-color-action-quiet-background-hover}" } base-pagination-step: { rounded: "{rounded.--base-radius-control}", backgroundColor: "{colors.--base-color-action-quiet-background}", textColor: "{colors.--base-color-action-quiet-text}" } base-pagination-step-disabled: { textColor: "{colors.--base-color-text-disabled}" } base-pagination-step-hover: { backgroundColor: "{colors.--base-color-action-quiet-background-hover}" } base-popover-body: { textColor: "{colors.--base-color-text-default}" } base-popover-popover: { backgroundColor: "{colors.--base-color-background-surface}", rounded: "{rounded.--base-radius-control}", padding: "{spacing.--base-space-inset-md}" } base-popover-title: { textColor: "{colors.--base-color-text-default}" } base-popover-trigger-ai: { backgroundColor: "{colors.--base-color-ai-background}", textColor: "{colors.--base-color-ai-text}", rounded: "{rounded.--base-radius-pill}" } base-popover-trigger-hover: { backgroundColor: "{colors.--base-color-action-secondary-background-hover}" } base-popover-trigger-quiet: { backgroundColor: "{colors.--base-color-action-quiet-background}", textColor: "{colors.--base-color-action-quiet-text}" } base-popover-trigger-secondary: { backgroundColor: "{colors.--base-color-action-secondary-background}", textColor: "{colors.--base-color-action-secondary-text}" } base-progress-bar-label: { textColor: "{colors.--base-color-text-default}" } base-progress-bar-track: { height: "6px", backgroundColor: "{colors.--base-color-control-track}", rounded: "{rounded.--base-radius-pill}" } base-progress-bar-value: { textColor: "{colors.--base-color-text-subtle}" } base-proof-diff-from: { textColor: "{colors.--base-color-text-subtle}" } base-proof-diff-to: { textColor: "{colors.--base-color-text-accent}" } base-provider: { backgroundColor: "{colors.--base-color-background-canvas}", textColor: "{colors.--base-color-text-default}" } base-radio-group-control: { width: "16px", height: "16px", rounded: "{rounded.--base-radius-pill}", backgroundColor: "{colors.--base-color-control-background}", textColor: "{colors.--base-color-control-checked}" } base-radio-group-control-disabled: { backgroundColor: "{colors.--base-color-action-disabled-background}" } base-radio-group-dot: { backgroundColor: "{colors.--base-color-control-checked}" } base-radio-group-error: { textColor: "{colors.--base-color-status-danger-text}" } base-radio-group-hint: { textColor: "{colors.--base-color-text-subtle}" } base-radio-group-itemLabel: { textColor: "{colors.--base-color-text-default}" } base-radio-group-itemLabel-disabled: { textColor: "{colors.--base-color-text-disabled}" } base-radio-group-label: { textColor: "{colors.--base-color-text-default}" } base-seal: { width: "96px", height: "96px", padding: "{spacing.--base-space-inset-xs}", rounded: "{rounded.--base-radius-control}", backgroundColor: "{colors.--base-color-background-surface}" } base-seal-emptyMark: { textColor: "{colors.--base-color-text-subtle}" } base-seal-emptyText: { textColor: "{colors.--base-color-text-accent}" } base-seal-sealedMark: { textColor: "{colors.--base-color-text-accent}" } base-seal-sealedName: { textColor: "{colors.--base-color-text-accent}" } base-section-nav-count: { textColor: "{colors.--base-color-text-subtle}" } base-section-nav-link: { textColor: "{colors.--base-color-text-default}" } base-select-check: { width: "16px", height: "16px", textColor: "{colors.--base-color-text-link}" } base-select-chevron: { width: "20px", height: "20px", textColor: "{colors.--base-color-text-subtle}" } base-select-error: { textColor: "{colors.--base-color-status-danger-text}" } base-select-hint: { textColor: "{colors.--base-color-text-subtle}" } base-select-label: { textColor: "{colors.--base-color-text-default}" } base-select-option: { textColor: "{colors.--base-color-text-default}" } base-select-option-disabled: { textColor: "{colors.--base-color-text-disabled}" } base-select-option-focus-visible: { backgroundColor: "{colors.--base-color-background-subtle}" } base-select-option-hover: { backgroundColor: "{colors.--base-color-background-subtle}" } base-select-option-selected: { backgroundColor: "{colors.--base-color-background-selected}" } base-select-popover: { backgroundColor: "{colors.--base-color-background-surface}", rounded: "{rounded.--base-radius-control}" } base-select-required: { textColor: "{colors.--base-color-status-danger-text}" } base-select-trigger: { backgroundColor: "{colors.--base-color-control-background}", rounded: "{rounded.--base-radius-control}", textColor: "{colors.--base-color-text-default}" } base-select-trigger-disabled: { backgroundColor: "{colors.--base-color-action-disabled-background}", textColor: "{colors.--base-color-text-disabled}" } base-select-trigger-hover: { backgroundColor: "{colors.--base-color-control-background-hover}" } base-side-nav-badge: { textColor: "{colors.--base-color-text-subtle}" } base-side-nav-link: { textColor: "{colors.--base-color-text-subtle}", rounded: "{rounded.--base-radius-control}" } base-side-nav-link-current: { textColor: "{colors.--base-color-text-default}", backgroundColor: "{colors.--base-color-background-selected}" } base-side-nav-link-hover: { backgroundColor: "{colors.--base-color-background-subtle}", textColor: "{colors.--base-color-text-default}" } base-sidenote: { textColor: "{colors.--base-color-text-subtle}" } base-sidenote-mark: { textColor: "{colors.--base-color-text-accent}" } base-skeleton-line1: { backgroundColor: "{colors.--base-color-background-subtle}", rounded: "{rounded.--base-radius-control}" } base-skeleton-line2: { backgroundColor: "{colors.--base-color-background-subtle}", rounded: "{rounded.--base-radius-control}", height: "12px" } base-skeleton-line3: { backgroundColor: "{colors.--base-color-background-subtle}", rounded: "{rounded.--base-radius-control}", height: "12px" } base-skip-link: { backgroundColor: "{colors.--base-color-background-inverse}", textColor: "{colors.--base-color-text-inverse}", rounded: "{rounded.--base-radius-control}" } base-sources-list-heading: { textColor: "{colors.--base-color-text-default}" } base-sources-list-link: { textColor: "{colors.--base-color-text-link}" } base-sources-list-provenance: { textColor: "{colors.--base-color-text-subtle}" } base-sources-list-publisher: { textColor: "{colors.--base-color-text-subtle}" } base-spinner-arc: { textColor: "{colors.--base-color-control-checked}" } base-spinner-label: { textColor: "{colors.--base-color-text-default}" } base-story-header-byline: { textColor: "{colors.--base-color-text-subtle}" } base-story-header-deck: { textColor: "{colors.--base-color-text-default}" } base-story-header-kicker: { textColor: "{colors.--base-color-text-accent}" } base-story-header-title: { textColor: "{colors.--base-color-text-default}" } base-streaming-text-body: { textColor: "{colors.--base-color-text-default}" } base-streaming-text-cursor: { backgroundColor: "{colors.--base-color-ai-border}" } base-streaming-text-status: { textColor: "{colors.--base-color-text-subtle}" } base-switch-hint: { textColor: "{colors.--base-color-text-subtle}" } base-switch-label: { textColor: "{colors.--base-color-text-default}" } base-switch-label-disabled: { textColor: "{colors.--base-color-text-disabled}" } base-switch-thumb: { width: "14px", height: "14px", rounded: "{rounded.--base-radius-pill}", backgroundColor: "{colors.--base-color-control-thumb}" } base-switch-thumb-checked: { backgroundColor: "{colors.--base-color-control-on-checked}" } base-switch-track: { width: "36px", height: "20px", rounded: "{rounded.--base-radius-pill}", backgroundColor: "{colors.--base-color-control-track}" } base-switch-track-checked: { backgroundColor: "{colors.--base-color-control-checked}" } base-switch-track-disabled: { backgroundColor: "{colors.--base-color-action-disabled-background}" } base-table: { backgroundColor: "{colors.--base-color-background-surface}" } base-table-cell: { textColor: "{colors.--base-color-text-default}" } base-table-column: { textColor: "{colors.--base-color-text-subtle}" } base-table-empty: { textColor: "{colors.--base-color-text-subtle}", padding: "{spacing.--base-space-inset-md}" } base-table-head: { backgroundColor: "{colors.--base-color-background-sunken}" } base-table-row-hover: { backgroundColor: "{colors.--base-color-background-subtle}" } base-table-row-selected: { backgroundColor: "{colors.--base-color-background-selected}" } base-tabs-panel: { textColor: "{colors.--base-color-text-default}" } base-tabs-tab: { textColor: "{colors.--base-color-text-subtle}", backgroundColor: "{colors.--base-color-action-quiet-background}" } base-tabs-tab-disabled: { textColor: "{colors.--base-color-text-disabled}" } base-tabs-tab-hover: { textColor: "{colors.--base-color-text-default}" } base-tabs-tab-selected: { textColor: "{colors.--base-color-text-default}" } base-tag-ai: { backgroundColor: "{colors.--base-color-ai-background}", textColor: "{colors.--base-color-ai-text}" } base-tag-info: { backgroundColor: "{colors.--base-color-status-info-background}", textColor: "{colors.--base-color-status-info-text}" } base-tag-neutral: { backgroundColor: "{colors.--base-color-status-neutral-background}", textColor: "{colors.--base-color-status-neutral-text}" } base-tag-remove-hover: { backgroundColor: "{colors.--base-color-background-subtle}" } base-text-area-error: { textColor: "{colors.--base-color-status-danger-text}" } base-text-area-hint: { textColor: "{colors.--base-color-text-subtle}" } base-text-area-input: { backgroundColor: "{colors.--base-color-control-background}", rounded: "{rounded.--base-radius-control}", textColor: "{colors.--base-color-text-default}" } base-text-area-input-disabled: { backgroundColor: "{colors.--base-color-action-disabled-background}", textColor: "{colors.--base-color-text-disabled}" } base-text-area-input-hover: { backgroundColor: "{colors.--base-color-control-background-hover}" } base-text-area-label: { textColor: "{colors.--base-color-text-default}" } base-text-area-required: { textColor: "{colors.--base-color-status-danger-text}" } base-text-danger: { textColor: "{colors.--base-color-status-danger-text}" } base-text-default: { textColor: "{colors.--base-color-text-default}" } base-text-field-error: { textColor: "{colors.--base-color-status-danger-text}" } base-text-field-hint: { textColor: "{colors.--base-color-text-subtle}" } base-text-field-input: { backgroundColor: "{colors.--base-color-control-background}", rounded: "{rounded.--base-radius-control}", textColor: "{colors.--base-color-text-default}" } base-text-field-input-disabled: { backgroundColor: "{colors.--base-color-action-disabled-background}", textColor: "{colors.--base-color-text-disabled}" } base-text-field-input-hover: { backgroundColor: "{colors.--base-color-control-background-hover}" } base-text-field-label: { textColor: "{colors.--base-color-text-default}" } base-text-field-required: { textColor: "{colors.--base-color-status-danger-text}" } base-text-subtle: { textColor: "{colors.--base-color-text-subtle}" } base-text-success: { textColor: "{colors.--base-color-status-success-text}" } base-toast-region-description: { textColor: "{colors.--base-color-text-inverse}" } base-toast-region-dismiss: { textColor: "{colors.--base-color-text-inverse}", rounded: "{rounded.--base-radius-control}" } base-toast-region-title: { textColor: "{colors.--base-color-text-inverse}" } base-toast-region-toast: { backgroundColor: "{colors.--base-color-background-inverse}", rounded: "{rounded.--base-radius-surface}", padding: "{spacing.--base-space-inset-sm}" } base-tooltip: { backgroundColor: "{colors.--base-color-background-inverse}", textColor: "{colors.--base-color-text-inverse}", rounded: "{rounded.--base-radius-control}" } base-warp-rail: { backgroundColor: "{colors.--base-color-field-ink-background}", width: "240px" } base-warp-rail-brandSub: { textColor: "{colors.--base-color-field-on-dark-text-subtle}" } base-warp-rail-brandTitle: { textColor: "{colors.--base-color-field-on-dark-text}" } base-warp-rail-knot-govern: { backgroundColor: "{colors.--base-color-thread-govern}" } base-warp-rail-knot-run: { backgroundColor: "{colors.--base-color-thread-run}" } base-warp-rail-knot-see: { backgroundColor: "{colors.--base-color-thread-see}" } base-warp-rail-knot-shape: { backgroundColor: "{colors.--base-color-thread-shape}" } base-warp-rail-mark: { width: "24px", height: "24px", textColor: "{colors.--base-color-field-on-dark-text}" } base-warp-rail-sectionLink: { textColor: "{colors.--base-color-field-on-dark-text}", rounded: "{rounded.--base-radius-control}" } base-warp-rail-sectionLink-current: { backgroundColor: "{colors.--base-color-field-on-dark-action}", textColor: "{colors.--base-color-field-on-dark-action-text}" } base-warp-rail-threadLink: { textColor: "{colors.--base-color-field-on-dark-text-subtle}", rounded: "{rounded.--base-radius-control}" } base-warp-rail-threadLink-current: { textColor: "{colors.--base-color-field-on-dark-text}" } base-weave-draft-cell: { width: "32px", height: "32px", backgroundColor: "{colors.--base-color-background-sunken}" } base-weave-draft-cell-selected: { backgroundColor: "{colors.--base-color-health-woven-ground}" } base-weave-draft-change: { textColor: "{colors.--base-color-text-default}" } base-weave-draft-column: { textColor: "{colors.--base-color-text-default}" } base-weave-draft-corner: { textColor: "{colors.--base-color-text-subtle}" } base-weave-draft-mark: { width: "20px", height: "20px", textColor: "{colors.--base-color-health-woven-thread}" } --- # Loom Base > Generated by Loom from the system's records; do not edit by hand. Regenerate with `npm run design-md -- --project loom-base`. > Records: knowledge digest `a11d84b446fa`, source `ac29ae96a998`, observed build. 2312 tokens, 69 component contracts, 11 patterns in the snapshot; 80 governance records (real). > Format: DESIGN.md alpha (github.com/google-labs-code/design.md). Token names are the system's own. Values are the default mode (light). "not defined" means the records hold no value; do not fill it in. > The front matter's `components` entries group component-tier tokens named `-[-]` (inferred from the names; the values are the records'). ## Overview Loom Base ships as `@loom/base` 1.0.0. Owner: base-core. Rights: Original work of the system owner. - **principles** guidance: not defined (no principles foundation in the records). ### Token tiers and modes Tiers are stated in the token records. | Tier | Tokens | |---|---| | semantic | 213 | | primitive | 311 | | component | 1788 | Modes: light (default), dark (65 tokens), high-contrast (75 tokens), field-dark (22 tokens), field-light (22 tokens), ja (10 tokens), compact (12 tokens), marked (1 token), reduced (3 tokens). The "Also set in" column names the modes that set a token again. Per-mode values are not defined in Loom's records; use the token (CSS custom property), which the system's theme resolves per mode. ## Colors | Token | Value | Also set in | Role | |---|---|---|---| | `--base-color-background-canvas` | #f3eee3 (`--base-color-palette-greige-25`) | dark, high-contrast | The page behind everything: unbleached cotton. Use for the app background, never for controls. | | `--base-color-background-surface` | #fbf8f1 (`--base-color-palette-greige-0`) | dark, high-contrast | Sheets, panels, inputs and overlays that sit on the canvas: bleached cotton. | | `--base-color-background-sunken` | #ebe4d6 (`--base-color-palette-greige-50`) | dark, high-contrast | Recessed areas: table headers, code, wells. Not for interactive fills. | | `--base-color-background-subtle` | #e2d9c8 (`--base-color-palette-greige-100`) | dark, high-contrast | Hover fill for quiet controls and selected rows. | | `--base-color-background-inverse` | #17140f (`--base-color-palette-greige-900`) | dark, high-contrast | Ink surfaces on a light page: tooltips, the skip link. Pair with color.text.inverse. | | `--base-color-background-selected` | #eceefa (`--base-color-palette-dye-indigo-50`) | dark, high-contrast | Fill for a selected item in a list, menu or navigation. | | `--base-color-background-backdrop` | #13110f7a (`--base-color-palette-scrim`) | dark | Scrim behind modal dialogs and drawers. Never for content. | | `--base-color-text-default` | #17140f (`--base-color-palette-greige-900`) | dark, high-contrast, field-dark, field-light | Loom-black ink. Body text and headings on canvas and surface. | | `--base-color-text-subtle` | #4a443a (`--base-color-palette-greige-600`) | dark, high-contrast, field-dark, field-light | Secondary text: hints, captions, metadata. Still meets 4.5:1 on canvas and surface. | | `--base-color-text-disabled` | #8f8571 (`--base-color-palette-greige-400`) | dark, high-contrast | Text of disabled controls only. Exempt from contrast (WCAG 1.4.3); never for readable content. | | `--base-color-text-inverse` | #f3eee3 (`--base-color-palette-greige-25`) | dark, high-contrast | Text on color.background.inverse. | | `--base-color-text-link` | #1e2a78 (`--base-color-palette-dye-indigo-800`) | dark, high-contrast, field-dark, field-light | Indigo: links and anything that goes somewhere. | | `--base-color-text-link-hover` | #151d55 (`--base-color-palette-dye-indigo-900`) | dark, high-contrast, field-dark, field-light | Link under the pointer. | | `--base-color-text-accent` | #b02a1e (`--base-color-palette-dye-madder-600`) | dark, high-contrast, field-dark, field-light | Madder: eyebrows, the current marker on a scale, accent words. Decorative emphasis, never the only signal. | | `--base-color-border-default` | #d1c6b2 (`--base-color-palette-greige-200`) | dark, high-contrast, field-dark, field-light | Hairlines between rows and regions. Not enough contrast to identify a control. | | `--base-color-border-strong` | #716856 (`--base-color-palette-greige-500`) | dark, high-contrast, field-dark, field-light | Boundaries that identify a control (inputs, checkboxes, secondary buttons). Meets 3:1 against surface. | | `--base-color-border-inverse` | #17140f (`--base-color-palette-greige-900`) | dark, high-contrast | Rules that must read as ink, e.g. the active tab indicator in high contrast. | | `--base-color-border-accent` | #b02a1e (`--base-color-palette-dye-madder-600`) | dark, high-contrast, field-dark, field-light | The shu thread: the marker under the current section and the rule of AI-free accents. Non-text, meets 3:1 on canvas and surface. Never for status or actions. | | `--base-color-border-rule` | #17140f (`--base-color-palette-greige-900`) | dark, high-contrast, field-dark, field-light | Heavy rules: under page heads, above columns and the cloth. | | `--base-color-action-primary-background` | #17140f (`--base-color-palette-greige-900`) | dark, high-contrast, field-dark, field-light | Primary action fill: loom-black ink. Colour is kept for meaning (dyes mark threads and health bands). | | `--base-color-action-primary-background-hover` | #38332b (`--base-color-palette-greige-700`) | dark, high-contrast, field-dark, field-light | Primary action under the pointer. | | `--base-color-action-primary-background-pressed` | #4a443a (`--base-color-palette-greige-600`) | dark, high-contrast, field-dark, field-light | Primary action while pressed. | | `--base-color-action-primary-text` | #fbf8f1 (`--base-color-palette-greige-0`) | dark, high-contrast, field-dark, field-light | Label on the primary fill. | | `--base-color-action-secondary-background` | #fbf8f1 (`--base-color-palette-greige-0`) | dark, field-dark, field-light | Fill for secondary actions. | | `--base-color-action-secondary-background-hover` | #ebe4d6 (`--base-color-palette-greige-50`) | dark, high-contrast, field-dark, field-light | Secondary action under the pointer. | | `--base-color-action-secondary-background-pressed` | #e2d9c8 (`--base-color-palette-greige-100`) | dark, high-contrast, field-dark, field-light | Secondary action while pressed. | | `--base-color-action-secondary-text` | #17140f (`--base-color-palette-greige-900`) | dark, high-contrast, field-dark, field-light | Label of secondary actions. | | `--base-color-action-secondary-border` | #17140f (`--base-color-palette-greige-900`) | dark, high-contrast, field-dark, field-light | Outline of secondary actions: an ink rule (well above 3:1). | | `--base-color-action-quiet-background` | #00000000 (`--base-color-palette-transparent`) | — | Quiet actions in toolbars and dense areas have no fill at rest. | | `--base-color-action-quiet-background-hover` | #ebe4d6 (`--base-color-palette-greige-50`) | dark, high-contrast, field-dark, field-light | Quiet action under the pointer. | | `--base-color-action-quiet-background-pressed` | #e2d9c8 (`--base-color-palette-greige-100`) | dark, high-contrast, field-dark, field-light | Quiet action while pressed. | | `--base-color-action-quiet-text` | #17140f (`--base-color-palette-greige-900`) | dark, high-contrast, field-dark, field-light | Label of quiet actions. | | `--base-color-action-danger-background` | #a0312a (`--base-color-palette-red-600`) | dark, high-contrast | Fill for an action that removes or loses something. Always paired with a confirmation. | | `--base-color-action-danger-background-hover` | #7f1814 (`--base-color-palette-red-700`) | dark, high-contrast | Danger action under the pointer. | | `--base-color-action-danger-background-pressed` | #600204 (`--base-color-palette-red-800`) | dark, high-contrast | Danger action while pressed. | | `--base-color-action-danger-text` | #fefdfb (`--base-color-palette-neutral-0`) | dark, high-contrast | Label on the danger fill. | | `--base-color-action-disabled-background` | #e2d9c8 (`--base-color-palette-greige-100`) | dark, high-contrast | Fill of any disabled action. | | `--base-color-action-disabled-border` | #d1c6b2 (`--base-color-palette-greige-200`) | dark, high-contrast | Outline of any disabled control. | | `--base-color-control-background` | #fbf8f1 (`--base-color-palette-greige-0`) | dark, high-contrast | Field background: inputs, selects, checkboxes. | | `--base-color-control-background-hover` | #f3eee3 (`--base-color-palette-greige-25`) | dark, high-contrast | Field under the pointer. | | `--base-color-control-checked` | #1e2a78 (`--base-color-palette-dye-indigo-800`) | dark, high-contrast | Fill of a checked checkbox, radio dot or switch track: indigo. | | `--base-color-control-on-checked` | #fbf8f1 (`--base-color-palette-greige-0`) | dark, high-contrast | Check mark and thumb on color.control.checked. | | `--base-color-control-track` | #d1c6b2 (`--base-color-palette-greige-200`) | dark, high-contrast | Unfilled track of a progress bar or an off switch, with color.border.strong as its edge. | | `--base-color-control-thumb` | #fbf8f1 (`--base-color-palette-greige-0`) | dark, high-contrast | Switch thumb when off. | | `--base-color-focus-ring` | #1e2a78 (`--base-color-palette-dye-indigo-800`) | dark, high-contrast, field-dark, field-light | Focus ring colour on every interactive element: indigo on the page, cotton or ink inside colour fields (surface modifier). Locked: lower layers may not change it (WCAG 2.4.7, 2.4.13). | | `--base-color-status-info-background` | #e8f1ff (`--base-color-palette-indigo-50`) | dark | Soft fill of informational messages. | | `--base-color-status-info-border` | #5478ba (`--base-color-palette-indigo-500`) | dark, high-contrast | Edge of informational messages. | | `--base-color-status-info-text` | #152e5e (`--base-color-palette-indigo-800`) | dark, high-contrast | Text and icon in informational messages. | | `--base-color-status-success-background` | #d5fcde (`--base-color-palette-green-50`) | dark | Soft fill of success messages. | | `--base-color-status-success-border` | #3f8b58 (`--base-color-palette-green-500`) | dark, high-contrast | Edge of success messages. | | `--base-color-status-success-text` | #003b1a (`--base-color-palette-green-800`) | dark, high-contrast | Text and icon in success messages. | | `--base-color-status-warning-background` | #ffedd8 (`--base-color-palette-amber-50`) | dark | Soft fill of warnings. | | `--base-color-status-warning-border` | #a46b0c (`--base-color-palette-amber-500`) | dark, high-contrast | Edge of warnings. | | `--base-color-status-warning-text` | #452a00 (`--base-color-palette-amber-800`) | dark, high-contrast | Text and icon in warnings. | | `--base-color-status-danger-background` | #ffebe8 (`--base-color-palette-red-50`) | dark | Soft fill of errors. | | `--base-color-status-danger-border` | #a0312a (`--base-color-palette-red-600`) | dark, high-contrast | Edge of errors and invalid fields. | | `--base-color-status-danger-text` | #7f1814 (`--base-color-palette-red-700`) | dark, high-contrast | Error text, error icons and the invalid-field message. | | `--base-color-status-neutral-background` | #e8e6e1 (`--base-color-palette-neutral-100`) | dark | Soft fill of neutral badges and tags. | | `--base-color-status-neutral-border` | #c0bdb8 (`--base-color-palette-neutral-300`) | dark, high-contrast | Edge of neutral badges and tags. | | `--base-color-status-neutral-text` | #32302c (`--base-color-palette-neutral-800`) | dark, high-contrast | Text of neutral badges and tags. | | `--base-color-ai-background` | #f2edff (`--base-color-palette-violet-50`) | dark | Fill that marks AI-generated content or an AI label. Locked so AI disclosure stays recognisable (EU AI Act Art. 50). | | `--base-color-ai-border` | #826bab (`--base-color-palette-violet-500`) | dark, high-contrast | Edge of AI-generated regions and the AI label. | | `--base-color-ai-text` | #4d386f (`--base-color-palette-violet-700`) | dark, high-contrast | Text of the AI label and AI status. | | `--base-color-field-indigo-background` | #1e2a78 (`--base-color-palette-dye-indigo-800`) | high-contrast | Indigo field (See, Tightly woven). A dark field: field-dark surface. | | `--base-color-field-madder-background` | #b02a1e (`--base-color-palette-dye-madder-600`) | high-contrast | Madder field (Shape, Loose threads). A dark field: field-dark surface. | | `--base-color-field-saffron-background` | #e9a21b (`--base-color-palette-dye-saffron-400`) | — | Saffron field (Govern, Taking shape). A light field: field-light surface, ink text. | | `--base-color-field-teal-background` | #0b6b66 (`--base-color-palette-dye-teal-600`) | high-contrast | Teal field (Run, Holding together). A dark field: field-dark surface. | | `--base-color-field-ink-background` | #17140f (`--base-color-palette-greige-900`) | dark, high-contrast | Ink field: the warp rail. A dark field: field-dark surface. | | `--base-color-field-on-dark-text` | #f3eee3 (`--base-color-palette-greige-25`) | high-contrast | Text on dark fields (indigo, madder, teal, ink). | | `--base-color-field-on-dark-text-subtle` | #e2d9c8 (`--base-color-palette-greige-100`) | high-contrast | Secondary text and eyebrows on dark fields; 4.5:1 on each. | | `--base-color-field-on-dark-border` | #f3eee3 (`--base-color-palette-greige-25`) | high-contrast | Borders and outline buttons on dark fields. | | `--base-color-field-on-dark-focus` | #f3eee3 (`--base-color-palette-greige-25`) | high-contrast | Focus ring on dark fields: cotton. | | `--base-color-field-on-dark-action` | #fbf8f1 (`--base-color-palette-greige-0`) | — | Primary action fill on dark fields. | | `--base-color-field-on-dark-action-hover` | #ffffff (`--base-color-palette-white`) | — | Primary action fill under the pointer on dark fields. | | `--base-color-field-on-dark-action-pressed` | #e2d9c8 (`--base-color-palette-greige-100`) | — | Pressed primary action on dark fields. | | `--base-color-field-on-dark-action-text` | #17140f (`--base-color-palette-greige-900`) | — | Text on the primary action on dark fields. | | `--base-color-field-on-light-text` | #17140f (`--base-color-palette-greige-900`) | high-contrast | Text on light fields (saffron). | | `--base-color-field-on-light-text-subtle` | #26221c (`--base-color-palette-greige-800`) | high-contrast | Secondary text and eyebrows on light fields. | | `--base-color-field-on-light-border` | #17140f (`--base-color-palette-greige-900`) | high-contrast | Borders and outline buttons on light fields. | | `--base-color-field-on-light-focus` | #17140f (`--base-color-palette-greige-900`) | high-contrast | Focus ring on light fields: ink. | | `--base-color-field-on-light-action` | #17140f (`--base-color-palette-greige-900`) | — | Primary action fill on light fields. | | `--base-color-field-on-light-action-hover` | #38332b (`--base-color-palette-greige-700`) | — | Primary action fill under the pointer on light fields. | | `--base-color-field-on-light-action-pressed` | #4a443a (`--base-color-palette-greige-600`) | — | Pressed primary action on light fields. | | `--base-color-field-on-light-action-text` | #fbf8f1 (`--base-color-palette-greige-0`) | — | Text on the primary action on light fields. | | `--base-color-thread-see` | #6f7fe0 (`--base-color-palette-dye-indigo-400`) | — | See thread: indigo. | | `--base-color-thread-shape` | #d4574a (`--base-color-palette-dye-madder-400`) | — | Shape thread: madder. | | `--base-color-thread-govern` | #e9a21b (`--base-color-palette-dye-saffron-400`) | — | Govern thread: saffron. | | `--base-color-thread-run` | #1d948c (`--base-color-palette-dye-teal-400`) | — | Run thread: teal. | | `--base-color-thread-slack` | #38332b (`--base-color-palette-greige-700`) | — | Unlit thread lines from a section to its warp thread. | | `--base-color-health-woven-thread` | #1e2a78 (`--base-color-palette-dye-indigo-800`) | high-contrast | Tightly woven: indigo thread. | | `--base-color-health-woven-ground` | #dde1f6 (`--base-color-palette-dye-indigo-100`) | — | Tightly woven: ground. | | `--base-color-health-holding-thread` | #0b6b66 (`--base-color-palette-dye-teal-600`) | high-contrast | Holding together: teal thread. | | `--base-color-health-holding-ground` | #c5e6e2 (`--base-color-palette-dye-teal-100`) | — | Holding together: ground. | | `--base-color-health-shape-thread` | #9e6b08 (`--base-color-palette-dye-saffron-600`) | high-contrast | Taking shape: saffron thread (deepened to 3.9:1 on cotton). | | `--base-color-health-shape-ground` | #fbe7bd (`--base-color-palette-dye-saffron-100`) | — | Taking shape: ground. | | `--base-color-health-loose-thread` | #b02a1e (`--base-color-palette-dye-madder-600`) | high-contrast | Loose threads: madder thread. | | `--base-color-health-loose-ground` | #fbecea (`--base-color-palette-dye-madder-50`) | — | Loose threads: ground. | | `--base-color-health-chip-background` | #fbf8f1 (`--base-color-palette-greige-0`) | high-contrast | Label chip on a cloth cell: bleached cotton in every mode, because cells keep their light grounds in dark mode. | | `--base-color-health-chip-text` | #17140f (`--base-color-palette-greige-900`) | high-contrast | Text on the cloth label chip, in every mode. | Primitive tier (181): | Token | Value | Also set in | Role | |---|---|---|---| | `--base-color-palette-scrim` | #13110f7a | — | Backdrop behind modal overlays. | | `--base-color-palette-scrim-strong` | #000000a8 | — | Backdrop in dark mode. | - `--base-color-palette-neutral-*`: `0` #fefdfb · `25` #f9f7f2 · `50` #f2f0eb · `100` #e8e6e1 · `200` #dbd9d4 · `300` #c0bdb8 · `400` #9b9892 · `500` #7b7873 · `600` #605d58 · `700` #474540 · `800` #32302c · `900` #201e1a · `950` #13110e - `--base-color-palette-indigo-*`: `50` #e8f1ff · `100` #d9e7ff · `200` #c5daff · `300` #9ebef8 · `400` #7598d9 · `500` #5478ba · `600` #3b5c9a · `700` #25437b · `800` #152e5e · `900` #081b42 · `950` #030f2e - `--base-color-palette-green-*`: `50` #d5fcde · `100` #c8f3d2 · `200` #b6e8c2 · `300` #92cfa2 · `400` #64ab78 · `500` #3f8b58 · `600` #216e3e · `700` #025428 · `800` #003b1a · `900` #00260e · `950` #001706 - `--base-color-palette-amber-*`: `50` #ffedd8 · `100` #ffe1bd · `200` #fad19f · `300` #e5b476 · `400` #c38c40 · `500` #a46b0c · `600` #815200 · `700` #603c00 · `800` #452a00 · `900` #2d1900 · `950` #1c0e00 - `--base-color-palette-red-*`: `50` #ffebe8 · `100` #ffddd8 · `200` #ffcbc3 · `300` #ffa194 · `400` #e37265 · `500` #c14f44 · `600` #a0312a · `700` #7f1814 · `800` #600204 · `900` #410001 · `950` #2b0000 - `--base-color-palette-violet-*`: `50` #f2edff · `100` #eae0ff · `200` #dfd0ff · `300` #c5b2eb · `400` #a18bca · `500` #826bab · `600` #66508d · `700` #4d386f · `800` #372553 · `900` #24143a · `950` #160927 - `--base-color-palette-greige-*`: `0` #fbf8f1 · `25` #f3eee3 · `50` #ebe4d6 · `100` #e2d9c8 · `200` #d1c6b2 · `300` #b3a892 · `400` #8f8571 · `500` #716856 · `600` #4a443a · `700` #38332b · `800` #26221c · `900` #17140f · `950` #0d0b08 - `--base-color-palette-dye-indigo-*`: `50` #eceefa · `100` #dde1f6 · `200` #c3c9ef · `300` #9aa5e6 · `400` #6f7fe0 · `500` #4f5fc4 · `600` #3a49a8 · `700` #2f3d97 · `800` #1e2a78 · `900` #151d55 · `950` #0d1238 - `--base-color-palette-dye-madder-*`: `50` #fbecea · `100` #f7d8d4 · `200` #efb3ab · `300` #e3877a · `400` #d4574a · `500` #c9473a · `600` #b02a1e · `700` #8f2016 · `800` #6e1810 · `900` #4c110b - `--base-color-palette-dye-saffron-*`: `50` #fdf4e1 · `100` #fbe7bd · `200` #f7d48a · `300` #f3bb4c · `400` #e9a21b · `500` #c98a0f · `600` #9e6b08 · `700` #7a5206 · `800` #573a04 · `900` #3a2603 - `--base-color-palette-dye-teal-*`: `50` #e3f3f1 · `100` #c5e6e2 · `200` #94d1ca · `300` #5fb6ad · `400` #1d948c · `500` #138a83 · `600` #0b6b66 · `700` #08544f · `800` #063e3b · `900` #042a28 - `--base-color-palette-cotton-*`: `0` #fffdf8 · `25` #f8f4ea · `50` #f1ece0 · `100` #e7e0d6 · `200` #dfdad1 · `300` #b6b0a9 · `400` #848992 · `500` #666c79 · `600` #4e5565 · `700` #374051 · `800` #232b3e · `900` #10182b · `950` #070e1d - `--base-color-palette-aizome-*`: `50` #e6efff · `100` #d2e2ff · `200` #b4cfff · `300` #8fb4fb · `400` #628eed · `500` #3f6bdc · `600` #2649c0 · `700` #1d369e · `800` #142779 · `900` #0d1c58 · `950` #07113a - `--base-color-palette-kaki-*`: `200` #f8caa7 · `300` #f5ab77 · `400` #ee8545 · `500` #de6420 · `600` #c04d15 · `700` #9f3d15 · `800` #7a3018 - `--base-color-palette-washi-*`: `0` #fffcf5 · `25` #f6f1e7 · `50` #eee7da · `100` #e5ddcd · `200` #cfc6b5 · `300` #ada492 · `400` #8a8273 · `500` #6e675b · `600` #4d473f · `700` #38332d · `800` #26231f · `900` #141210 · `950` #0b0a08 - `--base-color-palette-shu-*`: `50` #fcede8 · `100` #f9d9cf · `200` #f3b5a3 · `300` #ec9077 · `400` #e06a4d · `500` #cf4b2c · `600` #c0341d · `700` #9e2a16 · `800` #7b2212 · `900` #55190e - `--base-color-palette-*`: `white` #ffffff · `black` #000000 · `transparent` #00000000 Component tier: 592 tokens, listed per component under Components. ### Contrast pairs Contrast pairs: not defined. ### Guidance - **Color** guidance: not defined (foundation status: partial). - Gap recorded for Color: Guidance per foundation lives in docs/tokens.md and the token descriptions; no foundation page yet. ## Typography ### Font families | Token | Value | Also set in | Role | |---|---|---|---| | `--base-font-family-sans` | 'Atkinson Hyperlegible Next', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, system-ui, sans-serif (`--base-font-family-stack-interface`) | ja | Interface text. Swapped for the Japanese-first stack under :lang(ja). | | `--base-font-family-mono` | 'Martian Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace (`--base-font-family-stack-figure`) | — | Code, ids and tabular figures. | | `--base-font-family-display` | Archivo, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, system-ui, sans-serif (`--base-font-family-stack-display`) | ja | Display face (Archivo, set wide and black, in the default Selvedge theme; Fraunces in Atelier Press) for health-band headlines, page titles, headlines, numerals and empty-state titles. Not for body text, labels or controls. | | `--base-font-family-overline` | 'Martian Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace (`--base-font-family-stack-figure`) | ja | Eyebrows and kickers above titles (Martian Mono in the default Selvedge theme; IBM Plex Mono in Atelier Press). Short uppercase labels only. | Primitive tier (14): | Token | Value | Also set in | Role | |---|---|---|---| | `--base-font-family-stack-latin` | 'Helvetica Neue', 'Segoe UI', Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', Meiryo, system-ui, sans-serif | — | Latin-first stack with Japanese fallbacks. System fonts only: no font files ship with Base. | | `--base-font-family-stack-japanese` | 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Helvetica Neue', Arial, system-ui, sans-serif | — | Japanese-first stack (system Japanese fonts) used under :lang(ja). | | `--base-font-family-stack-interface` | 'Atkinson Hyperlegible Next', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, system-ui, sans-serif | — | Default theme (Selvedge) interface face: Atkinson Hyperlegible Next (OFL, shipped in fonts/), drawn for legibility at small sizes, then Noto Sans JP (the Japanese default, OFL). | | `--base-font-family-stack-display` | Archivo, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, system-ui, sans-serif | — | Default theme (Selvedge) display face: Archivo (OFL, shipped in fonts/; variable weight and width). The Provider sets font-stretch 125%, so Archivo is set wide; faces without a width axis ignore it. Japanese glyphs fall back to Noto Sans JP. | | `--base-font-family-stack-figure` | 'Martian Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace | — | Default theme (Selvedge) mono face: Martian Mono (OFL, shipped in fonts/) for eyebrows, figures and code. | | `--base-font-family-stack-schibsted-grotesk` | 'Schibsted Grotesk', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Helvetica Neue', Arial, system-ui, sans-serif | — | Atelier Press (alternative theme) interface face: Schibsted Grotesk (OFL, shipped in fonts/), a face drawn for a news publisher, then Noto Sans JP (the Japanese default, OFL) and system Japanese fonts for kana and kanji. | | `--base-font-family-stack-interface-japanese` | 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Atkinson Hyperlegible Next', system-ui, sans-serif | — | Interface stack under :lang(ja): Noto Sans JP (the Japanese default, OFL; owner decision 25 Oct 2026) for Japanese and Latin alike, then system Japanese fonts. | | `--base-font-family-stack-fraunces` | Fraunces, 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, Georgia, serif | — | Atelier Press (alternative theme) display face: Fraunces (OFL, shipped in fonts/; its optical size axis sharpens it as it grows) for mastheads, page titles, headlines and numerals. Japanese glyphs fall back to Noto Sans JP. | | `--base-font-family-stack-display-japanese` | 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, sans-serif | — | Display stack under :lang(ja): Noto Sans JP, so Japanese headings stay in the Japanese default face; figures and Latin runs inside Japanese text follow it. | | `--base-font-family-stack-ibm-plex-mono` | 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace | — | Atelier Press (alternative theme) dateline and code face: IBM Plex Mono (OFL, shipped in fonts/). Kickers, datelines, token names, code. | | `--base-font-family-stack-instrument-sans` | 'Instrument Sans', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, 'Helvetica Neue', Arial, system-ui, sans-serif | — | Kasuri interface face: Instrument Sans (OFL, shipped in fonts/), then Noto Sans JP and system Japanese fonts. | | `--base-font-family-stack-instrument-serif` | 'Instrument Serif', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, Georgia, serif | — | Kasuri display face: Instrument Serif (OFL, shipped in fonts/). Japanese glyphs fall back to Noto Sans JP. | | `--base-font-family-stack-jetbrains-mono` | 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace | — | Kasuri figure and code face: JetBrains Mono (OFL, shipped in fonts/). | - `--base-font-family-stack-mono` ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace Component tier: 158 tokens, listed per component under Components. ### Font sizes | Token | Value | Also set in | Role | |---|---|---|---| | `--base-font-size-display` | 64px (`--base-font-size-scale-64`) | — | Marketing and empty-page hero only. One per page. | | `--base-font-size-headline-lg` | 36px (`--base-font-size-scale-36`) | — | Page title on wide layouts. | | `--base-font-size-headline-md` | 30px (`--base-font-size-scale-30`) | — | Page title (h1) in the app. | | `--base-font-size-headline-sm` | 24px (`--base-font-size-scale-24`) | — | Section heading (h2). | | `--base-font-size-title` | 20px (`--base-font-size-scale-20`) | — | Card, dialog and panel titles (h3). | | `--base-font-size-subtitle` | 18px (`--base-font-size-scale-18`) | — | Sub-section heading (h4). | | `--base-font-size-body-lg` | 18px (`--base-font-size-scale-18`) | — | Lead paragraphs and story decks. | | `--base-font-size-body` | 16px (`--base-font-size-scale-16`) | compact | Default interface and reading text. | | `--base-font-size-body-sm` | 14px (`--base-font-size-scale-14`) | — | Dense tables and secondary text. | | `--base-font-size-label` | 14px (`--base-font-size-scale-14`) | compact | Field labels and control text. | | `--base-font-size-caption` | 13px (`--base-font-size-scale-13`) | — | Hints, metadata and badges. Never below this size for readable text. | | `--base-font-size-overline` | 12px (`--base-font-size-scale-12`) | — | Eyebrows in uppercase Latin only; not used for Japanese text. | | `--base-font-size-page-title` | 56px (`--base-font-size-scale-56`) | — | Page titles in the PageHeader and section heads: Archivo, wide and black. | | `--base-font-size-figure` | 72px (`--base-font-size-scale-72`) | — | Figures on colour-block cards and key numbers. | | `--base-font-size-masthead` | 72px (`--base-font-size-scale-72`) | — | The publication title in Masthead. One per page; wraps onto two lines on a phone. | | `--base-font-size-numeral` | 120px (`--base-font-size-scale-120`) | — | The one hero figure on a front page (Numeral). Always with a text label and caption. | | `--base-font-size-band` | 96px (`--base-font-size-scale-96`) | — | The health-band headline ("Holding together."): Archivo, wide and black. Smaller on narrow screens. | Primitive tier (17): - `--base-font-size-scale-*`: `12` 12px · `13` 13px · `14` 14px · `15` 15px · `16` 16px · `18` 18px · `20` 20px · `24` 24px · `30` 30px · `36` 36px · `44` 44px · `48` 48px · `56` 56px · `64` 64px · `72` 72px · `96` 96px · `120` 120px Component tier: 162 tokens, listed per component under Components. ### Font weights | Token | Value | Also set in | Role | |---|---|---|---| | `--base-font-weight-regular` | 400 (`--base-font-weight-scale-regular`) | — | Body text and large headings (the calm look uses light headings). | | `--base-font-weight-medium` | 500 (`--base-font-weight-scale-medium`) | — | Labels, buttons and small headings. | | `--base-font-weight-strong` | 600 (`--base-font-weight-scale-semibold`) | — | Emphasis inside text and numbers that must stand out. Use sparingly. | | `--base-font-weight-display` | 900 (`--base-font-weight-scale-black`) | — | Display weight: Archivo Black (900) for headlines, page titles and figures. | | `--base-font-weight-numeral` | 900 (`--base-font-weight-scale-black`) | — | Weight of Numeral figures: heavy, so a single number can carry a page. | Primitive tier (6): - `--base-font-weight-scale-*`: `regular` 400 · `medium` 500 · `semibold` 600 · `bold` 700 · `heavy` 800 · `black` 900 Component tier: 103 tokens, listed per component under Components. ### Line heights | Token | Value | Also set in | Role | |---|---|---|---| | `--base-font-line-height-tight` | 1.2 (`--base-font-line-height-scale-1-2`) | ja | Display and headline sizes. | | `--base-font-line-height-heading` | 1.3 (`--base-font-line-height-scale-1-3`) | ja | Titles and subtitles. | | `--base-font-line-height-control` | 1.4 (`--base-font-line-height-scale-1-4`) | ja | Single-line controls: buttons, tags, inputs. | | `--base-font-line-height-body` | 1.6 (`--base-font-line-height-scale-1-6`) | ja | Paragraphs and multi-line text. Raised for Japanese. | | `--base-font-line-height-display` | 0.9 (`--base-font-line-height-scale-0-9`) | — | Page titles, headlines and numerals in the display face: set solid. | Primitive tier (11): - `--base-font-line-height-scale-0-9` 0.9 - `--base-font-line-height-scale-1-*`: `0` 1 · `1` 1.1 · `2` 1.2 · `3` 1.3 · `4` 1.4 · `5` 1.5 · `6` 1.6 · `7` 1.7 · `8` 1.8 · `9` 1.9 Component tier: 113 tokens, listed per component under Components. ### Letter spacing | Token | Value | Also set in | Role | |---|---|---|---| | `--base-font-letter-spacing-heading` | -0.02 (`--base-font-letter-spacing-scale-tight`) | ja | Large Latin headings. Japanese never uses negative tracking. | | `--base-font-letter-spacing-body` | 0 (`--base-font-letter-spacing-scale-none`) | ja | Body and control text. | | `--base-font-letter-spacing-overline` | 0.12 (`--base-font-letter-spacing-scale-wider`) | — | Eyebrows and labels in Martian Mono, set in capitals with open tracking. | | `--base-font-letter-spacing-display` | -0.02 (`--base-font-letter-spacing-scale-tight`) | ja | Tracking for the display face at page-title and figure sizes. | | `--base-font-letter-spacing-masthead` | -0.03 (`--base-font-letter-spacing-scale-tighter`) | — | Tracking of the masthead title. Latin only; Japanese never uses negative tracking. | Primitive tier (7): - `--base-font-letter-spacing-scale-*`: `tighter` -0.03 · `tight` -0.02 · `snug` -0.01 · `none` 0 · `cjk` 0.02 · `wide` 0.08 · `wider` 0.12 Component tier: 4 tokens, listed per component under Components. ### Other type tokens Component tier: 20 tokens, listed per component under Components. ### Guidance - **Typography** guidance: not defined (foundation status: partial). - Gap recorded for Typography: Guidance per foundation lives in docs/tokens.md and the token descriptions; no foundation page yet. ## Layout ### Spacing | Token | Value | Also set in | Role | |---|---|---|---| | `--base-space-inset-xs` | 4px (`--base-space-scale-2`) | — | Padding inside tags and badges. | | `--base-space-inset-sm` | 8px (`--base-space-scale-4`) | compact | Padding inside compact controls and menu items. | | `--base-space-inset-md` | 16px (`--base-space-scale-6`) | compact | Padding inside cards and alerts. | | `--base-space-inset-lg` | 24px (`--base-space-scale-8`) | compact | Padding inside dialogs and page sections. | | `--base-space-inset-control-x` | 16px (`--base-space-scale-6`) | compact | Horizontal padding of buttons and inputs. | | `--base-space-stack-xs` | 4px (`--base-space-scale-2`) | — | Gap between a label and its control, or a title and its hint. | | `--base-space-stack-sm` | 8px (`--base-space-scale-4`) | compact | Gap between related items in a group. | | `--base-space-stack-md` | 16px (`--base-space-scale-6`) | compact | Gap between fields in a form. | | `--base-space-stack-lg` | 24px (`--base-space-scale-8`) | compact | Gap between groups within a section. | | `--base-space-stack-xl` | 40px (`--base-space-scale-10`) | — | Gap between page sections. | | `--base-space-inline-xs` | 4px (`--base-space-scale-2`) | — | Gap between an icon and its label. | | `--base-space-inline-sm` | 8px (`--base-space-scale-4`) | — | Gap between adjacent buttons or tags. | | `--base-space-inline-md` | 16px (`--base-space-scale-6`) | — | Gap between toolbar groups. | | `--base-space-inline-lg` | 24px (`--base-space-scale-8`) | — | Gap between header regions. | | `--base-space-layout-gutter` | 16px (`--base-space-scale-6`) | — | Page side gutter on narrow screens and grid gutter. | | `--base-space-layout-section` | 48px (`--base-space-scale-11`) | — | Vertical rhythm between major page regions. | | `--base-space-weave` | 4px (`--base-space-scale-2`) | — | The gap between cloth and weaving-draft cells, and inside a cell chip: one thread width. | Primitive tier (14): - `--base-space-scale-*`: `0` 0px · `1` 2px · `2` 4px · `3` 6px · `4` 8px · `5` 12px · `6` 16px · `7` 20px · `8` 24px · `9` 32px · `10` 40px · `11` 48px · `12` 64px · `13` 80px Component tier: 115 tokens, listed per component under Components. ### Sizes, containers and breakpoints | Token | Value | Also set in | Role | |---|---|---|---| | `--base-size-control-sm` | 32px (`--base-size-scale-32`) | compact | Height of small controls in dense toolbars and tables. | | `--base-size-control-md` | 40px (`--base-size-scale-40`) | compact | Default height of buttons, inputs and selects. | | `--base-size-control-lg` | 48px (`--base-size-scale-48`) | compact | Prominent controls on sign-in and empty pages. | | `--base-size-target-min` | 24px (`--base-size-scale-24`) | — | Minimum pointer target (WCAG 2.5.8). Locked: no layer may go below it. | | `--base-size-icon-sm` | 16px (`--base-size-scale-16`) | — | Icons inside small controls and text. | | `--base-size-icon-md` | 20px (`--base-size-scale-20`) | — | Default icon size. | | `--base-size-icon-lg` | 24px (`--base-size-scale-24`) | — | Icons in empty states and alerts. | | `--base-size-toggle-width` | 36px (`--base-size-scale-36`) | — | Switch track width. | | `--base-size-toggle-height` | 20px (`--base-size-scale-20`) | — | Switch track height. | | `--base-size-toggle-thumb` | 14px (`--base-size-scale-14`) | — | Switch thumb diameter. | | `--base-size-toggle-box` | 16px (`--base-size-scale-16`) | — | Checkbox and radio box size; the hit area is padded to size.target.min. | | `--base-size-progress-track` | 6px (`--base-size-scale-6`) | — | Height of the progress bar track. | | `--base-size-skeleton-line` | 12px (`--base-size-scale-12`) | — | Height of one skeleton text line. | | `--base-size-avatar-sm` | 24px (`--base-size-scale-24`) | — | Avatar in dense lists. | | `--base-size-avatar-md` | 32px (`--base-size-scale-32`) | — | Default avatar. | | `--base-size-avatar-lg` | 48px (`--base-size-scale-48`) | — | Avatar on profile headers. | | `--base-size-border-thin` | 1px (`--base-size-scale-1`) | high-contrast | Rules, card and field borders. | | `--base-size-border-thick` | 2px (`--base-size-scale-2`) | high-contrast | Selected indicators and the invalid-field edge. | | `--base-size-border-ai` | 1px (`--base-size-scale-1`) | marked | Edge width of AI-generated regions and the AI label. The ai-presence 'marked' context thickens it. | | `--base-size-border-accent` | 4px (`--base-size-scale-4`) | — | Width of the shu marker under the current section. Decorative; never the only signal. | | `--base-size-border-rule` | 4px (`--base-size-scale-4`) | — | Width of the heavy printed rule (masthead, fold, column tops). Hairlines use size.border.thin. | | `--base-size-focus-ring-width` | 2px (`--base-size-scale-2`) | high-contrast | Focus ring thickness (WCAG 2.4.13 minimum 2px). Locked. | | `--base-size-focus-ring-offset` | 2px (`--base-size-scale-2`) | — | Gap between the element and its focus ring. Locked. | | `--base-size-container-sm` | 560px (`--base-size-scale-560`) | — | Dialogs, sign-in and single-column forms. | | `--base-size-container-md` | 720px (`--base-size-scale-720`) | — | Reading width for settings and detail pages. | | `--base-size-container-lg` | 1240px (`--base-size-scale-1240`) | — | Main content width of the app shell. | | `--base-size-container-xl` | 1440px (`--base-size-scale-1440`) | — | Dashboards on very wide screens. | | `--base-size-panel-nav` | 240px (`--base-size-scale-240`) | — | Side navigation width. | | `--base-size-panel-drawer` | 480px (`--base-size-scale-480`) | — | Drawer width on wide screens; full width on narrow ones. | | `--base-size-panel-popover` | 320px (`--base-size-scale-320`) | — | Maximum popover and tooltip width. | | `--base-size-panel-menu` | 240px (`--base-size-scale-240`) | — | Minimum menu and listbox width. | | `--base-size-breakpoint-sm` | 640px (`--base-size-scale-640`) | — | Narrow to medium layouts. CSS custom properties cannot be used in media queries; the build also emits these as constants. | | `--base-size-breakpoint-md` | 960px (`--base-size-scale-960`) | — | Side navigation becomes visible. | | `--base-size-breakpoint-lg` | 1240px (`--base-size-scale-1240`) | — | Wide layouts. | | `--base-size-breakpoint-xl` | 1440px (`--base-size-scale-1440`) | — | Large desktop (MVDS 4.4). | | `--base-size-seal` | 96px (`--base-size-scale-96`) | — | Width and height of a Seal: large enough for the mark and a short name. | | `--base-size-rail` | 240px (`--base-size-scale-240`) | — | Width of the WarpRail. | | `--base-size-thread` | 6px (`--base-size-scale-6`) | — | Width of a warp thread on the WarpRail. | | `--base-size-cell` | 56px (`--base-size-scale-56`) | — | Minimum height of a cloth cell. | Primitive tier (31): - `--base-size-scale-*`: `1` 1px · `2` 2px · `3` 3px · `4` 4px · `6` 6px · `8` 8px · `12` 12px · `14` 14px · `16` 16px · `20` 20px · `24` 24px · `28` 28px · `32` 32px · `36` 36px · `40` 40px · `44` 44px · `48` 48px · `56` 56px · `64` 64px · `96` 96px · `240` 240px · `280` 280px · `320` 320px · `360` 360px · `480` 480px · `560` 560px · `640` 640px · `720` 720px · `960` 960px · `1240` 1240px · `1440` 1440px Component tier: 385 tokens, listed per component under Components. ### Guidance - **Spacing** guidance: not defined (foundation status: partial). - Gap recorded for Spacing: Guidance per foundation lives in docs/tokens.md and the token descriptions; no foundation page yet. - **Layout** guidance: not defined (foundation status: partial). - Gap recorded for Layout: Guidance per foundation lives in docs/tokens.md and the token descriptions; no foundation page yet. - **responsive** guidance: not defined (no responsive foundation in the records). ## Elevation & Depth | Token | Value | Also set in | Role | |---|---|---|---| | `--base-elevation-flat` | 0px 0px 0px 0px #00000000 (`--base-shadow-none`) | — | Content on the canvas. Base separates with rules, not shadows. | | `--base-elevation-raised` | 0px 1px 2px 0px #13110f0f (`--base-shadow-1`) | — | A barely-there lift for cards that can be dragged or clicked. | | `--base-elevation-overlay` | 0px 8px 24px 0px #13110f14 (`--base-shadow-2`) | dark | Menus, popovers, listboxes and toasts. | | `--base-elevation-modal` | 0px 16px 48px 0px #13110f1f (`--base-shadow-3`) | dark | Dialogs and drawers. | Primitive tier (6): - `--base-shadow-*`: `1` 0px 1px 2px 0px #13110f0f · `2` 0px 8px 24px 0px #13110f14 · `3` 0px 16px 48px 0px #13110f1f · `none` 0px 0px 0px 0px #00000000 - `--base-shadow-dark-*`: `2` 0px 8px 24px 0px #00000080 · `3` 0px 16px 48px 0px #00000099 Component tier: 9 tokens, listed per component under Components. ### Stacking order | Token | Value | Also set in | Role | |---|---|---|---| | `--base-layer-content` | 0 (`--base-number-z-0`) | — | Normal flow. | | `--base-layer-sticky` | 10 (`--base-number-z-10`) | — | Sticky headers and table heads. | | `--base-layer-overlay` | 100 (`--base-number-z-100`) | — | Menus, popovers and listboxes. | | `--base-layer-modal` | 200 (`--base-number-z-200`) | — | Modal dialogs and drawers with their backdrop. | | `--base-layer-toast` | 300 (`--base-number-z-300`) | — | Toasts above modals so outcomes stay visible. | | `--base-layer-tooltip` | 400 (`--base-number-z-400`) | — | Tooltips above everything. Focus is never hidden behind a layer (WCAG 2.4.11). | Primitive tier (8): - `--base-number-z-*`: `0` 0 · `1` 1 · `10` 10 · `100` 100 · `200` 200 · `300` 300 · `400` 400 · `500` 500 Component tier: 9 tokens, listed per component under Components. ### Guidance - **Elevation** guidance: not defined (foundation status: partial). - Gap recorded for Elevation: Guidance per foundation lives in docs/tokens.md and the token descriptions; no foundation page yet. ## Shapes | Token | Value | Also set in | Role | |---|---|---|---| | `--base-radius-control` | 2px (`--base-radius-scale-1`) | — | Corners of buttons, inputs and chips: 2 px, a cut edge of cloth. | | `--base-radius-surface` | 2px (`--base-radius-scale-1`) | — | Cards, alerts, dialogs: square sheets. | | `--base-radius-pill` | 9999px (`--base-radius-scale-full`) | — | Tags, badges, avatars and the switch. | | `--base-radius-none` | 0px (`--base-radius-scale-0`) | — | Tables and full-bleed regions. | Primitive tier (6): - `--base-radius-scale-*`: `0` 0px · `1` 2px · `2` 4px · `3` 6px · `4` 10px · `full` 9999px Component tier: 60 tokens, listed per component under Components. ### Guidance - **shape** guidance: not defined (no shape foundation in the records). ## Motion | Token | Value | Also set in | Role | |---|---|---|---| | `--base-motion-duration-instant` | 0ms (`--base-duration-0`) | — | No animation. | | `--base-motion-duration-fast` | 100ms (`--base-duration-100`) | reduced | Hover and press feedback. | | `--base-motion-duration-moderate` | 160ms (`--base-duration-160`) | reduced | Small enter and exit: menus, tooltips. | | `--base-motion-duration-slow` | 240ms (`--base-duration-240`) | reduced | Larger surfaces: dialogs, drawers. | | `--base-motion-easing-standard` | cubic-bezier(0.2, 0, 0, 1) (`--base-easing-standard`) | — | Movement within the screen. | | `--base-motion-easing-enter` | cubic-bezier(0, 0, 0, 1) (`--base-easing-enter`) | — | Things arriving. | | `--base-motion-easing-exit` | cubic-bezier(0.3, 0, 1, 1) (`--base-easing-exit`) | — | Things leaving. | | `--base-motion-easing-press` | cubic-bezier(0.3, 1.4, 0.6, 1) (`--base-easing-press`) | — | The seal landing: a short overshoot. Seal only; everything else uses standard easing. Reduced motion makes it instant. | Primitive tier (10): | Token | Value | Also set in | Role | |---|---|---|---| | `--base-easing-press` | cubic-bezier(0.3, 1.4, 0.6, 1) | — | A short overshoot, like a stamp pressed onto paper. Atelier Press uses it for the seal only. | - `--base-duration-*`: `0` 0ms · `100` 100ms · `160` 160ms · `240` 240ms · `360` 360ms - `--base-easing-*`: `standard` cubic-bezier(0.2, 0, 0, 1) · `enter` cubic-bezier(0, 0, 0, 1) · `exit` cubic-bezier(0.3, 0, 1, 1) · `linear` cubic-bezier(0, 0, 1, 1) Component tier: 8 tokens, listed per component under Components. ### Guidance - **Motion** guidance: not defined (foundation status: partial). - Gap recorded for Motion: Guidance per foundation lives in docs/tokens.md and the token descriptions; no foundation page yet. ## Components 69 components from the component contracts. Use the exact import; full props and examples come from `get_entity`. 69 of them record open contract gaps (`get_entity` lists them). ### AILabel Tells people, every time, that content was made or changed by AI, and lets them find out how. `import { AILabel } from "@loom/base/native";` · lifecycle beta · tier component - **Use when:** Next to any AI-generated or AI-edited text, summary, suggestion or image; On AI-drafted changes before review - **Do not use when:** Explaining the whole AI feature at first use → The onboarding pattern with a Dialog or Card; Errors or low confidence → AIStatus - **Variants:** not defined - **States:** closed, open, subtle presence, marked presence (Provider aiPresence): Supported (contract docs.states) - **Accessibility:** Target: WCAG 2.2 AA; Web role: button; A real button named "AI" that opens a labelled non-modal dialog; the label is never only an icon; Native role: button; Pressable trigger and a modal explanation - **Keyboard:** `Enter` Opens the explanation (Popover); `Escape` Closes it and returns focus - **Do:** Every AI-generated content block carries an AILabel (EU AI Act Art. 50); AI colours (color.ai.*) are locked; brand layers cannot change them; Label "AI" (or a translated equivalent), never a mascot name; Explanation: what the AI did, what it used, what to check. Two sentences; Never claim accuracy ("verified", "guaranteed") - **Tokens:** not defined ### AIStatus Is honest about what the AI could not do, or might have got wrong, and says what to do next. `import { AIStatus } from "@loom/base/native";` · lifecycle beta · tier component - **Use when:** Caveats on generated content, low-confidence results, refusals, partial and full failures - **Do not use when:** Non-AI errors → Alert; Marking content as AI-made → AILabel - **Variants:** `kind`: caveat | low-confidence | refusal | partial-failure | error. caveat: a limit to keep in mind; low-confidence: check this; refusal: the AI will not or cannot do it; partial-failure and error: something went wrong - **States:** caveat, low-confidence, refusal, partial-failure, error: Supported (contract docs.states) - **Accessibility:** Target: WCAG 2.2 AA; Web role: status; role alert for error and partial failure, status otherwise. Never blames the user; Native role: status; The same roles on a View; Kind is in the title words and icon, not colour alone - **Keyboard:** `Tab` Retry is reachable - **Do:** Refusals and errors offer at least one next step or retry; Say what happened and what to do; never blame the user; Refusals explain the rule, not the model ("Locked tokens need the owner"); No anthropomorphic apologies beyond one short phrase - **Tokens:** not defined ### Alert Tells people about something that affects the page or their task, in place, where they will see it. `import { Alert } from "@loom/base/native";` · lifecycle beta · tier component - **Use when:** Results of an action that stay relevant (published, failed); Warnings about the current page (sync paused, read-only); Page-level errors that are not about one field - **Do not use when:** Errors on specific fields after submit → ErrorSummary plus field errors; Brief confirmation that needs no action → ToastRegion; Decisions people must make → Dialog - **Variants:** `tone`: info | success | warning | danger. The kind of message; also chooses the icon and the role (danger interrupts) - **States:** info, success, warning, danger, dismissible: Supported (contract docs.states) - **Accessibility:** Target: WCAG 2.2 AA; Web role: status; role alert (assertive) for danger, status (polite) otherwise. Insert the alert into the page to have it announced; do not toggle its visibility; Native role: status; The same roles on a View; Android announces live regions, iOS reads the content when focused; Tone is in the icon, the border and the words, never colour alone (1.4.1); Status messages are programmatically determinable (4.1.3) - **Keyboard:** `Tab` Only the dismiss button and links inside are focusable - **Do:** Do not make danger alerts dismissible when the problem still exists; Error: what happened, why, what to do next; Title is optional and short; the message stands alone; Never say "Error" or "Oops" as the whole title - **Tokens:** 40 tokens (component tier, matched by name; inferred): `--base-alert-message-font-family`, `--base-alert-message-font-size`, `--base-alert-message-font-weight`, +37 more ### AppHeader Anchors every page with the product name, the current context and global actions. `import { AppHeader } from "@loom/base/native";` · lifecycle beta · tier component - **Use when:** Top of the app shell on every page - **Do not use when:** Page-specific titles and actions → PageHeader; Section navigation → SideNav - **Variants:** not defined - **States:** default: Supported (contract docs.states) - **Accessibility:** Target: WCAG 2.2 AA; Web role: banner; header element at page level is the banner landmark; one per page; Native role: banner; View role banner - **Keyboard:** `Tab` Moves focus (next) - **Do:** One AppHeader per page; Product name as the wordmark text; context in the user's terms - **Tokens:** 21 tokens (component tier, matched by name; inferred): `--base-app-header-brand-outline-color`, `--base-app-header-brand-outline-width`, `--base-app-header-brand-outline-offset`, +18 more ### AppShell Gives every app page the same frame and landmarks, so people and screen readers always know where they are. `import { AppShell } from "@loom/base/native";` · lifecycle beta · tier template - **Use when:** Every signed-in page of the platform - **Do not use when:** Sign-in, error and marketing pages → A centred Box or Card without navigation - **Variants:** `frame`: stacked | rail. stacked: header on top, navigation beside main (SideNav or none). rail: the Selvedge frame, a full-height WarpRail on the left with the header and main beside it; under 48rem the rail becomes a sticky bottom bar after main - **States:** with and without navigation, with notifications: Supported (contract docs.states) - **Accessibility:** Target: WCAG 2.2 AA; Web role: main; Landmarks: banner (AppHeader), navigation (SideNav), main, region (ToastRegion); Native role: main; View with role main; the skip link renders nothing on native; 2.4.1 bypass blocks; 1.3.1 landmarks; reflow at 320 px stacks navigation above main (1.4.10) - **Keyboard:** `Tab` Skip link, header, navigation, main content - **Do:** Pages use AppShell so the skip link, banner, navigation and main landmarks exist; One h1 per page, inside main (PageHeader) - **Tokens:** 12 tokens (component tier, matched by name; inferred): `--base-app-shell-background`, `--base-app-shell-color`, `--base-app-shell-main-padding-inline`, +9 more ### Avatar Helps people recognise who did something or who owns something. `import { Avatar } from "@loom/base/native";` · lifecycle beta · tier component - **Use when:** Owners, reviewers and authors in lists, timelines and headers - **Do not use when:** Product or system logos → An image with alt text; Status indicators → Badge - **Variants:** `size`: sm | md | lg. 24, 32 or 48 px - **States:** photo, initials, decorative: Supported (contract docs.states) - **Accessibility:** Target: WCAG 2.2 AA; Web role: img; role img named by the person; the photo has empty alt so the name is not read twice; Native role: img; View role img with aria-label - **Keyboard:** not defined - **Do:** Avatar always has a name; Always pass the full name; initials are derived; Set decorative when the name is printed next to the avatar - **Tokens:** 15 tokens (component tier, matched by name; inferred): `--base-avatar-sm-width`, `--base-avatar-sm-height`, `--base-avatar-md-width`, +12 more ### Badge Marks status or a count on an item so people can scan a list quickly. `import { Badge } from "@loom/base/native";` · lifecycle beta · tier component - **Use when:** Lifecycle (Draft, Stable, Deprecated), counts of items needing attention - **Do not use when:** A filter or a removable value → Tag; A message people must read → Alert; An action → Button - **Variants:** `tone`: neutral | info | success | warning | danger | ai. Status colour. Pair with words that carry the meaning - **States:** neutral, info, success, warning, danger, ai: Supported (contract docs.states) - **Accessibility:** Target: WCAG 2.2 AA; Web role: text; Plain text in the reading order; label replaces a bare number with words; Native role: text; The visible Text carries label as its accessible name (React Native cannot position visually hidden text off-screen); Every tone pair meets 4.5:1 in all modes (contrast report) - **Keyboard:** not defined - **Do:** The text names the status; tone only reinforces it; One or two words, sentence case; Counts above 99 show "99+" with the exact number in label - **Tokens:** 26 tokens (component tier, matched by name; inferred): `--base-badge-font-family`, `--base-badge-font-size`, `--base-badge-font-weight`, +23 more ### BandScale Places a system on a named scale people already know (the Loom health bands: Tightly woven 90 and above, Holding together 75 to 89, Taking shape 60 to 74, Loose threads below 60), so its state reads as a sentence, not a score. `import { BandScale } from "@loom/base/native";` · lifecycle beta · tier component - **Use when:** Health bands, maturity levels, any ordered scale of three to five named steps - **Do not use when:** Continuous values → ProgressBar or Numeral; Choosing a value → RadioGroup - **Variants:** not defined - **States:** default, current: Supported (contract docs.states) - **Accessibility:** Target: WCAG 2.2 AA; Web role: none; An ordered list named by label; the current band has aria-current and visible words, so the position never depends on colour or pattern; Native role: list; The current band is selected and carries the same words - **Keyboard:** not defined - **Do:** Exactly one band is current; Order bands from lowest to highest; Band names are short phrases in the product's words; The current label names what sits there, for example the system - **Tokens:** 31 tokens (component tier, matched by name; inferred): `--base-band-scale-gap`, `--base-band-scale-padding-block-start`, `--base-band-scale-border-block-start-color`, +28 more ### Box Gives a region padding and a surface from the token roles, for layouts Card does not fit. `import { Box } from "@loom/base/native";` · lifecycle beta · tier primitive - **Use when:** Wells, panels and regions inside templates; Wrapping content in a sunken or surface background - **Do not use when:** A titled group of content → Card; Spacing between siblings → Stack - **Variants:** `padding`: none | sm | md | lg. Inset from the spacing scale; `background`: none | canvas | surface | sunken. Surface role; `border`: none | default | strong. Border role; `radius`: none | control | surface. Corner radius role - **States:** padding, background, border and radius combinations: Supported (contract docs.states) - **Accessibility:** Target: WCAG 2.2 AA; Web role: none; Native role: none - **Keyboard:** not defined - **Do:** No style overrides on Box; every option is a token role; No content of its own - **Tokens:** 13 tokens (component tier, matched by name; inferred): `--base-box-sm-padding`, `--base-box-md-padding`, `--base-box-lg-padding`, +10 more ### Breadcrumbs Shows people where they are and lets them go up a level. `import { Breadcrumbs } from "@loom/base/native";` · lifecycle beta · tier component - **Use when:** Pages more than two levels deep in a hierarchy (system, component, token) - **Do not use when:** Flat sites or the top level → Nothing; the page title is enough; Steps in a process → Wizard template steps - **Variants:** not defined - **States:** link, current page: Supported (contract docs.states) - **Accessibility:** Target: WCAG 2.2 AA; Web role: navigation; nav landmark with an ordered list; aria-current="page" on the last item; separators are decorative; Native role: navigation; The current item is exposed as selected; links open with the platform - **Keyboard:** `Tab` Each link is a tab stop; the current page is not - **Do:** Exactly one item is current and it is the last; Use the page titles, shortened if needed; The last item is the current page and matches its h1 - **Tokens:** 16 tokens (component tier, matched by name; inferred): `--base-breadcrumbs-link-outline-color`, `--base-breadcrumbs-link-outline-width`, `--base-breadcrumbs-link-outline-offset`, +13 more ### Button Starts an action in the current view: save, publish, open a dialog, run a check. `import { Button } from "@loom/base/native";` · lifecycle beta · tier component - **Use when:** To start an action that changes data or opens something on this page; To submit a form (set it as the form's last control); As a toggle (pressed) for an on/off formatting or view option in a toolbar - **Do not use when:** Going to another page or URL → Link; Choosing one of several options → RadioGroup or Select; Turning a setting on or off that takes effect immediately → Switch; A list of more than three related actions → Menu - **Variants:** `tone`: primary | secondary | quiet | danger. primary: the one main action in a view; secondary: other actions; quiet: toolbars and dense areas; danger: removes or loses something; `size`: md | sm. md for forms and pages; sm for toolbars, tables and cards. Both keep a 24px minimum target - **States:** default, hover, focus-visible, pressed, selected (toggle): Supported (contract docs.states); busy: Exposed as busy when busy; disabled: Exposed as disabled when disabled \|\| busy; error: Not supported: A button has no error state; show the error next to what failed; read-only: Not supported: Not applicable to actions - **Accessibility:** Target: WCAG 2.2 AA; Web role: button; Native