Design System Showcase

Comprehensive demonstration of the Zen+ Design Philosophy, DDV Codex Color System, and typography standards.

This page showcases every design system element in action, allowing you to visualize, refine, and iterate on the complete design language.

Color System: DDV Codex

The DDV Codex defines our four core brand personalities through color.

BigSis

#00A1F1

Strategic Intelligence • Technical Excellence • System Architecture

Bro

#FE5F00

Community Energy • Social Connection • Viral Growth

LilSis

#7E3AF2

Creative Expression • User Experience • Visual Design

CBO

#3EB85F

Financial Performance • DeFi Strategy • Value Optimization

Typography Hierarchy

Font Stack

Headings: DM Sans (geometric, modern) Body: Inter (readable, neutral) Code: JetBrains Mono (monospace, clear)

Hierarchy Examples

H1: Primary Page Title

Font: DM Sans Bold • Size: 2.5rem (40px) • Weight: 700 • Line Height: 1.2

H2: Major Section Headers

Font: DM Sans SemiBold • Size: 2rem (32px) • Weight: 600 • Line Height: 1.3

H3: Subsection Headers

Font: DM Sans Medium • Size: 1.5rem (24px) • Weight: 500 • Line Height: 1.4

Body Text: This is standard body text using Inter font family. It's designed for maximum readability with optimal spacing and line height. Body text uses 16px base size with 1.6 line height for comfortable reading.

Inline code uses JetBrains Mono with subtle background highlighting for clear distinction from body text.

8px Grid System

Base Unit: 8px • Scale: 8, 16, 24, 32, 40, 48, 56, 64

8px - Minimal spacing

16px - Tight spacing

24px - Standard spacing

32px - Comfortable spacing

48px - Section spacing

64px - Major section spacing

Mermaid Diagrams

System Architecture (DDV Codex Styling)

User Journey Flow

Timeline Visualization

Admonitions

Docusaurus supports multiple admonition types for different message priorities.

Information

Standard informational content that provides helpful context without urgency. Use for general notes and observations.

Pro Tip

Helpful suggestions and best practices that improve user experience. Use for optimization advice and shortcuts.

Technical Detail

Technical specifications, API details, or system information. Use for developer-focused content.

Attention Required

Important warnings that require user attention. Use when users need to be careful or verify something.

Critical Warning

Serious warnings about potential issues or risks. Use when actions could cause problems if not handled correctly.

Danger Zone

Critical alerts about destructive actions or serious risks. Use sparingly for only the most severe warnings.

Interactive Components

Tabs

Overview
Implementation
Advanced

Overview content provides high-level understanding of the concept or feature. This is typically where users start before diving into specifics.

Implementation details guide users through the practical application. Code examples and step-by-step instructions go here.

// Example implementation
const config = {
  theme: 'zen-plus',
  colors: ['#00A1F1', '#FE5F00', '#7E3AF2', '#3EB85F']
};

Agent Cards

🧠

Big SisMentor & Memory

Strategic Intelligence

System architecture, technical planning, and strategic oversight

⚡

BroCatalyst & Energy

Community Energy

Social engagement, viral growth, and community building

🎨

Lil SisCreative Spark

Creative Expression

User experience design, visual creativity, and interface polish

📊

CBOStrategist & Balance

Financial Strategy

DeFi optimization, revenue models, and value maximization

Code Blocks

JavaScript Example

config.js
/**
 * Proper Labs Design System Configuration
 * Implements Zen+ philosophy with DDV Codex colors
 */

const designSystem = {
  // 60-30-10 Distribution Rule
  distribution: {
    neutral: 0.60,    // 60% neutral space
    structure: 0.30,  // 30% structural elements
    accent: 0.10      // 10% brand accent
  },

  // DDV Codex Color System
  colors: {
    bigsis: '#00A1F1',   // Strategic Intelligence
    bro: '#FE5F00',      // Community Energy
    lilsis: '#7E3AF2',   // Creative Expression
    cbo: '#3EB85F'       // Financial Strategy
  },

  // 8px Grid System
  spacing: {
    base: 8,
    scale: [8, 16, 24, 32, 40, 48, 56, 64]
  },

  // Typography
  fonts: {
    heading: 'DM Sans, sans-serif',
    body: 'Inter, sans-serif',
    code: 'JetBrains Mono, monospace'
  }
};

