2025

Courant

Full-stack architecture and multi-device visual design token system for an AI-powered IoT energy telemetry platform.

Systems DesignFrontend EngineeringData Visualization
About

AsmartpowermanagementinterfacetranslatingstreamingIoTtelemetryandmodelanalyticsintopredictable,zero-latencyvisualstates.

Live Site
Tools
Adobe After EffectsAdobe IllustratorAdobe PhotoshopFigma
Technologies
Filament PHPLaravelTailwind CSSAlpine.jsMySQLFlaskPythonTensorFlowPlatformIOScikit-learnMQTT
Keywords
Realtime MonitoringCost OptimizationSustainabilityIoTClean EnergyDesign Tokens
Team
John Edmerson PizarraLead Backend Developer, ML Researcher
Florence Gayle MagpocUI/UX Designer, Front End Developer, Documenter
Jian Ross Dela RosaResearcher, Documenter
Kevern AngelesCo-Founder, Systems Designer, Frontend Engineer, Documentation Lead
Click to enable audio
Courant Full Webpage Capture
Courant Logomark
Click to View Full
LogomarkSymbolic Icon
Courant Wordmark
Click to View Full
WordmarkFull Logotype
Courant App Icon
Click to View Full
App IconSimplified Mark
Color Palette
#e8a216
#131313
#EAEAEA
#D7D6D6
Typography
Brand System Anchors

August Bold

AaBbCc
Bold
Product Telemetry Interface

Helvetica

AaBbCc
RegularMediumBold
01 — Ideation & Sketches

The Genesis of the Mark

Every brand identity begins with the raw translation of thoughts to paper. This phase is about unregulated experimentation—exploring the intersection of the project's core mission and its ultimate visual form.

Courant Sketch 1
02 — Conceptualization
03 — Refinement & Vectorization
Courant Vectorization

From Rough to Refined

Transitioning conceptual sketches into a clean, geometric framework. This phase focuses on precision, balance, and scalability.

04 — The Conclusion
Courant Final Mark

"MSMEs don't have dedicated facilities engineers — they need a layout that speaks with absolute precision and surfaces errors before hardware damage occurs. Courant's design tokens were engineered around that reality. The logomark distills the system's underlying logic: high-frequency technical performance wrapped in structural, uniform boundaries. Color utility is purely algorithmic—functional yellow tokens trigger exclusively for anomaly thresholds, multi-tenant alert states, and hardware failures. The implementation successfully flattened complex LLM predictions and deep metrics into a clean, predictable utility dashboard."

View Live Site
Other Assets