Frontend Design & UX Guidelines

Good design comes from intentional pairings-not defaults. The difference between "AI slop" and a crafted interface is whether typography, color, spacing, and interaction reinforce the same mood. This section provides Design Recipes: complete examples showing how these elements combine. Use them as inspiration and adapt them for your context.

Design Recipes

Each recipe below demonstrates a complete aesthetic. Study how the CSS variables, typography choices, layout patterns, and interaction details work together. These are starting points-combine and adapt them for your specific application.

Recipe 1: Technical Dashboard / Data Grid

Mood: Professional, precise, information-dense. Feels like mission control or a scientific instrument.

When to use: Analytics dashboards, monitoring tools, data-heavy applications, developer tools, admin panels.

Why it works: The visible grid structure creates rhythm and scannable columns. Italic serif headers add a human touch to counter the coldness of data. Monospace fonts signal "raw data" and create alignment. The muted secondary text reduces noise while keeping information accessible.