Instant Strata
Components, patterns, and brand guidelines
Elements is the design system repository for Instant Strata, a strata property management platform. This site documents the brand, the layout patterns used across marketing and product, and the UI components you can install into your own projects.
Use it as a single reference when designing screens, reviewing work, or prompting AI tools to build on-brand Instant Strata UI. Components extend shadcn/ui and ai-elements, and ship as source code you copy and own.
What you will find here
One repository, three layers
Brand guidelines
Colour, typography, logo usage, voice, and spacing rules that define how Instant Strata looks and reads across marketing and product.
Patterns
Composed layouts for marketing and application UI: heroes, feature rows, testimonials, sidebars, and section rhythm you can reuse page by page.
Components
Copy-paste React components built on shadcn/ui and ai-elements. Install what you need into your project and own the source.
Brand overview
Professional, trustworthy, efficient
Instant Strata sits in a regulated, relationship-driven industry. Owners entrust managers with their homes; committees need clarity on levies, maintenance, and compliance. The brand must feel capable and calm: confident without being cold, modern without chasing trends. How we write supports that: see Tone of voice.
This design system encodes those qualities in reusable tokens and components. Marketing pages use generous whitespace and serif headlines to signal expertise. Application screens stay legible and fast. AI-assisted workflows inherit the same visual language so the product feels like one coherent place.
Both light and dark modes are supported. Light mode keeps white and off-white as the default canvas; dark mode maps the same forest and lime palette to a deep green shell for low-light reading and extended sessions. Semantic tokens carry across both themes, so components adapt without one-off overrides. Use the theme toggle in the site header to preview either version.
Colour palette
Built from the materials strata managers know
The palette is not arbitrary green. It is drawn from the surfaces and landscapes around apartment and commercial buildings: render and plaster, planted courtyards, powder-coated entry hardware, and the deep shadow under a mature tree line. Those references ground the product in the physical world strata teams work in every day, and they read as established rather than startup-bright. Forest anchors trust; off-white and white keep interfaces open and readable; lime marks the path forward without undermining professionalism.
Forest
#043F2E
Deep facade green: the colour of mature planting against heritage brick, powder-coated entry gates, and the steady presence of a well-run building.
Forest mid
#0A5C3D
Mid-tone masonry and landscaped courtyards. Used inside dark sections where structure needs depth without losing clarity.
Off-white
#EEF2E3
Limestone render and sun-warmed plaster. A quiet shift between sections, like moving from a bright foyer into a softer corridor.
Lime soft
#EBF8C2
Morning light across interior walls. Accent bands and highlight cards that draw the eye without shouting.
Lime
#C8F169
Fresh growth and wayfinding: the accent on a lift call panel or a well-placed sign. Energy and direction, never decoration for its own sake.
White
#FFFFFF
Clean architectural surfaces. Spacious lobbies and uncluttered dashboards where owners and managers can focus on the work.
Full token reference, section backgrounds, and foreground rules are documented in Colours & Accent.
Key decisions
How the system stays coherent
White first, colour with purpose
Most sections stay white or off-white. Forest and lime appear at deliberate moments: a hero opening, a testimonial, a CTA band. Colour signals transition, not wallpaper.
Serif authority, sans-serif clarity
Young Serif gives marketing headlines warmth and expertise. Inter handles UI, body copy, and dense application screens at scale. The split keeps marketing confident and product work efficient.
Rectangular, precise forms
Small border radii (4px on controls, 8px on cards) echo architectural lines: measured, professional, never playful pills. Whitespace does the heavy lifting.
Plain language, trustworthy tone
Copy is direct and free of legal jargon. The visual system supports that voice: calm layouts, readable type, and accents that guide rather than distract.
Foundation
Palette tokens, section backgrounds, and foreground rules.
Young Serif, Inter, and the type scale for marketing and UI.
Foundational scale and semantic gap tokens for app and website.
Desktop-first, mobile-aware breakpoints, layout variants, and content priority.
The IS mark, lockups, and surface colour rules.
Lucide stroke icons at consistent sizes and weights.
Installation
Add components to your project
# Requires shadcn/ui to be initialised in your project
npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/button/registry.json
Each component installs independently. Replace button with the component name you need.
Components
Shared badge primitive with semantic variants and domain badge catalogue.
Inline alert banners with default, info, warning, and danger colour themes.
Extends the shadcn/ui button with a loading state and spinner.
Full-height Cowork chat layout composing Conversation, Message, and Prompt Input. Includes a live preview.
AI chat input with model selector, attachments, drag-and-drop, screenshot capture, and voice input.
Auto-scrolling message container with scroll-to-bottom button and markdown export.
Streaming markdown messages with code highlighting, math, mermaid, and custom entity tags.
File and folder element with list, thing, and wide layouts for document libraries.
Strata scheme identity: cards, context bar, badges, and portfolio layouts.
Strata lot identity: badges, roll lists, levy status, and proxy eligibility.
Registered proprietor identity: roll rows, profile cards, portal and lot holdings.
Manager task queue and work items with workflow states, R-A-S gates, and due dates.
Browse the sidebar for website blocks, application layout, and additional base components.
About this repository
The GitHub repository holds brand guidelines, documented patterns, and a shadcn registry of components. Components are copied into your project, not imported from a package, so you own the code and avoid version lock-in. This docs site is where everything is developed, previewed, and kept in sync with the registry.