Brand

The principles that drive every visual decision in Tomoda. They're terse on purpose — fewer principles, applied consistently, beat a longer list applied erratically.

What Tomoda feels like

A location-based social app that doesn't read like a feed-rage product. The UI gets out of the way of the moments it's surfacing. Warmth, not slickness. Earned attention, not infinite scroll.

The interface is a quiet frame around vivid content — the cards, the maps, the people. We pick warmth (the ember-gold accent system) over the standard SaaS palette of cold blues and oversaturated brand colors.

Five principles

1. The "no-line" rule

We do not section content with 1px solid borders. Boundaries come from one of:

• Background shifts. Place a surfaceContainerLow section against a surface background; the eye sees the boundary without a stroke.
• Tonal transitions. Subtle steps in luminance imply a change in context.
• Whitespace. When neither works, generous whitespace separates without drawing a line.

If a border is absolutely required for accessibility (focus rings, form errors), use the border token at 15% opacity — never a solid #000 or #fff.

2. Tonal layering, not floating cards

Depth is achieved by stepping the surface ladder, not by shadow-stacking. A surfaceContainerLowest card on a surfaceContainerLow section creates a "carved" effect that reads as real depth without the heavy drop-shadows of a Material 3 stock implementation.

Reserve actual shadows for elements that genuinely float — modals, sheets, dropdowns. When you do use shadow, keep it diffused and warm — never rgba(0,0,0,1). The shadow should feel like ambient occlusion against the dark surface, not a hard cutout.

3. The accent is a spotlight, not a floodlight

The primary token (warm gold, #D4955A in dark mode / #d6811e in light) is reserved for earned attention — a CTA the user is reaching for, an "active" state, a piece of UI that needs to win the eye. Most surfaces stay neutral. If everything is gold, nothing is gold.

For secondary accents (success, warning, error, the campfire palette) follow the same rule: introduce sparingly, never as background fills of large regions.

4. Inter, used with intent

Inter is the only typeface. Its neutrality keeps the focus on the content. We earn hierarchy through size and letter-spacing, not through novelty fonts:

• Display sizes tighten letter-spacing (-0.02em) for editorial weight.
• Body stays at default tracking.
• Labels open up letter-spacing (+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 generic SaaS dashboard.

5. Asymmetry is allowed — symmetry is not the default

Centered everything reads like a template. Off-axis layouts, generous offset margins, and one column intentionally wider than another all communicate intent. Use symmetry 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.

What this does NOT cover

• Logo usage, lockups, color variants — owned by the design team; living spec is in the Figma library (link via design lead).
• Marketing-only visuals (illustrations, ad creative) — outside the engineering bible's scope.
• Internal-team design vision — the design team's iterating-in-public doc lives at the repo root as a local-only reference and is intentionally not published here.

This page is the engineering rendering of brand decisions — what to apply when shipping product UI.