# Focus Insite — brand book **Positioning line: "The right people. Verified."** Focus Insite is a qualitative market research recruitment company in West Chester, PA — a decade in business, two-time Inc. 5000. It finds hard-to-reach participants for focus groups, IDIs, bulletin boards, IHUTs, ethnographies, usability tests and AI human-in-the-loop work. Long-running tagline: *you supply the project, we supply the people.* Three promises carry most of the copy: **a dedicated project manager**, **daily updates by 3:00 PM your time**, **bids back within 30 minutes**. Spelling is always **Focus Insite** — F-O-C-U-S I-N-S-I-T-E. Never "Focus Insight". ## How to build with this kit ```html ``` Start from `starter.html` — it is a complete page already wired up. Use the token names and `fi-` classes below; never type a hex value into a page. --- ## CONTENT FUNDAMENTALS **Verdict first, detail second.** A headline states the outcome; the sentence under it explains. "Bids back in 30 minutes." then "You send the screener. We come back with a number." - **Sentence case** for headlines, with full stops. The display lockup is often two short sentences: *The right people. Verified.* - **Dashes as connectors**, spaced: "Recruiting is the hard part — that's our whole job." - **CAPS sparingly**, one word of emphasis in body copy ("REAL humans"). Eyebrow labels are the one systematic uppercase use. - **"We" and "you."** We recruit; you run the research. Never "the client". - **Banned:** leverage, best-in-class, solutions, synergy, holistic, cutting-edge, robust, seamless, circle back, "in today's fast-paced world". - **No hedging, no emoji, no exclamation stacks.** - **Numbers are concrete and kept:** 30 minutes, 3:00 PM, two-step confirmation. If a number can't be honored, it doesn't go in the copy. - **Respondent-facing copy is plainer and warmer:** what the session is, how long, what it pays, when they'll hear back. | Write | Not | | --- | --- | | Send the screener. Get a bid in 30 minutes. | Request a proposal and our team will respond promptly. | | Hard-to-reach is the normal case here. | We specialize in sourcing niche audience segments. | | Daily updates by 3:00 PM your time — every day in field. | Regular communication cadence throughout fieldwork. | | Verified humans. REAL ones, screened twice. | High-quality, pre-validated respondent pools. | --- ## VISUAL FOUNDATIONS **Restraint is the aesthetic.** Mostly black on white, with ONE decisive red move per view. If two things in a view are red, one of them is wrong. **Color roles.** `--surface-page` white is the ground; `--surface-subtle` / `--surface-sunken` only *section* the page. Text: `--ink-primary` headings, `--ink-secondary` body, `--ink-muted` labels. Nothing lighter than `--ink-muted` is ever text. **THE RED RULE — never break.** `--brand` #EC1F26 is 4.38:1 on white, below the line for normal text. The red stays; its job changes: - Bright `--brand` → large display type (24px and up, or 18.66px bold), graphics and fills ONLY. - Buttons and links with a white or body-size label → `--brand-action` #D31921 (5.34:1). Hover `--brand-action-hover` #C4141B, pressed `--brand-action-active` #B3161C. - Body-size text sitting on bright red → `--ink-primary` #040507, never white. **Typography.** Inter throughout. Display and headings Inter 800–900, tracking −0.02em, leading 1.02–1.05 — heavy, tight, two lines. Body Inter 400–500 at 1.5 leading, measure 68ch (`fi-prose`). Eyebrows Inter Medium, UPPERCASE, 0.08em, `--ink-muted` (`fi-eyebrow`). Classes: `display` 72px · `h1` 48px · `h2` 32px · `h3` 24px · `body` 18px · `small` 14px · `eyebrow` 14px. Numbers in stats are tabular (`fi-num`). **Spacing and layout.** 4px base: `--space-1` 4 · `-2` 8 · `-3` 12 · `-4` 16 · `-5` 24 · `-6` 32 · `-7` 48 · `-8` 64 · `-9` 96 · `-10` 128. Sections run 96px top and bottom (`fi-section`), 64px tight. Content max 1200px (`fi-container`). Plain grid — no diagonals, no overlapping cards, no rotation. **Backgrounds.** Flat color only. No gradients, meshes, noise or patterns. The one big move: a full-bleed red band (`fi-section--brand`) carrying display type — once per page at most. **Borders, not shadows.** 1px `--border-default` on cards and fields, 1px `--border-subtle` for quiet dividers, 3px `--rule-strong` black for structural rules (`fi-rule`), 4px red left rule on the callout. Shadows only for real overlays (`--shadow-overlay`). **Radii.** 10px buttons and inputs, 16px cards, 999px badges. **Buttons.** Primary `fi-btn fi-btn--primary` (brand-action red, white label). Secondary `fi-btn--secondary` (white, gray border, ink label). Ghost `fi-btn--ghost`. On a red band use `fi-btn--on-brand`. One primary per view. **Motion.** 120–180ms on color and border only. No bounce, parallax, count-up numbers or entrance animations. **Photography.** Documentary and warm-neutral: real people in real rooms. No stock conference-room gloss, no heavy grading, no duotone. Never put text on a photo — set it on a solid block beside it. --- ## ICONOGRAPHY No icon set ships with the brand. Emphasis comes from the em dash "—", red step numerals (`fi-step`: 01, 02, 03) and badges. When an icon is unavoidable, use **Lucide** outline at 20–24px, 2px stroke, `--ink-secondary` — a flagged substitute, not a brand decision. **No emoji, ever.** --- ## LOGO Five vector files in `logos/`. All have red, gray and black parts and are built for **white or very light grounds only** — there is no reversed (white) version yet. | File | Use | | --- | --- | | `logos/focus-insite-stacked.svg` | Primary lockup. Covers, title slides, proposal title pages. | | `logos/focus-insite-horizontal.svg` | Nav bars, footers, letterheads, email headers. | | `logos/focus-insite-mark.svg` | Full mark (Fi + people/signal glyph) alone, 64px tall and up. | | `logos/focus-insite-submark.svg` | Reduced mark for 24–63px tall: page headers, running heads, favicons. | | `logos/focus-insite-hex.svg` | Hex badge for square and avatar spots (LinkedIn, app icons). | - Clear space on every side ≥ the height of the F. - Never recolor, stretch, rotate, add shadows, or place on red, photos or dark grounds. - Never retype "FOCUS insite" in Inter to fake the logo — use the file. - HTML: `Focus Insite` --- ## COMPONENTS (classes in components.css) | Need | Class | | --- | --- | | Section band | `fi-section`, `--tight`, `--subtle`, `--sunken`, `--brand` | | Content width | `fi-container` | | Label above a heading | `fi-eyebrow` | | Buttons | `fi-btn` + `--primary` / `--secondary` / `--ghost` / `--on-brand`, sizes `--sm` `--lg` | | Pills | `fi-badge` + `--brand` / `--neutral` / `--outline` / `--solid` | | Plain card | `fi-card` | | The one red callout | `fi-callout` (once per view) | | Big number | `fi-stat__value`, `fi-stat__label` | | Numbered step | `fi-step` | | Forms | `fi-label`, `fi-field` | | Sticky top nav | `fi-nav`, `fi-nav__inner`, `fi-nav__links` | | Structural black rule | `fi-rule` | --- ## Gaps 1. No reversed (white) logo for dark grounds — ask Jenylene before putting the logo on anything dark. 2. No dark theme — Focus Insite is light-only. 3. No icon set and no approved photography library yet. 4. Sub-brands Opinion Chimp and Get Paid Medical have no kits.