Design Rules

Orbit interfaces are built on a strict set of architectural and aesthetic rules. This ensures that every component feels cohesive and premium.

Core Pillars

1. Information Density: We favor whitespace and high-fidelity typography over dense, cluttered grids.
2. Deterministic Motion: Animations must have a purpose—either signifying state change or guiding the user's eye.
3. The Orbit Palette: A curated set of high-contrast dark tokens paired with vibrant "Sparkle" accents.

Anti-Patterns

• AI Slop: Avoid excessive, non-functional gradients or visual blobs.
• Hidden State: Elements should clearly reflect their active, loading, or disabled status.
• Generic Components: Every UI element in Orbit is custom-crafted; avoid using browser-default aesthetics.

Typography & Spacing

Type is set on a strict scale — display, title, heading, body, caption — with letter-spacing tuned per size so text reads well at every breakpoint. Spacing follows a consistent rhythm across padding, gaps, and radii, which is why Orbit interfaces feel dense yet calm. Empty states, loading skeletons, and error surfaces all share the same component language so users always know what state they are in.

How Rules Are Applied

Every generated screen is reviewed against these rules by the Frontend Design skill before the preview unlocks. The reviewer checks contrast ratios, motion intent, visual hierarchy, and token usage, and any violation triggers a surgical fix pass. You can invoke the same review manually with /critique at any point, and /polish applies the final refinements.

Enforcement

The build pipeline injects these rules into generation prompts, and the Frontend Design skill audits generated UI against them. Runs that fail the design review get a surgical fix pass before a preview is unlocked.