The Orchard brand system.
Orchard is where everyday investing is planted, tended, and left to grow. The system below keeps that feeling consistent across the app, the web, and everything we send. Calm, plain-spoken, and built on regulated products only.
Logo & app icon
The mark is a sunrise breaking over a level field: rays for growth, the bar for a harvest already gathered. Lead with the full lockup wherever there's room. Use the standalone icon only where the wordmark can't breathe, like the app tile or a favicon.
Primary lockup on light. First choice everywhere.
On Orchard Deep. The mark holds; keep the wordmark white in production reversed art.
Clear space equals the height of the icon's horizon bar on all sides. Nothing crosses the dashed frame.
Sizing & the icon
Minimum lockup width 120px on screen. Minimum icon 24px. The squircle tile keeps a corner radius near 28% of its width so it reads as Orchard, not a generic rounded square.
The full palette
Four brand colors set the tone; the ramps below make them usable. Orchard Green is the one living accent, so it earns its place and never fills large areas. Slate is the working neutral, tuned cool so it sits under the navy without clashing. Orange is a spark for attention, not a status color.
Status colors
Reserved for meaning. Success confirms, warning cautions, danger stops, info explains. Keep brand Orange out of this set so a spark never reads as an error.
Ink on Green 500 = 8.0:1 AAA · white on Green fails at 2.2:1
Ink on Orange 500 = 7.3:1 AAA · white needs Orange 700+
Slate 500 is the lightest neutral for text on white (5.3:1). 400 and lighter are borders, placeholders, disabled only.
White on Orchard Deep = 17.2:1 AAA. Navy bands and dark mode are safe by default.
Fraunces & Instrument Sans
Fraunces carries the warmth already in the wordmark and does the display work: hero lines, product names, the numbers we want people to feel. Instrument Sans runs everything functional, and its tabular figures keep money and units aligned. Both are open-license and ship on web and mobile.
Type scale (px): 12 · 13 · 14 · 16 · 18 · 22 · 26 · 34 · 44 · 52. Mobile caps display at 34–40. Always use tabular figures for currency, units, and rates.
Space, radius, elevation
One 4px rhythm keeps web and mobile in step. Radii lean generous to echo the squircle; shadows stay soft and low, so the interface feels calm rather than floating.
Spacing · 4px base
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. Named 1–10 in tokens.
Radius
Cards use lg, sheets use xl, buttons and chips use pill.
Core UI
Built from the tokens, nothing bespoke. Every label says what the tap does and keeps that word through the flow.
Buttons
Primary is Green with a navy label. One primary action per screen.
Pills & field
Holdings row
Commercial Paper — Series 4
Calm, plain, quietly confident.
We describe, we never advise. Orchard speaks like a steady hand: it tells you what you hold and what happens next, in words you'd use yourself. The orchard metaphor is atmosphere, not a promise. We reach for it at the top of the funnel and set it aside for the moments that need plain numbers.
Compliance guardrail
Orchard distributes; it does not advise. Growth and harvest language is fine as brand atmosphere, but any returns, performance, or yield wording shown next to a live product listing goes through compliance review first. Never frame copy, in-app AI output, or notifications as a recommendation, and never link market movement to what a specific user holds.
Design tokens
Everything on this page is generated from one source of truth so web and mobile can't drift. Nathaniel pulls the file that fits the stack; primitives feed the ramps, semantic aliases feed the components.
orchard-tokens.json — source of truth, framework-neutralorchard-tokens.css — CSS variables for Laravel + Vue, light and darkorchard-tokens.ts — typed object for React Native / Expotailwind.orchard.js — Tailwind theme extension for the webNaming: primitives are color.green.500, space.4, radius.lg. Semantic aliases are text.primary, bg.canvas, action.primary.bg, status.success.fg. Components reference aliases only, so a palette change never touches component code.