Grain
An offer researcher. It investigates your market and produces a falsifiable thesis on what to build, for whom, and why — with three findings that would prove it wrong.
Mark & Wordmark
The Grain mark is a geometric G: the arc (white) represents the investigation — circling the market to find the truth. The amber crossbar represents the verdict — where the investigation lands. Two shapes, one meaning.
The G letterform is built from two elements that are never the same color. The arc is always white (or dark) — it's the neutral investigation. The crossbar is always amber — it's the signal, the moment of finding.
Maintain a minimum clear space equal to 1× the height of the mark on all sides. Never crowd the logo against other elements or the edge of a container.
Three conceptual anchors
The palette is built around the product concept: ink-and-paper for the investigation, signal indigo for intelligence, amber for the gap found.
Headlines, logo background, primary CTA, the authority color
Primary accent — intelligence, investigation, active states, links, the mechanism
The gap found — positioning gap highlight, logo crossbar, verdict callouts
Page background — warm off-white, like paper. Never pure #fff for the page itself
Cards and modal surfaces only — on top of the warm page background
Body text, secondary labels, captions, meta information
Three-font system
Hero titles, section headings, the wordmark. Authority and depth. Never use for body text.
All body text, UI labels, buttons, navigation, form fields, descriptions.
Source tier badges (T1–T4), terminal prompts, all-caps section labels, data values.
Brand-aligned UI patterns
How Grain speaks
The full token system
All design tokens live in src/lib/design-tokens.ts. The logo SVG is in src/components/Logo.tsx.