Corporate

Corporate is a clean, structured design language built to communicate clarity, competence, and trust. It relies on a disciplined grid, a calm light-gray canvas, a confident corporate blue, and a single, highly legible typeface used at consistent steps. Reach for Corporate when credibility matters most: B2B platforms, financial tools, enterprise dashboards, and professional services where users need to feel the product is reliable and well-organized.

Design principles

• Prioritize clarity above all. Every element should have an obvious purpose and a clear hierarchy.
• Be consistent and systematic: repeatable spacing, predictable components, and a tight palette build trust.
• Use color with restraint. Neutrals carry the interface; blue is reserved for primary actions and key data.
• Keep typography honest and legible, favoring one well-built sans across the whole product.
• Make information scannable with strong alignment, generous structure, and clear grouping.
• Choose subtle, functional motion that confirms actions without drawing attention to itself.

Color

The canvas is a cool light gray #F4F6F9 that lets white #FFFFFF cards and panels stand out cleanly, establishing a familiar dashboard feel. Text uses a deep navy #11243A for strong contrast without the harshness of pure black, while secondary copy uses a balanced slate #5B6878. The accent is a confident corporate blue #1E5FBF, used for primary buttons, links, active navigation, and highlighted metrics. Borders and dividers are a soft #DCE2EA. Support statuses with conventional, restrained semantics: success #1E7A46, warning #B7791F, and error #C2362E. For dark mode, use a #0E1622 background, #16202E surfaces, #E6EBF1 foreground, and a slightly lighter blue #4D86E0 so the accent stays clear. Keep saturation moderate throughout to maintain a calm, professional tone.

Typography

Both headings and body use Inter (or a comparable neutral, highly legible sans), which keeps the system unified and dependable. Headings run 24-48px at 600 weight with a slight -0.01em tracking, while body copy is 15-16px at 400 with a 1.6 line-height for dense, scannable content. The type scale follows a measured minor-third ratio (1.2) so steps feel orderly rather than dramatic. Use weight and color, not decoration, to establish hierarchy. The mono stack (IBM Plex Mono) is reserved for figures, IDs, code, and tabular numbers where alignment matters.