---
name: Warm Intellectualism
colors:
  surface: '#fbfaf2'
  surface-dim: '#dbdad3'
  surface-bright: '#fbfaf2'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f5f4ec'
  surface-container: '#efeee6'
  surface-container-high: '#e9e8e1'
  surface-container-highest: '#e3e3db'
  on-surface: '#1b1c17'
  on-surface-variant: '#444748'
  inverse-surface: '#30312c'
  inverse-on-surface: '#f2f1e9'
  outline: '#747878'
  outline-variant: '#c4c7c7'
  surface-tint: '#5f5e5e'
  primary: '#000000'
  on-primary: '#ffffff'
  primary-container: '#1c1b1b'
  on-primary-container: '#858383'
  inverse-primary: '#c8c6c5'
  secondary: '#b80046'
  on-secondary: '#ffffff'
  secondary-container: '#e4115a'
  on-secondary-container: '#fffbff'
  tertiary: '#000000'
  on-tertiary: '#ffffff'
  tertiary-container: '#390b00'
  on-tertiary-container: '#c8694b'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#e5e2e1'
  primary-fixed-dim: '#c8c6c5'
  on-primary-fixed: '#1c1b1b'
  on-primary-fixed-variant: '#474746'
  secondary-fixed: '#ffd9dd'
  secondary-fixed-dim: '#ffb2bc'
  on-secondary-fixed: '#400013'
  on-secondary-fixed-variant: '#910035'
  tertiary-fixed: '#ffdbd0'
  tertiary-fixed-dim: '#ffb59e'
  on-tertiary-fixed: '#390b00'
  on-tertiary-fixed-variant: '#7a2f15'
  background: '#fbfaf2'
  on-background: '#1b1c17'
  surface-variant: '#e3e3db'
typography:
  h1:
    fontFamily: Plus Jakarta Sans
    fontSize: 48px
    fontWeight: '600'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  h2:
    fontFamily: Plus Jakarta Sans
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: -0.01em
  h3:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: '500'
    lineHeight: '1.3'
  body-editorial:
    fontFamily: Noto Serif
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-ui:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.5'
  accent-label:
    fontFamily: Space Grotesk
    fontSize: 13px
    fontWeight: '500'
    lineHeight: '1'
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  base: 4px
  xs: 8px
  sm: 16px
  md: 24px
  lg: 48px
  xl: 80px
  gutter: 24px
  margin: 32px
---

## 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:

1.  **Headlines (Plus Jakarta Sans):** Used for primary titles and navigational headers. It provides a contemporary, friendly, and geometric structure.
2.  **Editorial (Noto Serif):** Reserved for long-form reading, descriptions, and "thoughtful" content. This brings an authoritative, literary quality to the interface.
3.  **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.