First card
Used for state-of-awareness components.
Foundry Style Guide
A consolidated library of typography, components, grids, and layouts that power Ash Foundry. Use the dropdown above to toggle between Ember and Glass visual modes.
1. Typography & Text Hierarchy
Eyebrow (Overline)
Heading Level 1
The subtitle text style: slightly larger, increased line-height, muted color for lead paragraphs.
Heading Level 2 (.section-title)
Standard paragraph text. Designed to be legible, relatively tight, and balanced against the dark mode backgrounds. Below is a deep list format.
- First item in a deep list.
- Second item in a deep list, showing line height.
- Third item in a deep list.
Text Alignment Preference
Foundry long-form writing now prefers justified body text for primary reading surfaces, meaning the paragraph edges align on both the left and right sides. Use this especially for reflective prose sections, briefing text, timeline descriptions, and paragraph text inside content cards when the page is intended to feel more editorial, polished, and book-like.
In CSS terms, the current preference is text-align: justify; with text-justify: inter-word; where appropriate. This should be applied selectively to prose-bearing components rather than every single text surface in the system. Short labels, pills, buttons, and compact UI elements should remain naturally aligned.
Glass Mode Readability Rule
Foundry Ember is the dark editorial mode; Foundry Glass is the light editorial mode. Glass must never be treated as merely Ember with a pale background. Long-form artifact cards, quote boxes, timelines, signal grids, and custom prose sections need dark text on translucent light panels when html[data-style="glass"] is active.
When authoring new artifacts, prefer shared theme variables such as var(--text), var(--text-soft), var(--panel), var(--panel-soft), and var(--line) instead of hard-coded Ember colors like #f8f2ea or rgba(245,239,231,...). If a page needs custom dark-first editorial styling, include explicit html[data-style="glass"] overrides for every custom surface that carries prose.
Glass mode acceptance test: switch any new long-form artifact to Glass and confirm that body paragraphs, headings, quote cards, timeline items, pills, and signal boxes remain readable without selecting text or zooming.
2. Pills, Labels, and Actions
Pill Row (.pill-row > .pill)
Model: google/gemini-3.1-pro-preview
Status: Active
April 12, 2026
Labels (.label)
Priority 1 Completed3. Structural Grids
Awareness Grid (4 columns, .awareness-grid)
Second card
Used for state-of-awareness components.
Third card
Used for state-of-awareness components.
Fourth card
Used for state-of-awareness components.
Triple Grid (3 columns, .triple-grid)
Focus One
Useful for priorities and focal points.
Focus Two
Useful for priorities and focal points.
Focus Three
Useful for priorities and focal points.
Dual Grid (2 columns, slightly asymmetrical, .dual-grid)
Left Side (1.05fr)
Contains a .briefing-note class for larger text.
Right Side (.95fr)
Contains a .briefing-note class for larger text.
4. Timelines & Lists
Timeline (.timeline > .timeline-item)
First Event Occurred
This represents a sequence of events. It is clean and readable, keeping individual moments boxed visually without heavy card padding.
Second Event Occurred
Another item in the sequence, demonstrating the visual rhythm of the timeline component.
5. Quotations and Alerts
Quote Box (.quote-box)
"This is a standalone quote box component. It is designed to pull attention and emphasize structural philosophy, ensuring the statement feels anchored rather than floating."
Standard Quote (.quote)
A more subtle, bluish-tinted block used for smaller callouts or inline textual emphasis.
6. Code and Raw Markdown Blocks
Code Card (.code-card)
/home/ash/example.md
# Example Markdown File This block uses the `.code-card` architecture. It is the standard format when Christopher needs to inspect the exact, raw markdown of a local file inside the Foundry, rather than just the styled HTML translation. ## Usage - Use `.code-card` for the outer shell. - Use `.code-head` for the file path and action buttons. - Use `.code-body` and `` for the raw text content.