Canvas
--surface-canvasApplication background
Application UI only
Tesseract design system
The live contract for app chrome, navigation, forms, editors, inspectors, tables, and overlays. Cataloged sections and preview assets remain visually independent.
Referenced Media keeps every source image in one ordered gallery. Additional references are appended with their own captions and source links, preserving earlier references.
Semantic color roles
Every app color resolves through a role that responds to theme and monochrome-palette changes.
Panel
--surface-panelCards and contained regions
Raised
--surface-raisedMenus and floating surfaces
Control
--surface-controlResting input surface
Hover
--surface-hoverHover feedback
Active
--surface-activeSelected surfaces
Primary text
--content-primaryHigh-emphasis content
Secondary text
--content-secondarySupporting content
Disabled text
--content-disabledUnavailable content
Default border
--border-defaultStandard separation
Primary action
--action-primaryMain action emphasis
Danger
--status-dangerDestructive and invalid state
Spacing
A compact four-pixel base scale.
--app-gutter--space-1--space-2--space-3--space-4--space-6--space-8--space-12Radius
Soft controls with restrained structural surfaces.
--radius-xs--radius-sm--radius-md--radius-lg--radius-xl--radius-pillElevation
Secondary controls and floating surfaces share one outline and shadow.
Secondary
--shadow-controlDropdown
--floating-surface-shadowModal
--floating-surface-shadowContainer motion
Structural entry, exit, and resizing share one restrained ease-out transition.
Duration
--container-transition-durationEasing
--container-transition-easeScroll preview viewport
Desktop previews fill the available width. Height fits beneath the heading and toolbar independently, with native scrolling inside the preview.
Bottom gap · 24px
--preview-viewport-gapMinimum height · 240px
--preview-scroll-min-heightNavigation feedback
Detail exits preserve the library rail and catalog-header rhythm while static cards replace heavier Section or Kit content.
One scale, one app font
Open Runde is the fixed application-shell font. Preview typography remains independently authored.
--type-display-size--type-title-size--type-heading-size--type-body-size--type-label-size--type-caption-sizeshadcn control system
Shared primitives own sizing, color, typography, focus, disabled, hover, and validation behavior.
Actions
Semantic variants and tokenized sizes.
Button
Inspector numbers
Numeric fields—including preview effects such as tint opacity—stay compact and omit visible stepper arrows.
Text entry
Labels, descriptions, invalid state, and multiline input.
Visible to everyone in this workspace.
Enter a valid email address.
Selection
Menus, segmented choices, boolean controls, and single selection.
Shown only when a section explicitly declares user-provided image choices.
Add referenced files to the export.
Apply compatible changes immediately.
Data surfaces
Tables inherit the same type, borders, and interaction colors.
| Token | Role | Status |
|---|---|---|
--field-background | Control surface | Stable |
--focus-ring | Keyboard focus | Stable |
--status-danger | Invalid state | Semantic |
Overlays
Popovers and dialogs use the secondary-control outline and shadow.
Preview sections are intentionally excluded from this reference.