6.7 KiB
name, colors, typography, rounded, spacing
| name | colors | typography | rounded | spacing | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Memento Light |
|
|
|
|
Brand & Style
This design system is engineered for high-performance productivity, emphasizing clarity, cognitive ease, and professional reliability. The brand personality is "The Quiet Assistant"—unobtrusive, organized, and precise. It targets professionals who require a distraction-free environment to manage complex workflows.
The visual style is Corporate / Modern with a strong leaning toward Minimalism. It prioritizes a high signal-to-noise ratio by using a restrained color palette, purposeful whitespace, and a flat design language. Depth is communicated through subtle tonal changes rather than heavy ornamentation, ensuring the interface feels lightweight and responsive.
Colors
The palette is anchored in a cool-toned neutral base to reduce eye strain during long working sessions. The primary blue is used strategically for action intent and active states, providing a clear visual thread for navigation.
- Foundations: The background uses a crisp off-white, while the sidebar utilizes a slightly deeper grey to provide structural anchoring without the need for heavy borders.
- Typography: Headings utilize a deep slate for maximum legibility, while secondary information is pushed back using a muted grey-blue.
- Accents: The primary blue is the sole carrier of "active" meaning, ensuring that user attention is never fragmented by competing colors.
Typography
This design system exclusively utilizes Inter for its utilitarian and highly readable characteristics at small sizes. The typographic scale is optimized for information density and hierarchy.
- Hierarchy: Bold weights are reserved for structural headings to anchor the page layout.
- Readability: Body text uses a generous line height (1.6) to facilitate the scanning of long lists or notes.
- Utility: Labels and metadata use a slightly smaller, medium-weight font to distinguish them from interactive text elements.
Layout & Spacing
The layout is built on a strict 8px grid system, ensuring every element is mathematically aligned and harmonious.
- Grid Model: A 12-column fluid grid is used for main content areas, allowing for flexible dashboard layouts.
- Sidebar: The sidebar is fixed at a width of 260px, creating a consistent navigation anchor on the left.
- Rhythm: Standardized padding of 16px (md) is used for container interiors, while 24px (lg) margins are used to separate major layout blocks.
Elevation & Depth
This design system adopts a "Flat-Plus" approach. Depth is not used for realism but as a functional tool to indicate interactivity and containment.
- Tonal Layering: The primary method of separation is the use of the Sidebar color (#f4f5f7) against the Main Background (#f8fafc).
- Subtle Shadows: Shadows are extremely restrained, used only on floating elements like dropdowns and modals. Use a low-blur, low-opacity shadow:
0 1px 3px rgba(30, 41, 59, 0.08). - Ghost Outlines: Containers and inputs use a 1px border (#cbd5e1) to define boundaries without adding visual weight.
Shapes
The shape language is professional and approachable, moving away from sharp industrial corners toward softer, organic geometry.
- Global Radius: A standard 8px (0.5rem) radius is applied to cards, buttons, and input fields to maintain a consistent "Soft" appearance.
- Interactive Pill: Navigation items and tags utilize a full "pill" radius (100px) to distinguish them from static containers and emphasize their touch/click-friendly nature.
Components
Consistency across components ensures the user can predict behavior through visual cues.
- Buttons: Primary buttons use the primary blue with white text. Secondary buttons use a white background with a subtle border and muted text.
- Navigation Items: When active, navigation items in the sidebar use a pill-shaped background in the primary blue (at 10-15% opacity) with a solid blue text or icon.
- Inputs: Use an 8px radius with the border color. On focus, the border shifts to the primary blue with a subtle 2px outer glow of the same color at 20% opacity.
- Cards: Cards should be flat with a 1px border. Use a white background to lift them slightly from the background color.
- Chips/Badges: Small pill shapes with medium font-weight labels, used for status indicators or category tags.
- Lists: Row items should have a subtle hover state using the sidebar color to provide clear feedback during interaction.