export default designSystem;

TypeScript Example

types.ts
interface DesignToken {
  name: string;
  value: string;
  category: 'color' | 'spacing' | 'typography';
}

interface ColorPalette {
  bigsis: string;
  bro: string;
  lilsis: string;
  cbo: string;
}

interface TypographyScale {
  h1: { size: string; weight: number; lineHeight: number };
  h2: { size: string; weight: number; lineHeight: number };
  h3: { size: string; weight: number; lineHeight: number };
  body: { size: string; weight: number; lineHeight: number };
}

const typography: TypographyScale = {
  h1: { size: '2.5rem', weight: 700, lineHeight: 1.2 },
  h2: { size: '2rem', weight: 600, lineHeight: 1.3 },
  h3: { size: '1.5rem', weight: 500, lineHeight: 1.4 },
  body: { size: '1rem', weight: 400, lineHeight: 1.6 }
};

Python Example

design_system.py
"""
Proper Labs Design System - Python Implementation
"""

class ZenPlusDesign:
    """Implements Zen+ design philosophy"""

    # 60-30-10 Distribution Rule
    NEUTRAL_RATIO = 0.60
    STRUCTURE_RATIO = 0.30
    ACCENT_RATIO = 0.10

    # DDV Codex Colors
    COLORS = {
        'bigsis': '#00A1F1',
        'bro': '#FE5F00',
        'lilsis': '#7E3AF2',
        'cbo': '#3EB85F'
    }

    # 8px Grid System
    BASE_SPACING = 8
    SPACING_SCALE = [8, 16, 24, 32, 40, 48, 56, 64]

    @staticmethod
    def get_spacing(multiplier: int) -> int:
        """Calculate spacing based on 8px grid"""
        return ZenPlusDesign.BASE_SPACING * multiplier

    @staticmethod
    def validate_distribution(neutral: float, structure: float, accent: float) -> bool:
        """Validate 60-30-10 distribution rule"""
        total = neutral + structure + accent
        return abs(total - 1.0) < 0.01

Lists & Tables

Unordered Lists

Primary Level: Key design principles
- Secondary Level: Implementation details
  - Tertiary Level: Specific examples and edge cases
- Multi-level lists maintain visual hierarchy
Consistent spacing using 8px grid
Clear visual distinction between levels

Ordered Lists

Define the problem: Understand user needs and pain points
Research solutions: Analyze existing patterns and best practices
Design system: Apply Zen+ philosophy and DDV Codex colors
Prototype: Build interactive mockups with real components
Test & iterate: Gather feedback and refine based on data
Document: Create comprehensive guidelines for team

Tables

Design Token	Value	Usage	Example
BigSis	`#00A1F1`	Strategic, technical	System architecture diagrams
Bro	`#FE5F00`	Community, social	User engagement features
LilSis	`#7E3AF2`	Creative, UX	Interface design, visual elements
CBO	`#3EB85F`	Financial, DeFi	Revenue metrics, yield data

Typography	Font Family	Size	Weight	Line Height
H1	DM Sans	40px	700	1.2
H2	DM Sans	32px	600	1.3
H3	DM Sans	24px	500	1.4
Body	Inter	16px	400	1.6
Code	JetBrains Mono	14px	400	1.5

Layout Examples

Two-Column Layout

Left Column

Content automatically flows into a responsive grid system. On mobile, columns stack vertically. On desktop, they display side-by-side.

Right Column

The grid uses auto-fit and minmax for intelligent responsive behavior without media queries.

Three-Column Grid

BigSis

Strategic

Bro

Social

LilSis

Creative

Feature Comparison Cards

Standard Plan

$29/mo

