7.2 KiB
name, colors, typography, rounded, spacing
| name | colors | typography | rounded | spacing | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Professional Efficiency |
|
|
|
|
Brand & Style
This design system is built on the pillars of reliability, structural clarity, and forward momentum. It targets business owners and service teams who require a high-density information environment that remains legible and stress-free.
The aesthetic follows a Corporate / Modern movement—fusing the systematic precision of enterprise software with the approachability of modern consumer SaaS. The visual language prioritizes functional elegance, using generous whitespace to reduce cognitive load while employing strategic color accents to guide the user's journey toward growth-oriented actions.
Colors
The palette is anchored by Deep Professional Blue, a color synonymous with stability and institutional trust. This is used for primary navigation, key branding elements, and primary success actions.
Clean Teal serves as the functional secondary color, reserved specifically for "active" states, incremental growth indicators, and secondary call-to-actions to distinguish them from structural navigation.
The Neutral Palette leans heavily on "Dark Slate" for typography to ensure high legibility without the harshness of pure black. Backgrounds remain predominantly white to maximize the "spacious" feel, with soft gray borders providing subtle containment for modular data.
Typography
This design system utilizes a dual-font strategy. Manrope is used for headlines and display text to provide a refined, modern character that feels "designed" yet professional. Inter is the workhorse for all body copy, data tables, and UI labels due to its exceptional legibility at small sizes and its neutral, systematic aesthetic.
Hierarchy is established through weight and color rather than excessive size shifts. Display titles use tighter letter spacing for a "tucked-in" professional look, while labels and small captions use slightly increased tracking to maintain clarity in high-density dashboards.
Layout & Spacing
The system employs a 12-column fixed-grid layout for desktop, transitioning to a 4-column fluid-grid for mobile devices. The core spacing rhythm is based on a 4px baseline, ensuring all elements align to a consistent mathematical scale.
- Desktop: 1440px max-width container, centered. Use 24px gutters to allow data-heavy components enough "breathing room" to prevent visual clutter.
- Tablets: Adaptive fluid width with 24px side margins.
- Mobile: 16px side margins with vertical stacking for all multi-column components.
Vertical rhythm should follow the "Stack" units (8/16/32px) to maintain a sense of structured growth and order throughout the platform.
Elevation & Depth
To maintain the "Modern SaaS" aesthetic, depth is communicated through Ambient Shadows and Tonal Layers.
- Surface Layers: The primary background is white. Secondary containers (sidebars, utility panels) use a subtle "Surface" tint (#F8FAFC) to create a natural hierarchy without needing heavy lines.
- Shadow Profile: Shadows must be extremely soft and diffused. Use a large blur radius (20px-30px) with low opacity (4-8%) blue-tinted grays. Shadows are reserved for floating elements like modals, dropdowns, and active cards.
- Borders: Structural elements like input fields and table rows use low-contrast outlines (#E2E8F0). This creates a "flat-plus" look that feels organized but not heavy.
Shapes
The shape language is defined by Rounded (Level 2) corners. This 8px-12px range is chosen to soften the "industrial" feel of business software, making it feel more like a modern tool and less like a legacy database.
- Standard (8px): Used for buttons, input fields, and small UI components.
- Large (16px): Used for cards, dashboard widgets, and modal containers.
- Extra Large (24px): Used for promotional banners or specialized "Growth" containers.
Components
- Buttons: Primary buttons use the Deep Professional Blue with white text. Secondary "Action" buttons use a Clean Teal outline or subtle fill. All buttons feature an 8px corner radius and a subtle hover lift effect.
- Input Fields: Use a 1px border (#E2E8F0) with a 2px Teal focus ring. Labels sit above the field in
label-capsstyle for maximum clarity. - Cards: White background with a 1px border or a very soft ambient shadow. 16px padding is the minimum for internal content.
- Chips/Badges: Small, pill-shaped elements with low-opacity background fills of the primary or secondary colors. Used for status indicators (e.g., "Active", "In Progress").
- Lists & Tables: High-density but legible. Use subtle zebra-striping or thin horizontal dividers. Typography in tables should default to
body-sm. - Data Visualizations: Charts should utilize the Primary Blue and Clean Teal as the dominant data series colors, supported by Slate grays for axes and grid lines.