The property & planning design system
Comprehensive guidelines detailing the visual language, typography, and interactive behaviors of the GRIDD platform. The @gridd/ui library provides a foundation of reusable Nuxt components, engineered for consistency across both light and dark themes.
The ladder
- 1TokenDesign tokens are the foundational values of the system, representing colors, typography, spacing, and motion. They ensure visual consistency across all applications without hard-coding values.Foundations
- 2ComponentComponents are interactive building blocks for creating user interfaces. Each component includes an API, live examples, and properties tables for both light and dark themes.Components
- 3BlockBlocks are composed page sections such as heroes, forms, and floating panels. They combine multiple components into larger, reusable layout patterns.Blocks
- 4PagePages represent full architectural assemblies. They demonstrate how blocks and components come together to form complete user experiences and holistic design patterns.Example pages
Where to go
Foundations
Explore the core visual values of the design system, including color palettes, typography, spacing, radius, and motion rules.
Components
Browse the complete library of interactive components, featuring live previews, usage guidelines, and detailed property APIs.
Composables
Behaviour without a shape — the keyboard contracts, the queues and the placement logic a component is one skin over.
AI
See how the system presents machine-generated work — what it must disclose, and how a reader tells a proposal from a fact.
Mapping
Review the cartography guidelines, including camera interactions, zoom thresholds, paint properties, and building massing.
Blocks
Discover composed page sections and layout patterns designed to structure and organize complex information architectures.
Example pages
Whole pages assembled from the parts — a landing page, an article, a content page — shown end to end.
Principles
Color is decoupled from content
Status colors serve as generic indicators. Specific semantic meaning and property requirements are communicated explicitly through iconography and descriptive text.
Legible in grayscale
Information architectures and approval stacks must remain fully comprehensible without relying on color, ensuring universal accessibility.
Plain English leads
Primary headings utilize clear, conversational language. Statutory and technical terms are provided as supplementary metadata rather than leading content.
Machine facts are monospaced
Monospaced typography is reserved for system-generated data and assertions, while sans-serif typography is utilized for human-authored content.
Meaningful motion
Animation is used exclusively to establish spatial relationships and anchor elements. Decorative or gratuitous motion is strictly avoided.
Preserve the map context
Modal dialogs are minimized to maintain user context. Explanatory information is displayed contextually via anchored popovers.