Brand Guide Orkid design language — colors, typography, spacing, and principles.
Orkid's visual identity conveys institutional authority with minimalist refinement. This page documents the design tokens used across orkidlabs.com, orkidlabs.xyz, the docs site, the widget, and all partner-facing materials.
The Orkid brand uses a custom typography system. These fonts are proprietary and installed locally — they are not Google Fonts.
Role Font Usage Display / Letterhead Orkid Document titles, cover pages, letterhead, hero text Body Equity B Body text, paragraphs, long-form content Section Headings Equity B Caps Section headings, small caps, labels Headers / Footers Acta Headline Page headers, footers, navigation chrome Editorial Acta / Acta Display Editorial text, pull quotes, secondary headings Monospace / Code Fira Code Code blocks, addresses, technical data, function names
--font-family-display: 'Orkid', monospace; --font-family-body: 'EquityB', serif; --font-family-caps: 'EquityB Caps', serif; --font-family-headline: 'Acta Headline', sans-serif ; --font-family-editorial: 'Acta', serif; --font-family-mono: 'Fira Code', monospace; Size Value Usage xs 0.75remLabels, badges sm 0.875remSecondary text, table cells base 1remBody text (Equity B) lg 1.125remEmphasized body xl 1.25remSection headings (Equity B Caps) 2xl 1.5remPage subheadings 3xl 1.875remPage headings 4xl 2.25remHero subtitles (Acta Display) 5xl 3remHero titles (Orkid)
Weight Value Usage Regular 400 Body text (Equity B) Medium 500 Nav, emphasized text Semibold 600 Buttons, section heads (Equity B Caps) Bold 700 Page titles (Acta Headline) Extrabold 800 Hero text (Orkid)
Token Value Usage --color-blue#0847F7Primary CTAs, links, focus rings --color-amber#F7B808Accents, callouts, code functions --color-dark#0B101CDark mode background --color-white#FFFFFFLight mode background --color-gray#666666Secondary text --color-light-gray#F7F8FACard surfaces (light)
Token Value Usage --color-cyan#38bdf8Links in dark mode, interactive elements --color-green#AFD5BFSuccess states --color-red#ef4444Error states --color-border#D0D5DCBorders (light mode)
Orkid is dark-first. The default surface is #0B101C with cards at #111827 and borders at #1E293B.
Light mode uses #FFFFFF backgrounds with #F7F8FA cards and #D0D5DC borders.
Token Value Usage xs 0.25remTight gaps sm 0.5remInline gaps md 1remDefault spacing lg 1.5remCard padding xl 2remSection gaps 2xl 3remLarge section gaps 3xl 4remPage sections 4xl 6remHero padding 5xl 8remSection padding 6xl 10remHero sections
Token Value Usage sm 0.25remBadges, small elements md 0.5remInputs, buttons lg 1remCards, panels xl 1.5remLarge containers full 9999pxPills, avatars
Dark mode code blocks use these colors:
Token Type Color Constants #38bdf8Strings #AFD5BFComments #64748BKeywords #0847F7Functions #F7B808
Dark-first — #0B101C is the default. Light mode is a fallback.Generous spacing — use xl (2rem) or more between sections.Institutional restraint — no gradients, no glows, no excessive color. Blue is the only saturated color.Typography creates hierarchy — Orkid for display, Equity B for body, Acta for editorial, Fira Code for code. Size and weight create hierarchy, not color.Subtle borders — #1E293B (dark) or #D0D5DC (light). Never bold or decorative.Amber as accent only — #F7B808 for highlights and callouts, never large surfaces.
File Contents docs/orkid/orkid_brand_preamble.texLaTeX/XeLaTeX font system for PDFs docs/orkid/orkid_brand_letterhead.texLetterhead template frontend/src/styles/variables.cssCSS design tokens (colors, spacing, radius) frontend/src/app/layout.tsxNext.js font loading orkid-widget/src/theme.tsWidget theme system
Helvetica or Helvetica Neue — never use for any Orkid materialInter or JetBrains Mono — never use these; the brand uses Equity B and Fira CodeGradients on primary surfaces
Saturated colors outside the defined palette
Fixed 9 bps fee references — pricing is competitive and tiered
Unichain as a supported chain — production is Base, Ethereum, Arbitrum, Polygon