Back to Product & Design

This project is password-protected

Thiink

An AI operating system for energy — every building, residential or commercial, becomes an intelligent node that produces, stores, and trades its own power, and together they form a decentralized grid.

Role: Product, User Research, UX Design, Front-end Engineering

Product: Thiink ships two products on top of the company's energy operating system.

Home AI is the consumer product. A mobile app driven by an AI that forecasts weather, solar production, household demand, and grid tariffs across the day. It orchestrates the home's solar panels, battery, and EV charger so the home produces, stores, and trades power at the right moment.

Thiink Enterprise is the commercial product, built in two parts for portfolio managers and operations teams running a fleet of buildings at scale: a cloud dashboard for ongoing management, and an on-premise agentic workflow that brings many sites live in parallel, replacing weeks of manual setup per building and continuously optimizing energy across the portfolio.

Design System Architecture

One design system serves Home AI (consumer mobile, green) and Thiink Enterprise (portfolio desktop, blue). Components never branch. Product identity resolves in four token layers; switching products is a single data-product attribute on the root.

Layer 1 — Primitives

Role-agnostic raw values in TypeScript — color, typography, spacing, radius, shadow, opacity. Single source of truth for all products.

earth-500 water-500 heading-h1 spacing-md radius-md shadow-medium opacity-90
Layer 2 — Semantic Tokens

Purpose-based names — what it means, not what it looks like.

--button-primary-bg --status-positive --bg-page
Layer 3 — Theme Mode

Light and dark resolution. Semantic tokens map to primitives per mode.

data-theme="light" → earth-500 data-theme="dark" → grass-500
Layer 4 — Product Theme

~15–20 vars per product. Home AI is the default; Enterprise overrides at the root.

data-product="enterprise" → water-500
Product
Home AI
Mobile · Green · Consumer
Product
Enterprise
Desktop · Blue · Compact

Component Architecture

Three repos. The design system lives as a versioned npm package (@thiink-llc/design-system) shipping tokens and atoms to both products. Each product pins a version and upgrades on its own cadence.

thiink workspace
thiink/
├── design-system/            # versioned npm package
│   └── src/
│       ├── tokens/             # Foundation primitives
│       │   ├── colors.ts       # color palette
│       │   ├── typography.ts   # font scale
│       │   ├── spacing.ts      # spacing scale
│       │   ├── radius.ts       # corner radius
│       │   ├── shadows.ts      # elevation
│       │   └── opacity.ts      # opacity steps
│       └── components/atoms/   # 23 shared UI primitives
│
├── fe-home/                  # Home AI — mobile, consumer
│   └── src/
│       ├── components/         # Product components
│       └── pages/              # App screens
│
└── fe-enterprise/            # Enterprise — desktop, operator
    └── src/
        ├── components/         # Feature-organized components
        └── app/                # Next.js routes

One design system, two surfaces

The same design system ships to a desktop dashboard for Enterprise portfolio managers and a mobile app for Home AI homeowners. Tokens, atoms, and layout primitives are shared; each surface only specifies what's unique to its audience and density.

Enterprise dashboard surface
Enterprise · portfolio manager · desktop
Home AI mobile app surface
Home AI · homeowner · mobile

One component, two products

Same button code. Different tokens. Home AI gets a pill-shaped, comfortable-density button for mobile thumbs; Enterprise gets compact corners and a tighter height for desktop density.

Home AI · Mobile · Comfortable
--radius-button: 9999px height: 48px
Enterprise · Desktop · Compact
--radius-button: 8px height: 40px

Home AI

Led the company's first AI-native product design for the upcoming Home AI V2, from wireframes to prototypes to user-driven decisions.

Home page
Electricity price
EV charging status

Onboarding

The AI parses a homeowner's electricity bill to establish their energy baseline and auto-fill the fields most people can't answer themselves: grid provider, phase, and fuse size.

EV Charger

Add a new EV charger, set a charging schedule with a solar-only option, or trigger Charge Now in Guest Mode to bypass peak hours. Charging status surfaces on the home page.

Thiink Enterprise

A cloud dashboard gives portfolio managers a live view of energy consumption and optimization across the fleet, surfacing buildings that need attention. On-premises, operators onboard new sites through an agentic workflow; agents map each building's circuits, sensors, and connected devices automatically.

Portfolio overview
App marketplace
Work queue
Building onboarding

Sparky

Sparky is the dashboard's in-app assistant, built end to end in a week. The interesting part is not the chat, it is how the answers are trusted: a two-layer evaluation harness with an LLM judge that grades every answer blind, never seeing the reference answer, and scores against written floors instead of averages, so a single bad answer fails the run. A different company's model does the grading, and a calibration step plants four deliberately wrong answers to catch a judge that grades too easily. Every thumbs-down from an operator becomes a new test.

Agentic workflow

Agents drive the building onboarding pipeline: scanning circuits, classifying sensors, mapping connected devices. They pause for operator review at each ambiguous decision.