Tinyrack

Foundations

Choose Tinyrack primitives, semantic roles, and component contracts in the order that keeps operational interfaces consistent.

Decision model

Use the system in one direction: primitive → semantic role → component contract. Primitive values supply material, semantic roles state intent across themes, and components turn those roles into reusable behavior. Product UI should normally enter at the semantic or component layer.

  1. Choose the relationship or meaning the interface needs.
  2. Select the matching semantic token or text/spacing recipe.
  3. Use the component contract, and override its --tr-* hook only for a deliberate local exception.

Core principles

  • Meaning before value. Choose surface, text, primary, or a status role instead of a palette step.
  • Hierarchy before decoration. Establish scan order with type roles and spacing before adding color emphasis.
  • Relationships stay visible. Tight gaps join details; larger gaps separate components, tasks, and sections.
  • Components own behavior. Foundations supply shared decisions while components own interaction and accessibility.

One operational screen

Rack A
Cluster health
Healthy
Load41%
Nodes12 / 12
Backup03
  1. Color assigns surface, content, action, and status meaning.
  2. Typography orders the label, heading, body, and metric.
  3. Spacing groups details, then separates the component from adjacent tasks.
  4. Component contracts supply button and badge behavior.

Four learning tracks

  1. Core visuals: Colors and themes, Typography, and Spacing.
  2. Layout and interaction: Responsive layout, Shape and boundaries, and Controls and states.
  3. Depth and behavior: Layers and elevation, Motion, and Accessibility.
  4. Delivery and identity: use the Tailwind reference, then choose the approved Logo and App icons.