---
name: Semantic Clarity
colors:
  surface: '#f7f9fb'
  surface-dim: '#d8dadc'
  surface-bright: '#f7f9fb'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f2f4f6'
  surface-container: '#eceef0'
  surface-container-high: '#e6e8ea'
  surface-container-highest: '#e0e3e5'
  on-surface: '#191c1e'
  on-surface-variant: '#44474c'
  inverse-surface: '#2d3133'
  inverse-on-surface: '#eff1f3'
  outline: '#75777d'
  outline-variant: '#c5c6cd'
  surface-tint: '#515f74'
  primary: '#1d2b3e'
  on-primary: '#ffffff'
  primary-container: '#334155'
  on-primary-container: '#9eadc5'
  inverse-primary: '#b9c7e0'
  secondary: '#505f76'
  on-secondary: '#ffffff'
  secondary-container: '#d0e1fb'
  on-secondary-container: '#54647a'
  tertiary: '#1c2b3c'
  on-tertiary: '#ffffff'
  tertiary-container: '#334153'
  on-tertiary-container: '#9eadc2'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#d5e3fd'
  primary-fixed-dim: '#b9c7e0'
  on-primary-fixed: '#0d1c2f'
  on-primary-fixed-variant: '#3a485c'
  secondary-fixed: '#d3e4fe'
  secondary-fixed-dim: '#b7c8e1'
  on-secondary-fixed: '#0b1c30'
  on-secondary-fixed-variant: '#38485d'
  tertiary-fixed: '#d4e4fa'
  tertiary-fixed-dim: '#b9c8de'
  on-tertiary-fixed: '#0d1c2d'
  on-tertiary-fixed-variant: '#39485a'
  background: '#f7f9fb'
  on-background: '#191c1e'
  surface-variant: '#e0e3e5'
typography:
  h1:
    fontFamily: Inter
    fontSize: 2.5rem
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  h2:
    fontFamily: Inter
    fontSize: 2rem
    fontWeight: '600'
    lineHeight: '1.3'
    letterSpacing: -0.01em
  h3:
    fontFamily: Inter
    fontSize: 1.5rem
    fontWeight: '600'
    lineHeight: '1.4'
    letterSpacing: '0'
  body-lg:
    fontFamily: Inter
    fontSize: 1.125rem
    fontWeight: '400'
    lineHeight: '1.7'
    letterSpacing: '0'
  body-md:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: '400'
    lineHeight: '1.6'
    letterSpacing: '0'
  label-sm:
    fontFamily: Inter
    fontSize: 0.875rem
    fontWeight: '500'
    lineHeight: '1.5'
    letterSpacing: 0.02em
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  container-max: 1200px
  gutter: 1.5rem
  section-padding: 5rem
  stack-sm: 0.5rem
  stack-md: 1rem
  stack-lg: 2rem
---

## Brand & Style

The brand personality is authoritative yet approachable, focusing on clarity of information and structural integrity. It is designed for professional environments—SaaS documentation, corporate portfolios, and information-dense blogs—where the content is the protagonist. 

The aesthetic follows a **Modern Minimalist** movement. It strips away unnecessary decorative elements in favor of extreme legibility and semantic HTML structure. The emotional response should be one of "calm efficiency." By prioritizing whitespace and a disciplined color palette, the UI feels lightweight and fast, mirroring the technical performance of its Pico.css/Milligram foundations.

## Colors

The palette is rooted in "Slate Blues" and "Cool Grays" to maintain a neutral, professional atmosphere. 

- **Primary:** A deep slate used for primary headings and prominent UI elements.
- **Secondary/Tertiary:** Variations of muted blue-grays for secondary text, icons, and less-critical metadata.
- **Neutral:** A very light off-white/gray for section backgrounds to define areas without using heavy borders.
- **Accent:** A singular, vibrant blue reserved exclusively for primary calls to action and active states, ensuring high functional visibility.

## Typography

This design system utilizes **Inter** for its systematic, utilitarian nature. It thrives in a "System Font" environment, ensuring zero-latency loading and a native-feel across all operating systems.

The hierarchy is strictly enforced through scale and weight rather than decorative flourishes. Headlines use a tighter letter-spacing and heavier weights to anchor the page, while body copy utilizes a generous line-height (1.6 to 1.7) to maximize readability in long-form content typical of ProcessWire-driven sites.

## Layout & Spacing

The layout utilizes a **Fixed Grid** philosophy. Content is centered within a maximum width of 1200px to prevent excessive line lengths on wide monitors.

- **Vertical Rhythm:** A "Stack" model is used. Elements within a component use `stack-sm`. Components within a section use `stack-md`. Entire sections are separated by `section-padding` to create a sense of breathability and high-end polish.
- **Semantic Structure:** Layout is driven by `<header>`, `<main>`, `<section>`, and `<footer>` tags, allowing the CSS framework (Pico/Milligram) to naturally apply spacing via margin-bottom on block-level elements.

## Elevation & Depth

To remain lightweight and "flat," this design system avoids heavy box-shadows. Instead, it uses **Tonal Layers** and **Low-Contrast Outlines**.

- **Surfaces:** Depth is created by placing white components on a `neutral_color_hex` (#f8fafc) background. 
- **Borders:** Use a 1px solid `border_subtle_hex` (#e2e8f0) for cards and input fields. 
- **Interactivity:** On hover, elements may transition to a slightly darker border or a very soft, diffused ambient shadow (0 4px 6px -1px rgb(0 0 0 / 0.05)) to indicate clickability without breaking the minimalist aesthetic.

## Shapes

The shape language is **Soft**. A 0.25rem (4px) radius is applied to buttons, input fields, and cards. This subtly rounds off the "sharpness" of the brutalist grid without becoming overly playful or bubbly. It maintains a geometric precision that aligns with professional, data-driven templates.

## Components

Components are designed to be mapped directly to ProcessWire Repeater fields or Page-based content blocks.

- **Buttons:** Primary buttons use the accent blue with white text. Secondary buttons use a transparent background with a slate border. All buttons should have a `transition: all 0.2s ease` property.
- **Input Fields:** Utilize standard HTML `<label>` and `<input>` pairings. Focus states should use a 2px solid ring of the accent color with a slight offset.
- **Cards:** Simple containers with a white background, 1px subtle border, and `stack-md` internal padding. Titles within cards should always be `h3` or `h4` for SEO hierarchy.
- **Lists:** Unordered lists in content areas should use a custom slate-colored bullet point to match the primary color.
- **ProcessWire Integration:** All components are defined by their semantic HTML tags so that the CMS output requires minimal classes (e.g., `<article>` for blog posts, `<aside>` for sidebars), keeping the template files clean and maintainable.