Introduction

The Growthsphere Design System is the single source of truth for creating institutional-grade financial products. It unifies our three core platforms—MaaS for Startups, MaaS for Funds, and Deal Flow—under one scalable interface grammar.

This system moves beyond static style guides to provide a living infrastructure of tokenized foundations, functional components, and prescriptive usage guidelines. It is designed to bridge the gap between Design and Engineering, ensuring that we ship complex features with velocity, consistency, and precision.

Core Principles

1. Built for Density Financial interfaces are uniquely data-heavy. Our components are engineered to handle high-density information—complex tables, nested forms, and multi-state dashboards—without sacrificing readability or cognitive load.

2. Atomic Consistency We believe in a unified experience. A "Button" or "Input" must behave identically whether an analyst is screening a startup or an LP is auditing a fund. This consistency builds muscle memory and trust.

3. Developer-First Architecture Design is only as good as its implementation. Our system is architected with semantic tokens (not raw hex codes) and strict component APIs, allowing engineers to implement pixel-perfect UIs that support instant theming (Light/Dark mode) out of the box.

Scope of the System

• Foundations: The semantic atoms of our language, including Color, Typography, Layout (Grid), Iconography, and Shape logic.

• Components: A library of 30+ interactive elements, from atomic buttons to complex organisms like Tree Tables and Polymorphic Wizards.

• Patterns: UX solutions for common workflows, such as Data Ingestion, Permission Governance, and Object Creation.