NOI
Brand Guidelines · v1.0

The look & voice
of solar income.

How we design and write for NOI — the platform that turns rental rooftops into net operating income. Editorial paper, deep ink, one solar accent.

joinnoi.comSolar income for landlords
01

Brand voice

NOI sounds like a confident operator, not a startup. We talk in the landlord's language and let the numbers carry the story.

Principles
  • Plain & confident. Short declaratives.
  • Operator-first. NOI, capex, occupancy, payouts.
  • Numbers lead. Open with a figure when you have one.
  • Fair & optimistic. Clean energy is the means; income is the point.
Voice in a line

"Turn your roof into an income stream — not an expense."

Avoid hype ("revolutionary", "seamless"), emoji in product UI, and exclamation spam. Emoji only in social captions, sparingly.

02

Logo & mark

NOI
Primary lockup
NOI
On ink
NOIADMIN CONSOLE
Product lockup

Mark: solar rounded square (radius ≈ 24%) + white lightning bolt. Wordmark: Fraunces 600, tracking −0.03em. Product lockups add a mono sublabel (LANDLORD / ADMIN CONSOLE). Keep clear space ≥ the mark's height; never recolor the mark off-brand or stretch the wordmark.

03

Color

Warm paper neutrals, deep ink, and one precious solar accent. Semantics are muted, never neon.

Core palette

Paper
#F4EFE6
Paper deep
#EBE3D4
Card
#FBF8F1
Ink
#1A1714
Solar ★
#E8541C
Solar soft
#F8C9B4
Solar tint
#FBE6D9
Rule
#D8CFBE

Text & semantic

Ink soft
#5C544A
Ink mute
#8A8175
Green · paid
#2F6F4E
Red · overdue
#B23B2A
Warn · pending
#A87617
Green tint
#D6E5DA
Red tint
#F1D6CF
Warn tint
#F1E2BD
Do — background is always paper or ink. Reserve solar for money, CTAs, active state, and one emphasis word.
Don't — cool grays or blue-white SaaS palettes, solar as a full background wash, or gradients (except chart fills, avatars, photo scrims).
04

Typography

Display · Fraunces
Aa Rg
Fraunces
A warm, high-contrast “old-style” soft-serif with optical sizing. Characterful and editorial — it gives NOI the feel of a well-set financial broadsheet. Weights 400–600; italics for the one emphasized word. Tracking −0.02/−0.03em on large sizes.
UI · Inter
Aa Rg
Inter
A neutral, highly legible grotesque sans that stays quiet next to Fraunces. Carries all working copy — body, labels, buttons, tables, forms. Weights 400–700; 13–16px body at 1.5 line-height.
Mono · JetBrains Mono
Aa 0123
JetBrains Mono
An engineered monospace with true tabular figures and a slashed zero. Used for every number, ID, date, and letter-spaced eyebrow — it makes financial data feel precise and machine-true.
Get paid by the kilowattFraunces 500 · 44px
Section headingFraunces 500 · 22px
Body copy sets in Inter at 13–16px with a 1.5 line-height and pretty wrapping.Inter 400 · 14px
$1,284,420.00Mono · tabular-nums
03 — PeopleEyebrow · 0.2em

Rule: every number uses tabular-nums. Emphasize one word per headline by setting it italic in solar.

05

Components

Buttons

PrimarySolar CTAGhostLight

Pills & status

● Paid○ Pending! OverdueContractingProspectDefault

Card & KPI

Total revenue
$188,420
↑ +14.7% vs. last month

Cards: card surface, 1px rule, radius 12, soft lift-shadow only where needed. Buttons radius 8. Pills radius 999, uppercase, tinted + bordered. Tables: paper-deep header, mono uppercase labels, hairline rows, right-aligned tabular numbers. Icons: line style, 1.6 stroke, round caps (Lucide). Nav active state = solar-tint bg + solar border + trailing solar dot.

06

Motifs & layout

Signature motifs
  • Solar arc — faint concentric rings + rays bleeding off a dark/solar section corner.
  • Numbered eyebrows — "01 — Dashboard", mono, uppercase.
  • One-word emphasis — italic solar word in an ink Fraunces headline.
  • Photo posts — full-bleed image + ink scrim, logo chip + eyebrow chip, headline bottom-left.
Layout system
Page padding40px
Spacing rhythm16 / 20 / 24
Radii8 · 10 · 12
Dividers1px rules, not shadows
KPI stripsvertical hairlines
07

Photography

Real, warm, golden-hour imagery of the hardware in place — rooftops, storage, EV charging on actual buildings. Natural light, lived-in settings, no stock-photo gloss. Always paired with an ink scrim so type stays legible.

Multifamily building with rooftop solar at golden hour
Hero · multifamily rooftop
Every sunrise is revenue.
Home battery storage stack
Storage
Resilience & backup power
EV charging at a modern home
EV charging
Amenity, solar-powered
Rooftop solar array detail
Rooftop array
The asset at work
Do — golden-hour natural light, real installs, ink scrim for overlaid type, solar logo + eyebrow chips.
Don't — cold blue-hour tones, cartoon illustrations of panels, busy composites, or type over an unscrimmed sky.
08

Quick rules

Do
  • Warm cream + ink + one solar accent
  • Fraunces headlines, tabular mono numbers
  • Solar for money, CTAs, one emphasis word
  • 1px rules, flat cards, editorial whitespace
  • Plain, confident operator copy
Don't
  • Cool grays / blue-white SaaS palettes
  • Inter or Roboto for stats & headlines
  • Solar as a background wash or on everything
  • Drop-shadow soup, gradient rounded boxes
  • Hype adjectives, emoji in product UI

Reference implementations in this project: screens/app.jsx (tokens), NOI Admin.html (product UI), NOI LinkedIn Posts.html (social templates). Import the tokens rather than redefining colors.