162 lines
6.7 KiB
Markdown
162 lines
6.7 KiB
Markdown
---
|
|
name: Memento Light
|
|
colors:
|
|
surface: '#f7f9ff'
|
|
surface-dim: '#d7dae0'
|
|
surface-bright: '#f7f9ff'
|
|
surface-container-lowest: '#ffffff'
|
|
surface-container-low: '#f1f4fa'
|
|
surface-container: '#ebeef4'
|
|
surface-container-high: '#e5e8ee'
|
|
surface-container-highest: '#dfe3e8'
|
|
on-surface: '#181c20'
|
|
on-surface-variant: '#3f4850'
|
|
inverse-surface: '#2d3135'
|
|
inverse-on-surface: '#eef1f7'
|
|
outline: '#707881'
|
|
outline-variant: '#bfc7d2'
|
|
surface-tint: '#006398'
|
|
primary: '#006194'
|
|
on-primary: '#ffffff'
|
|
primary-container: '#007bb9'
|
|
on-primary-container: '#fdfcff'
|
|
inverse-primary: '#93ccff'
|
|
secondary: '#5c5f60'
|
|
on-secondary: '#ffffff'
|
|
secondary-container: '#dee0e2'
|
|
on-secondary-container: '#606365'
|
|
tertiary: '#894d00'
|
|
on-tertiary: '#ffffff'
|
|
tertiary-container: '#ac6200'
|
|
on-tertiary-container: '#fffbff'
|
|
error: '#ba1a1a'
|
|
on-error: '#ffffff'
|
|
error-container: '#ffdad6'
|
|
on-error-container: '#93000a'
|
|
primary-fixed: '#cce5ff'
|
|
primary-fixed-dim: '#93ccff'
|
|
on-primary-fixed: '#001d31'
|
|
on-primary-fixed-variant: '#004b73'
|
|
secondary-fixed: '#e1e2e4'
|
|
secondary-fixed-dim: '#c5c6c8'
|
|
on-secondary-fixed: '#191c1e'
|
|
on-secondary-fixed-variant: '#444749'
|
|
tertiary-fixed: '#ffdcc0'
|
|
tertiary-fixed-dim: '#ffb875'
|
|
on-tertiary-fixed: '#2d1600'
|
|
on-tertiary-fixed-variant: '#6b3b00'
|
|
background: '#f7f9ff'
|
|
on-background: '#181c20'
|
|
surface-variant: '#dfe3e8'
|
|
typography:
|
|
display-lg:
|
|
fontFamily: Inter
|
|
fontSize: 32px
|
|
fontWeight: '700'
|
|
lineHeight: '1.2'
|
|
letterSpacing: -0.02em
|
|
display-md:
|
|
fontFamily: Inter
|
|
fontSize: 24px
|
|
fontWeight: '600'
|
|
lineHeight: '1.3'
|
|
letterSpacing: -0.01em
|
|
headline:
|
|
fontFamily: Inter
|
|
fontSize: 20px
|
|
fontWeight: '600'
|
|
lineHeight: '1.4'
|
|
body-lg:
|
|
fontFamily: Inter
|
|
fontSize: 16px
|
|
fontWeight: '400'
|
|
lineHeight: '1.6'
|
|
body-sm:
|
|
fontFamily: Inter
|
|
fontSize: 14px
|
|
fontWeight: '400'
|
|
lineHeight: '1.5'
|
|
label-md:
|
|
fontFamily: Inter
|
|
fontSize: 14px
|
|
fontWeight: '500'
|
|
lineHeight: '1.2'
|
|
label-sm:
|
|
fontFamily: Inter
|
|
fontSize: 12px
|
|
fontWeight: '600'
|
|
lineHeight: '1.2'
|
|
letterSpacing: 0.05em
|
|
rounded:
|
|
sm: 0.25rem
|
|
DEFAULT: 0.5rem
|
|
md: 0.75rem
|
|
lg: 1rem
|
|
xl: 1.5rem
|
|
full: 9999px
|
|
spacing:
|
|
base: 8px
|
|
xs: 4px
|
|
sm: 8px
|
|
md: 16px
|
|
lg: 24px
|
|
xl: 32px
|
|
gutter: 16px
|
|
margin: 24px
|
|
---
|
|
|
|
## 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. |