Studio Workspace (Creative Assets & Penpot)

The Studio workspace serves as the multi-disciplinary creative and structural nucleus of the Elo Orgânico ecosystem. It functions as the master repository for brand strategy, high-fidelity design sources across professional suites, and a technical orchestration layer for our self-hosted design environment integrated with the Aide AI assistant.

Brand Identity

Visual Strategy and Governance

The visual identity is grounded in the Everyman archetype, prioritizing accessibility, empathy, and realistic community orientation. Governance is maintained through a strictly tokenized design system engineered for WCAG AAA compliance.

Core Philosophy and Pillars

• Belonging: Fostering community ownership and collective participation.
• Honest Simplicity: Transparent operations delivered through intuitive, functional interfaces.
• Human Connection: Maintaining the social link in every digital transaction.
• Concept: "From peer to peer, from soil to table."

Brand Slogans

Context	Slogan
Primary	"Your community, our harvest."
Functional	"Organic sharing, easy as it should be."
Marketing	"As natural as our friendship."

Complete Color Palette Specification

The color identity evokes naturalness combined with community simplicity. All tokens are prioritized for accessibility and semantic flexibility.

Primary Identity (Brand Triad)

Swatch	Token	Hex	Functional Application
	Olive Leaf	#8EA637	Primary brand identifier and interactive components.
	Sprout Green	#C9F2AC	Secondary support, highlights, and luminosity.
	Deep Forest	#022601	Solid bases, high-contrast text, and structural borders.

Background System (Surfaces)

Swatch	Token	Hex	Suggested Use
	Natural Fiber	#F2E8C9	Light Background (Base). Warm cream.
	Coffee Soil	#400101	Dark Background (Base). Main background for Dark Mode.
	Mint Whisper	#F1F8E9	Light Background (Tint). Soft highlight surfaces.
	Canopy Dark	#02590F	Dark Background (Shade). Modals and sidebars.

Structural Neutral Colors

Swatch	Token	Hex	Suggested Use
	Raw Line	#E6DCC3	Light Background Borders.
	Night Line	#2C1A1A	Dark Background Borders.
	Disabled Gray	#A89F91	Disabled states. Warm gray.

Highlight & Feedback

Swatch	Token	Hex	Purpose
	Harvest Pumpkin	#F2622E	CTA / Primary Action.
	Sun Pollen	#F2A341	Highlights / Badges.
	Emerald Fresh	#2ECC71	Success states.
	Clay Error	#D9042B	Critical alerts.
	Ripe Warning	#F2C84B	Warnings and cautionary alerts.
	Water Info	#2F80ED	Informational messages and tips.

Typography and Font Engineering

The system utilizes the Nunito font family (Rounded), managed as a centralized asset within the @studio workspace to ensure cross-package parity. Headlines are prioritized in Bold weights, while body text follows Regular weight specifications.

• Distribution: Fonts are bundled via @fontsource/nunito and injected automatically into the global styles through the centralized theme.css.
• Performance: Implementation utilizes Variable Fonts (variable.css) to provide the full weight spectrum (200-900) with a single HTTP request, optimizing Core Web Vitals.

Technical Implementation: Hybrid Token System

The design system employs a Hybrid Source of Truth (SSOT) model, bridging the gap between high-performance CSS and type-safe TypeScript engineering.

Layer	File Path	Technical Purpose
Source of Truth (TS)	src/tokens/colors.ts	Strongly-typed object (HEX) for React components, GSAP animations, and Three.js materials.
Distribution Layer (CSS)	src/tokens/theme.css	Tailwind CSS v4 @theme block and base resets for zero-runtime browser delivery.
Icon Registry	src/icons/index.tsx	Curated barrel of FontAwesome icons and a standardized Icon component wrapper (forwardRef).

Penpot & Aide

Self-Hosted Design Engineering