✅ Basic features
✅ Community support
✅ 1 team member
❌ Advanced analytics
❌ Priority support

POPULAR

Pro Plan

$99/mo

✅ All basic features
✅ Priority support
✅ 5 team members
✅ Advanced analytics
✅ Custom integrations

Enterprise

Custom

✅ All Pro features
✅ Dedicated support
✅ Unlimited team
✅ White-label options
✅ SLA guarantee

Text Formatting

Emphasis & Inline Styles

This paragraph demonstrates bold text for emphasis, italic text for subtle emphasis, and bold italic for maximum emphasis. You can also use inline code for technical terms, or create internal links and external links.

Blockquotes

Design Principle: The best design is invisible. It guides users effortlessly toward their goals without drawing attention to itself.

— Zen+ Philosophy

Performance Rule: 95% clarity + 5% personality = Perfect balance

This is the foundation of our 60-30-10 distribution rule.

Horizontal Rules

Use horizontal rules to create clear visual separation between major sections.

Buttons & CTAs

Primary Action

Secondary Action

Outline Button

Link Button

Regular Size

Small Size

Large Size

Button Hierarchy System

Our button system follows a clear 3-tier hierarchy optimized for the Zen+ design philosophy (95% clarity + 5% personality).

Primary: Soft Fill - Modern & On-Brand

Use for: Main CTAs, primary actions, form submissions, key user flows

Specifications:

Background: rgba(color, 0.1) (10% opacity)
Border: 1px solid rgba(color, 0.2) (20% opacity)
Text color: Full brand color
Border radius: 6px
Font weight: 500
Padding: 10px 20px
Line height: 1 (tight, no extra space)

Secondary: Outlined - Clean & Professional

Use for: Supporting actions, alternative options, navigation, filters

Specifications:

Background: transparent
Border: 2px solid [brand-color]
Text color: Full brand color
Border radius: 6px
Font weight: 500
Padding: 9px 19px (compensates for 2px border)
Line height: 1 (tight, no extra space)

Tertiary: Ghost - Minimal & Refined

Use for: Tertiary actions, cancel buttons, dismissive actions, low-priority options

Specifications:

Background: transparent
Border: 1px solid transparent
Text color: Full brand color
Border radius: 6px
Font weight: 500
Padding: 10px 20px
Line height: 1 (tight, no extra space)

Button Best Practices

Spacing & Layout:

❌ Never wrap button text in paragraph tags or other block elements
✅ Always use direct text inside button elements
✅ Use lineHeight: 1 for tight, centered text (never 1.4 or higher)
✅ Use flexbox centering with display: inline-flex, alignItems: center, justifyContent: center
✅ Maintain 8px grid system for padding and margins

Visual Hierarchy:

Use 1 primary button per screen/section (Soft Fill)
Use 1-2 secondary buttons for alternatives (Outlined)
Use ghost buttons sparingly for low-priority actions (Ghost)
Never mix multiple primary button styles on the same page

Accessibility:

Minimum touch target: 44x44px (current buttons exceed this)
Color contrast ratios meet WCAG AA standards
Focus states inherit from Docusaurus theme

Design System Summary

Zen+ Philosophy

Core Principle: 95% clarity + 5% personality = Perfect balance

60-30-10 Distribution Rule:

60% Neutral: White space, backgrounds, neutral text
30% Structure: Headers, borders, navigation, containers
10% Accent: Brand colors, CTAs, highlights, emphasis

DDV Codex Application Guide

Agent	Color	When to Use
BigSis	#00A1F1	Technical docs, architecture, system design
Bro	#FE5F00	Community features, social engagement, viral mechanics
LilSis	#7E3AF2	UI/UX design, creative content, user-facing features
CBO	#3EB85F	Financial data, DeFi features, revenue metrics

Button System (Finalized)

3-Tier Hierarchy for Optimal UX:

