Foundations

A warm, natural system for food people actually eat.

DIETERSFOODS reads as fresh and grounded rather than clinical. Surfaces are warm ivory, text is a deep green-neutral ink, and green carries every moment of recognition and action. Yellow and brown appear sparingly, as seasoning.

Font roles

Four faces, four jobs, no overlap.

Mallo Bold: Single native cut at weight 400, plus a true oblique face.; Display and headings
Neue Jothama: Variable 100–700 with an optional positive slnt axis.; Body and interface
Geist Sans: Reference face behind Neue Jothama in the sans stack.; Sans fallback
Geist Mono: Tabular data, token names, identifiers.; Code and metadata

Core color roles

Brand colors are for recognition; primary is the accessible color components paint with.

Logo green#68A858

Commerce green#04B262

Highlight yellow#FED32C

Earth brown#C67F43

Semantic primary--primary

Surfaces

Warm ivory in light, deep forest in dark.

background

The page field

card

Raised modules

muted

Quiet grouping

Radius

Four steps derived from --radius, nothing arbitrary.

micro

Dense details

field

Form controls

surface

Cards and menus

panel

Dialogs and sections

pill

Actions and tabs