Elo Orgânico utilizes a distributed Penpot stack integrated with Aide, an AI-native engineering assistant. This configuration ensures absolute data sovereignty and automated synchronization between design layers and the codebase.

Infrastructure Architecture

The environment is orchestrated via a multi-container Docker stack, utilizing cloud-based backends for durability.

• Orchestration: Managed via studio/penpot/compose.yaml (Frontend, Backend, Exporter, Valkey).
• Database Layer: PostgreSQL persistence hosted on Neon.tech for serverless transactional integrity.
• Object Storage: Binary assets are persisted in S3-compatible buckets (Backblaze B2 or Filebase), ensuring a minimal Git footprint.

Aide: AI-Native Integration

Aide functions as a Model Context Protocol (MCP) bridge, enabling AI agents to interact directly with the Penpot Plugin API for advanced queries and layout transformations.

Aide Bridge Logic

• Protocol: Bidirectional WebSocket communication between the @penpot/mcp server and the Penpot environment.
• Security: Aide operates within the penpot-net isolated network, providing a controlled gateway for design manipulation.
• Connectivity: Uses Port 4402 for real-time design audits and synchronization.

Operational Scripts

Command	Technical Responsibility
pnpm penpot:up	Initializes core design services at http://localhost:9005.
pnpm penpot:update	Pulls latest service images and performs a rolling restart.
pnpm aide:up	Activates the Aide bridge (Penpot MCP) for AI design manipulation.
pnpm aide:down	Deactivates the automation bridge.

Mandatory AI Manipulation Rules

• Component Reuse: Always check the existing component library (Penpot) or the UI library (instance/apps/web/src/components) before creating new elements. Aide must prioritize existing design system tokens and components.
• Token-First Logic: Design-to-code exports must strictly utilize CSS Custom Properties derived from src/tokens/ for colors, fonts, and spacing.
• SVG Optimization: Ensure exported SVG code is optimized, follows the project's icon standards, and is integrated via the @elo-organico/studio/icons registry.
• Layer Hierarchy: Maintenance of semantic grouping is mandatory. Elements must be organized into clear pages and frames (e.g., Layout/Grid, Components/Buttons).

Studio & Creative Assets

Centralized Creative Repository

The Studio workspace acts as the master vault for all creative assets of the Elo Orgânico brand. It centralizes master files from professional design and production suites, ensuring version-controlled visual evolution and eliminating fragmented asset management.

Design Tool Integration

The repository supports multi-tool workflows by maintaining raw source files that serve as the canonical origin for all production-ready assets.

• Vector Graphics: Adobe Illustrator (.ai) master files for logotypes, typography exploration, and iconography.
• Digital Imaging: Adobe Photoshop (.psd) sources for high-fidelity raster assets and marketing material.
• 3D Engineering: Blender (.blend) master files for platform components and spatial visualizations (e.g., Avokado.blend).
• Post-Production: Adobe Premiere (.prproj) projects for community tutorials and marketing content.

Source Asset Management

All high-fidelity master files are strictly maintained within the assets/sources/** directory structure. This ensures that the entire history of the brand's visual identity is preserved and accessible within the monorepo context.

Production Pipeline

Master files transition to the application layers through an optimized pipeline:

• Icons: Sources are processed into optimized SVGs in src/icons/.
• 3D Models: Blender master files are exported to GLB format for runtime rendering.
• Tokens: Visual constants are exported as strongly-typed TypeScript definitions from src/tokens/.

Namespaced Workspace Exports

Internal packages access creative assets via strictly defined exports to ensure architectural isolation:

• @elo-organico/studio/icons: Optimized SVG library and curated Icon component registry (forwardRef wrapper).
• @elo-organico/studio/logos: Canonical brand logotypes.
• @elo-organico/studio/tokens: Strongly-typed design constants for JS/TS logic.
• @elo-organico/studio/theme.css: Zero-runtime Tailwind CSS v4 theme and global resets.