Primary: Soft Fill - Main CTAs, form submissions, key actions
- 10% color opacity background with 20% border
- Subtle, modern, on-brand
Secondary: Outlined - Supporting actions, alternatives, filters
- 2px solid border, transparent background
- Clean, professional appearance
Tertiary: Ghost - Low-priority actions, cancel, dismiss
- Transparent border and background
- Minimal visual weight

Critical Technical Requirements:

✅ lineHeight: 1 (never 1.4 - causes spacing issues)
✅ Direct text in buttons (no wrapper tags)
✅ Flexbox centering: display: inline-flex, alignItems: center, justifyContent: center
✅ 8px grid system for all spacing

Typography Guidelines

Headings: Use DM Sans for all heading levels (H1-H6)
Body: Use Inter for all body text and paragraphs
Code: Use JetBrains Mono for all code, commands, and technical terms
Hierarchy: Maintain clear size contrast (40px → 32px → 24px → 16px)
Line Height: Body text 1.4-1.6, Buttons must use 1.0

Spacing Standards

Base Unit: 8px (0.5rem)
Component Padding: 16px or 24px
Section Spacing: 32px or 48px
Major Sections: 64px
Grid Gap: 16px or 24px

Mermaid Best Practices

// Always set maxTextSize in docusaurus.config.js
mermaid: {
  options: {
    maxTextSize: 90000
  }
}

// Use DDV Codex colors for agent nodes
style BigSis fill:#00A1F1,stroke:#0088cc,color:#fff
style Bro fill:#FE5F00,stroke:#e55500,color:#fff
style LilSis fill:#7E3AF2,stroke:#6c2bd9,color:#fff
style CBO fill:#3EB85F,stroke:#35a352,color:#fff

Status: Design System v3.2.0 | Last Updated: January 2025 | Maintained By: LilSis 🎨

Color System: DDV Codex​

BigSis

Bro

LilSis

CBO

Typography Hierarchy​

Font Stack​

Hierarchy Examples​

H1: Primary Page Title

H2: Major Section Headers​

H3: Subsection Headers​

8px Grid System​

Mermaid Diagrams​

System Architecture (DDV Codex Styling)​

User Journey Flow​

Timeline Visualization​

Admonitions​

Interactive Components​

Tabs​

Agent Cards​

Strategic Intelligence

Community Energy

Creative Expression

Financial Strategy

Code Blocks​

JavaScript Example​

TypeScript Example​

Python Example​

Lists & Tables​

Unordered Lists​

Ordered Lists​

Tables​

Layout Examples​

Two-Column Layout​

Left Column

Right Column

Three-Column Grid​

Feature Comparison Cards​

Standard Plan

Pro Plan

Enterprise

Text Formatting​

Emphasis & Inline Styles​

Blockquotes​

Horizontal Rules​

Buttons & CTAs​

Button Hierarchy System​

Primary: Soft Fill - Modern & On-Brand

Secondary: Outlined - Clean & Professional

Tertiary: Ghost - Minimal & Refined

Button Best Practices​

Design System Summary​

Zen+ Philosophy​

DDV Codex Application Guide​

Button System (Finalized)​

Typography Guidelines​

Spacing Standards​

Mermaid Best Practices​

Color System: DDV Codex

Typography Hierarchy

Font Stack

Hierarchy Examples

H2: Major Section Headers

H3: Subsection Headers

8px Grid System

Mermaid Diagrams

System Architecture (DDV Codex Styling)

User Journey Flow

Timeline Visualization

Admonitions

Interactive Components

Tabs

Agent Cards

Code Blocks

JavaScript Example

TypeScript Example

Python Example

Lists & Tables

Unordered Lists

Ordered Lists

Tables

Layout Examples

Two-Column Layout

Three-Column Grid

Feature Comparison Cards

Text Formatting

Emphasis & Inline Styles

Blockquotes

Horizontal Rules

Buttons & CTAs

Button Hierarchy System

Button Best Practices

Design System Summary

Zen+ Philosophy

DDV Codex Application Guide

Button System (Finalized)

Typography Guidelines

Spacing Standards

Mermaid Best Practices