Everything Orchard, in one place.

The brand guide, the interactive accessibility toolkit, and every logo and token file underneath them — pulled from the same source of truth so nothing drifts between web, mobile, and marketing.

Orchard Deep#0E1C2B
Orchard Green#5EC751
Orchard Orange#F98D45
Orchard Grey#F5F5F5
Guides

Read the system

Two views of the same rules: a static reference for skimming and sharing, and an interactive one for testing color pairs and copying values as you build.

Brand & Design Tokens

Reference

Logo usage & clear space, the full color ramp, type specimen, spacing & elevation, core components, voice, and the compliance guardrail — one long scroll.

Open the guide →

Interactive & Accessibility Guide

Interactive

Click any swatch to copy its hex, flip the whole system to dark mode, and run any foreground/background pair through a live WCAG contrast checker.

Open the guide →
Downloads

Logo, icon & tokens

Use the supplied files as-is; don't rebuild the mark or hand-type a hex value that already exists in the token set.

Logo & app icon

Primary lockup on light
Primary lockupFirst choice everywhere, on light surfaces
SVG PNG
Reversed lockup on dark
Reversed lockupFor Orchard Deep and dark surfaces
SVG PNG
App icon
App iconApp tile, favicon — icon only, no wordmark
SVG PNG

Design tokens

orchard-tokens.json — source of truth, framework-neutral
orchard-tokens.css — CSS variables for Laravel + Vue, light and dark
orchard-tokens.ts — typed object for React Native / Expo
tailwind.orchard.js — Tailwind theme extension for the web

Naming: primitives are color.green.500, space.4, radius.lg. Semantic aliases are text.primary, bg.canvas, action.primary.bg, status.success.fg.