Documentation
Full reference for the Tribar Design Engine — architecture, principles, modules, and output formats. For the complete specification, see the Design Engine docs (fragmented) document.
Architecture
Design Engine Core
The Design Engine is a creative engineering machine that takes a client brief and outputs a complete, importable Flutter project — themed, componentized, and pre-wired to backend templates.
Pipeline
Input (Client Brief) → Semantic Tokenizer → AI Generator → Code Gen Pipeline → Output (Flutter project + Figma file + Design spec)
Components
Six core modules: Semantic Tokenizer, AI Generator, Color Generation Engine, Typography & Spacing Engine, Widget Composer, Code Generation Pipeline. Plus: Design Rules DB and Learning Loop.
The Three Principles
Seamlessness — Technology in Flow
Adjacent surfaces differ by ≤2 lightness steps. Border radius is consistent across interactive elements. Spacing follows a 4px base unit. Navigation depth ≤3 levels.
Humanity — Designed for Connection
Touch targets ≥48×48dp. Undo for destructive actions. Micro-interactions (buttons depress 0.97, cards lift). Humanist or geometric sans body font. Generous line height ≥1.4.
Harmony — The Geometry of Intelligence
Modular typographic scale (1.25 or 1.333). 60-30-10 color distribution. Maximum 3 levels of visual prominence. Balanced whitespace on symmetrical axes.
The Human Hand — Anti-Slop
At least one signature moment per project. Spring physics for motion. ≥60% saturated accent color. Surface texture. Grid-breaking layout. Copy audacity in every screen.
Semantic Tokenizer
7 Domains
Industrial, Wellness, Mobility, Professional Services, Creative, Education, Agriculture/Environment — each with an anchor hue, saturation range, and contrast profile.
16 Personality Adjectives
Precision, Calm, Warm, Energetic, Technical, Playful, Luxury, Bold, Minimal, Organic, Naive/Hand-drawn, Editorial, Brutalist, Maximalist, Tactile, Nostalgic — each with delta shifts.
Output Parameters
colorTemperature, hueAnchor, saturationRange, contrastProfile, spacingDensity, cornerProfile, motionProfile, typographyPersonality, primaryLightnessAnchor.
Color Generation Engine
HSL Pipeline
Deterministic pipeline: hueAnchor + saturationRange → 11-stop primary palette (50–950). Desaturated hues → neutral palette. Semantic hues → success/warning/danger/info.
WCAG AA Compliance
All text-on-surface combinations validated for ≥4.5:1 contrast (normal text) and ≥3:1 (large text). Lightest surface ≥#F8F8F8. Darkest surface ≤#121212.
Light + Dark Mode
Complete light and dark color systems generated simultaneously. Surface and text colors maintain hierarchy across both modes.
Typography Engine
Font Pairings
Body: Inter (always). Heading: varies by personality — Outfit (geometric), Plus Jakarta Sans (humanist), Space Grotesk (technical), Clash Display (playful), Inter (minimal). Mono: JetBrains Mono.
Modular Scale
Default 1.25 ratio (minor third) or 1.333 (perfect fourth). All sizes derived from base 16px × scale ratio. 11-step type scale from caption to display-xl.
CSS Output
Ready-to-use CSS custom properties for font families, sizes, line heights, weights, and letter spacing.
Widget Composer
Feature Mapping
10+ feature mappings: dashboard, sensor-list, alerts, control-panel, settings, auth, data-table, map, chat, onboarding. Each maps to 3–5 component widgets + layout pattern.
Layout Patterns
grid-2col, grid-3col, list, stack, list-grouped, centered, full-width, chat, carousel — each matched to the feature's information density and interaction model.
Navigation Structure
Bottom nav for dashboard apps, top tabs for data-heavy views. Navigation items derive from feature set.
Code Generation Pipeline
Flutter Output
31-file Flutter project with complete theming, component library, screen compositions, and API service templates.
Project Structure
lib/ (main, app, theme, components, screens, services, models, utils), test/, pubspec.yaml, analysis_options.yaml.
Pencil Bridge
Design Engine → Pencil
Takes a generated design spec and produces structured prompts for Pencil's batch_design MCP tool to create visual .pen files.
Pencil → Design Engine
Extracts design tokens, typography rules, and component structure from Pencil variables back into the Design Engine format — feeding the Learning Loop.