Design System
Philosophy & Architecture

Component-Driven Development

The Dreamineering UI system is built on the principles of isolation, composition, and performance. We separate concerns not just by logic, but by how engineering consumes design.

The Three Jobs

We categorize our design output into three distinct workflows, ensuring that developers know exactly how to use a piece of UI.

  • 1

    IMPORT (Components)

    Atomic primitives and common molecules from shared libraries. Stable, tested, and versioned.

  • 2

    COPY (Blocks)

    Complex patterns and layouts. Copied into your app to be adapted to your specific business logic.

  • 3

    COMPARE (Explorations)

    Active R&D and design experiments. Used to align on the best approach before productionization.

DRMG

System Architecture

Component dependency layers. Click nodes to see connections. Data flows upward.

Apps

Domain / Server

Shared Libraries

Foundation

Data Flow

  1. 1. Design tokens define CSS variables
  2. 2. Shared libs consume tokens
  3. 3. Domain libs compose shared
  4. 4. Server binds actions
  5. 5. App imports everything

RSC vs CC Strategy

We embrace **React Server Components (RSC)** by default for maximum performance. Client Components (CC) are strictly reserved for interactivity.

Server Components

  • Direct database/API access
  • Reduced client-side bundle size
  • SEO optimized by default
  • Contain sensitive logic

Client Components

  • Handles user interaction
  • Uses specialized React Hooks (useState, useEffect)
  • Interactive animations (framer-motion)
  • Client-side state management