Qyrus Style Guide

Every product decision the design team made downstream, in API Testing, in orchestration, in reporting, depended on the same handful of underlying choices: what column grid to build on, how far apart two elements should sit. I started here instead of in the product screens, because a rule stated once is cheaper than a rule re-argued in every file.

Buttons, inputs, and dropdowns had each been sized on a case-by-case basis before this. Fixing three heights, small, medium, and large, and applying them across every interactive element meant a button and the input beside it would always line up without a designer having to check.

The system deliberately avoids strokes on cards, sections, and components. An 8px corner radius and a consistent separator, used only where content genuinely needs dividing, do the work borders would otherwise do, so the interface reads as calmer and less boxed-in.

Qyrus's brand colors, navy, green, and yellow, needed to stay recognizable while a much larger functional palette carried status, category, and integration meaning across a dense, data-heavy product. Every background and stroke token was defined for light and dark so a screen designed once would hold up in either theme.

Inter carries everything from a 48px hero title down to a 12px caption, at regular and semi-bold weights. Fixing that scale meant a report table, a card title, and a page heading were never fighting for the same visual weight by accident.

Qyrus integrates with dozens of external tools and services, so the icon library is organized by what it represents, project, app, service, social, and user, rather than left as a flat set. That grouping made it possible to add a new integration's icon without guessing where it belonged.

Four layered background tokens, from the page canvas up to the topmost surface, were defined for both light and dark mode so every panel, card, and sidebar had an unambiguous elevation. That layering is what let API Testing and the rest of the product ship dark and light variants without re-deciding the hierarchy each time.