Dreamineering Design System

Simple but bold, word-forward design that amplifies intellectual depth

Typography System

Typography Hierarchy

Display Text (6xl)

Headline Text (4xl)

Title Text (3xl)

Subtitle Text (xl italic)

Body text with optimal line-height for complex content. This is the primary text size used throughout the documentation to ensure readability while maintaining information density.

Note text for annotations and supporting details

Mental Models

Visual Thinking Tools

Feedback Loop Visualization

The feedback loop represents the continuous cycle of improvement through Imagine → Commit → Measure → Evolve. Each stage builds upon the previous, creating momentum for transformational change.

Mental Model Diagrams

Matrix: Navigate uncertainty through quadrants

Pyramid: Build from foundation to vision

Flow: Transform inputs into outcomes

Network: Connect concepts for emergence

Question Architecture

Progressive Question Framework

Question 1

What fundamental assumptions are we making?

Foundation questions establish the bedrock of understanding. They challenge us to examine our core beliefs and identify the axioms upon which we build our mental models.

Question 2

How might we transform constraints into opportunities?

Strategic questions reframe problems as possibilities. They help us see beyond immediate obstacles to discover hidden pathways and unexpected solutions.

Strategic thinking transforms limitations into launch pads

Question 3

What would need to be true for this to fail spectacularly?

Challenge questions stress-test our thinking. By imagining failure modes, we strengthen our approach and build resilience into our solutions.

Question 4

What timeless principle guides this decision?

Principle questions connect immediate decisions to enduring truths. They ensure our actions align with fundamental laws rather than temporary trends.

First principles thinking cuts through complexity

Interactive Elements

Connection Indicators

Foundation Concept Active Connection Key Insight Verified Truth Critical Point

These visual cues create semantic relationships between concepts, helping users navigate the intellectual landscape of the Dreamineering framework.

Call-to-Action Components

Vertical Rhythm

Content Flow Patterns

Generous Spacing

Extra-large gaps (12 spacing units) between major sections create clear conceptual boundaries and give ideas room to breathe.

Thoughtful Hierarchy

Visual weight and spacing work together to guide the eye naturally through complex information architecture.

Progressive Disclosure

Information unfolds in digestible layers, allowing users to go as deep as their curiosity takes them.

Implementation

Using the Design System

Import Components

import {
  DreamFont,
  QuestionCard,
  CTAButton
} from '@site/src/components/design-system';

import {
  FeedbackLoopSVG,
  MentalModelDiagram
} from '@site/src/components/diagrams';

Create Structured Content

<VerticalStack gap="lg">
  <QuestionCard
    variant="foundation"
    text="What is the essence of this concept?"
  >
    Your explanation here...
  </QuestionCard>

  <MentalModelDiagram type="pyramid" />

  <CTAButton variant="primary">
    Take Action
  </CTAButton>
</VerticalStack>

Maintain Visual Consistency

• Use DreamFont for all text elements
• Apply VerticalStack for consistent spacing
• Leverage QuestionCard variants for different thinking modes
• Include FeedbackDivider between major sections
• Add ConnectionDot for visual relationships

Next Steps

Implementation Roadmap

1. Phase 1: Apply typography system to existing content
2. Phase 2: Convert dense text blocks to question cards
3. Phase 3: Add visual diagrams to explain complex concepts
4. Phase 4: Implement interactive elements and animations
5. Phase 5: Optimize for mobile experience

---

This design system transforms abstract concepts into tangible understanding through thoughtful typography, strategic visual hierarchy, and meaningful interaction patterns.