7.3 KiB
| name | colors | typography | rounded | spacing | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Warm Intellectualism |
|
|
|
|
Brand & Style
This design system is built on the philosophy of Warm Intellectualism. It balances the rigor of academic research with the approachability of a human-centric product. Drawing inspiration from high-end editorial design and modern AI interfaces, the aesthetic is characterized by expansive whitespace, a tactile paper-like background, and a sophisticated mix of typographic voices.
The style is a refined blend of Minimalism and Tactile Modernism. It avoids the clinical coldness of typical tech interfaces by utilizing a palette of warm neutrals and organic textures. The focus is on clarity, legibility, and a sense of "breathing room" that allows complex information to feel digestible and calm.
Colors
The color palette is anchored by a warm, paper-inspired neutral base (#F9F8F0), which provides a soft, low-strain reading environment compared to pure white.
- Primary: A deep, near-black (#191919) used for high-contrast typography and core structural elements.
- Secondary (Accent): A vibrant berry (#E8175D) carried forward to highlight key actions, interactive states, and critical notifications.
- Tertiary: A muted burnt orange (#D97757) used for secondary accents or to differentiate specific content types.
- Surface/Neutral: A slightly deeper beige (#E6E1D3) used for card backgrounds and subtle UI divisions to create a soft, layered depth without resorting to heavy shadows.
Typography
The typographic system utilizes a tri-font approach to establish a clear information hierarchy:
- Headlines (Plus Jakarta Sans): Used for primary titles and navigational headers. It provides a contemporary, friendly, and geometric structure.
- Editorial (Noto Serif): Reserved for long-form reading, descriptions, and "thoughtful" content. This brings an authoritative, literary quality to the interface.
- Accents (Space Grotesk): Employed for small labels, data points, and technical metadata. Its monospaced-adjacent character provides a precise, technical counterpoint to the softer serif text.
Note: In implementation, ensure a high contrast ratio between the primary text color and the warm background for optimal accessibility.
Layout & Spacing
This design system employs a Fixed Grid philosophy for desktop layouts to maintain the editorial "columnar" feel, transitioning to a fluid model for mobile.
- Grid: A 12-column grid with a maximum content width of 1280px.
- Rhythm: An 8px linear scale is used for internal component spacing, while larger "breathing room" (48px+) is prioritized between major content sections to prevent visual clutter.
- Margins: Generous page margins (32px minimum) ensure that content never feels cramped against the viewport edges.
Elevation & Depth
Hierarchy is achieved through Tonal Layering supplemented by Ambient Shadows. Instead of aggressive elevation, the system uses subtle shifts in background color to denote "lift."
- Level 0 (Background): #F9F8F0.
- Level 1 (Cards/Surfaces): White (#FFFFFF) or light beige (#FBFBF9) with a very soft, diffused shadow (Blur: 20px, Y: 4px, Opacity: 4% Black).
- Level 2 (Active/Hover): A slightly more pronounced shadow (Blur: 30px, Y: 8px, Opacity: 6% Black) to indicate interactivity.
- Inlays: Subtle 1px borders using #E6E1D3 are preferred over shadows for input fields and nested containers to maintain a flat, modern aesthetic.
Shapes
The shape language is defined by Soft Geometricism. Rounded corners are used to mitigate the "sharpness" of the technical content, making the interface feel approachable and modern.
- Standard Radius: 8px (0.5rem) for small components like buttons and inputs.
- Card Radius: 16px (1rem) for main content containers to create a distinct, structured appearance.
- Large Radius: 24px (1.5rem) for featured sections or promotional banners.
Components
Buttons
- Primary: Solid #191919 background with white text. High-contrast and impactful.
- Secondary: Transparent background with a 1px #191919 border.
- Accent: Solid #E8175D for high-priority CTA (Call to Action).
- Styling: 8px corner radius, medium weight Plus Jakarta Sans.
Cards
- Structure: White background, 16px corner radius, subtle ambient shadow.
- Padding: Generous internal padding (24px or 32px) to maintain the "breathing room" mandate.
Input Fields
- Styling: Soft beige background (#F4F1ED) with no border in default state. On focus, a 1px #191919 border appears with a subtle inner glow.
Chips & Tags
- Styling: Use Space Grotesk for the font. Backgrounds should be low-saturation (e.g., #E6E1D3) to keep them secondary to main content.
Checkboxes & Radios
- Styling: Use the accent color (#E8175D) for the active/checked state to provide a pop of color against the neutral palette.
Editorial Blocks
- Used for long-form text. These blocks should strictly use Noto Serif with a max-width of 720px to ensure optimal line length (measure) for readability.