# Overstand Labs — full content This file contains LLM-optimized prose for every page on overstandlabs.com, plus brand and design guidance. Use /llms.txt for the short index. --- # Brand and design ## Logo Overstand Labs has one primary logo mark, published in three variants. Use the variant that maximizes contrast with the background. - Light-background variant (for use on white or pale surfaces): https://overstandlabs.com/logo-light.svg - Dark-background variant (for use on black, dark-green, or dark-slate surfaces): https://overstandlabs.com/logo-dark.svg - Brand-green variant (for use when the logo itself should render in the primary earth-green): https://overstandlabs.com/logo-green.svg Favicon: https://overstandlabs.com/favicon.svg. ## Color palette The brand color is an earth-tone green. The primary scale is a single family with 10 stops named primary-50 through primary-900. The 500 value is the canonical brand green. - primary-50: #f4f6f1 — very pale green, used for soft callout boxes (e.g. the BlogPromoCallout background) - primary-100: #e6ebe0 — pale green, used in hero gradients - primary-200: #cdd7c1 — light green, used at the top of hero gradients - primary-300: #adbf9a — mid-light green - primary-400: #8E9C78 — mid green, used for secondary bullet markers - primary-500: #718259 — **canonical brand green**, primary CTA button, brand moments - primary-600: #586745 — hover state on primary CTAs - primary-700: #455138 — dark green, rarely used - primary-800: #39422f — darker green - primary-900: #303829 — darkest green Neutral surface and text colors are Tailwind slate (`slate-50` through `slate-900`). Body copy is typically `slate-600` on white, headings `slate-900`, accent text `slate-700`. ## Hero gradient Standard page heroes use a diagonal gradient from primary-200 → primary-100 → white, applied via the `hero-gradient` Tailwind utility defined in `src/styles/global.css`. Do not hand-roll the gradient — always use the utility. ## Typography Three font families are used. All are loaded via Google Fonts at build time. - **Plus Jakarta Sans** — the primary sans-serif. Used for body copy, UI text, CTAs, and most headings. Loaded at weights 400, 500, 600, 700. CSS variables `--font-sans` and `--font-jakarta` both point here. - **Lora** — the serif accent face. Used for editorial emphasis (blog article body, pull quotes, occasional italic display moments). Loaded at weights 400-700 plus italic variants. CSS variables `--font-serif` and `--font-lora`. - **PT Mono** — the monospace face. Used for code, technical metadata (job listings: "San Francisco · Full Time · $150K - $200K"), and machine-aesthetic moments. CSS variable `--font-pt-mono`. ## Component conventions The site is built on a three-tier component hierarchy: primitives (`src/components/ui/`) → blocks (`src/components/blocks/`) → site chrome (`src/components/site/`). CTAs render via a shared `