Brand¶

Tomoda is a warm, quiet, location-aware product that gets out of the way of the moment it's surfacing. The brand is the lens through which every other decision in the bible — events, friends, discovery, chat — is filtered.

The story¶

Most social products are loud. They optimise for the screenshotted highlight reel, the saturated brand colour, the floating card with the heavy drop shadow. We don't. The thing we want to win is the next two hours of your life — not the next two minutes of your attention. So we built a product that feels like a well-designed bar at golden hour: the room is warm, the lights are low, the chairs are good, and nothing on the wall is shouting at you. The content does the work; the interface is the room.

That posture cascades into every surface. The map doesn't pulse with notification badges. The feed (we don't have one) doesn't autoplay. The event card doesn't beg you to RSVP. We pick warmth (the ember-gold accent system) over the standard SaaS palette of cold blues and oversaturated brand colours. We pick asymmetry over centred-everything. We pick tonal layering over floating cards. And we pick plain, human imperatives over exclamation-mark marketing-speak.

The five principles below are deliberately short. Fewer principles applied consistently beat a longer list applied erratically.

The five principles¶

1. The no-line rule¶

Sections are bounded by background shifts, tonal transitions, and whitespace — not by 1px borders. If the eye can find the boundary from a luminance step, we don't draw a stroke. If a border is genuinely required (focus rings, form errors), it lives at 15 % opacity, never solid #000 or #fff.

2. Tonal layering, not floating cards¶

Depth comes from stepping the surface ladder (surfaceContainerLowest on surfaceContainerLow on surface), not from shadow-stacking. A card carved out of its background reads as more deliberate than a card floated on top with a drop shadow. We reserve real shadows for things that actually float — modals, sheets, dropdowns — and even then they're diffused and warm.

3. The accent is a spotlight, not a floodlight¶

The gold accent is for earned attention — a primary CTA, an "active" state, the one thing on the screen the user is reaching for. Most surfaces stay neutral. If everything is gold, nothing is gold. Same rule for the campfire palette (success, warning, error): introduce sparingly, never as background fills of large regions.

4. Inter, used with intent¶

Inter is the only typeface. Hierarchy is earned through size and letter-spacing, not through novelty fonts. Display sizes tighten (-0.02em) for editorial weight. Labels open up (+0.05em) and go uppercase to signal "this is metadata, not content." The contrast between an editorial display and a small uppercase label produces a hierarchy that feels closer to a high-end magazine than a SaaS dashboard.

5. Asymmetry is allowed; symmetry is not the default¶

Centred-everything reads like a template. Off-axis layouts, generous offset margins, and one column intentionally wider than another all communicate intent. We use symmetry only when content genuinely demands it (data tables, side-by-side comparisons) and asymmetry everywhere else.

Voice and tone¶

We write the way we design — direct, warm, never breathless.

Do	Don't
"5 friends are nearby"	"Hey! 5 amazing friends are right around the corner!"
"We saved your changes."	"Successfully saved! Great job!"
"Couldn't reach Stripe — try again in a moment."	"Oops! Something went wrong. Please try again later."
Plain, human imperatives	Marketing speak, exclamation-mark enthusiasm

Error messages explain what happened and what to do next. Empty states explain what the screen is for once it has content. We don't apologise when nothing went wrong, and we don't cheerlead when something routine succeeds.

What we're optimising for¶

Quiet over loud. The room is the frame; the content is the photograph.
Warmth over slick. Ember-gold accent, never cold-SaaS-blue.
Earned attention over claimed attention. The accent is rare.
Editorial restraint over feature density. A page with one strong idea beats a page with five competing ones.

What this does NOT cover¶

Logo, lockup, marketing-only visuals — owned by the design team in Figma; not part of the engineering bible.
Internal design-team iteration. A local-only spec lives at the repo root and is intentionally not published.