Skip to main content

Dreamineering Design System V2

Experience the complete design system that powers the Dreamineering platform.

Typography System

Typography with DreamFont​

Engineer the Dream

Then Dream Up the Engineering

Feedback Loops Fuel Everything

Intent, Action, Insight, Evolution

Mental models come alive through collective intelligence

The Dreamineering Framework helps you identify leverage points through structured questioning. It's designed for people who want to move from feeling overwhelmed to taking meaningful action.

Note: All typography scales responsively for optimal mobile experience

SVG Visualization System

Core SVG Components​

Geometric Feedback Loop​

Loading...

The four-stage loop visualization with geometric shapes representing each phase of the Dreamineering process.

Matrix Thinking Network​

Loading...

Non-linear connections between ideas, showing how concepts relate in unexpected ways.

Flow State Visualization​

Loading...

Stream of consciousness represented as a flowing spiral of energy and ideas.

Component Library

Interactive Components​

Loop Step Components​

ImagineEnvision possibilities
CommitTake decisive action
MeasureTrack progress
?
EvolveQuestion and grow

Question Cards​

Question 1

What future are we creating?

Foundation questions help clarify your current position and available resources. They ground you in reality while opening up possibilities.

Question 2

What makes this 10x better?

Strategic questions address long-term planning and help you recognize when you need to change course.

Think exponentially, not incrementally
Question 3

What assumptions must we challenge?

Challenge questions address implementation barriers and competitive dynamics you'll face while building.

CTA Buttons​

Mental Model Diagrams​

Matrix
Pyramid
Flow
Network

Connection Dots​

Design Tokens

Color System​

The design system uses a comprehensive token-based color palette that supports both light and dark themes:

  • Primary (Indigo): Imagination and depth
  • Secondary (Purple): Evolution and creativity
  • Accent (Emerald): Commitment and growth
  • Warning (Amber): Measurement and attention

All colors are carefully selected for accessibility and visual harmony across themes.

Dark Mode Support​

All components are designed with dark mode in mind. Toggle your theme to see how components adapt seamlessly to provide optimal readability and visual comfort in any lighting condition.

Implementation

Using the Design System​

Import Components​

import BrowserOnly from '@docusaurus/BrowserOnly';
import { DreamFont, QuestionCard, CTAButton } from '@site/src/components/design-system';
// Diagram components should be loaded dynamically to avoid SSR issues

Example Usage​

<DreamFont size="headline" weight="bold" transform="uppercase">
  Your Headline Here
</DreamFont>

<BrowserOnly fallback={<div style={{ height: 400, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>Loading...</div>}>
  {() => {
    const { GeometricLoopSVG } = require('@site/src/components/diagrams');
    return <GeometricLoopSVG size={400} animate={true} />;
  }}
</BrowserOnly>

<QuestionCard variant="foundation" text="What's your leverage?">
  Explanation content here...
</QuestionCard>

Design Philosophy​

The Dreamineering Design System embodies:

  1. Clarity Through Hierarchy - Typography that guides the eye
  2. Motion with Purpose - Animations that enhance understanding
  3. Themeable Foundation - Colors that adapt to context
  4. Geometric Precision - SVGs that visualize abstract concepts
  5. Responsive by Default - Mobile-first, accessible always

Dream Big · Think Global · Act Local