# Focus Insite — Design System A minimal, research-driven, high-trust visual system for **Focus Insite**, a nationwide qualitative market research recruitment firm based in Philadelphia, Pennsylvania. The brand serves two distinct audiences and the system must work equally well for both: - **B2C** — US residents signing up to participate in paid focus groups, interviews, product tests, and surveys. - **B2B** — US researchers, consultants, and enterprise teams sourcing qualified participants (consumer, medical, B2B, IT, patient & caregiver studies). **Tagline (locked): "You run the research. We deliver the people."** --- ## Source material used to build this system - **Logo** — `uploads/Focus-Insite-Logo_2.png` (red "Fi" monogram + red "FOCUS" wordmark with silver-gray italic "insite", plus figure-and-signal graphic). **Superseded (kept in place, do not use): `assets/focus-insite-logo.png` and `assets/focus-insite-logo-knockout.png`**; **primary (master) files: `assets/master/focus-insite-logo.png` and `assets/master/focus-insite-logo-knockout.png`**, plus `assets/focus-insite-logo.svg`, `focus-insite-logo-white-transparent.png`, `fi-monogram.png/.svg`. Other brands: `fi-medical-logo.png`, `gpm-logo*.png`. - **Brand context** — researched from public Focus Insite materials: [focusinsite.com](https://focusinsite.com), the [About page](https://focusinsite.com/about-us/), the [Participate page](https://focusinsite.com/survey/), [Request a Proposal](https://focusinsite.com/request-a-proposal/), the [LinkedIn company page](https://www.linkedin.com/company/focusinsite), and [ESOMAR](https://directory.esomar.org/country/181-united-states-usa/r6808_Focus-Insite.php) / [Greenbook](https://www.greenbook.org/company/Focus-Insite) / [Inc. 5000](https://www.inc.com/profile/focus-insite) listings. - **MASTER merge (Oct 2026)** — this system is now the single org-default kit, merged with the *Focus Insite MASTER Design Kit*. Where they disagree **the Master wins**: font is **Inter** (self-hosted in `fonts/`), reds are `#EC1F26` / `#D31921`, logo files in `assets/master/` are primary. Reference page: `Focus Insite Master Design Kit.dc.html`; social: `Social Media Kit.dc.html`. - **Fonts** — Inter only (master, `fonts/`). Source Serif and JetBrains Mono are removed; `--font-serif-italic` and `--font-mono` now alias Inter. - **Brand reds (master)** — `#EC1F26` brand (display type 24px+, graphics, fills only; 4.38:1 on white fails AA for body text), `#D31921` action (any button/pill/link with a white label), hover `#C4141B`, pressed `#B3161C`, wash `#FDECEC`. **`#E30613` is retired everywhere and superseded by `#EC1F26` (brand) / `#D31921` (action).** Old `#C70511` → `#C4141B` hover, `#A60410` → `#B3161C` pressed, `#FDECEE` → `#FDECEC`. Ink `#040507`, body `#383B41`, muted `#71757C`, band `#F4F5F6`, border `#D7D9DC`. Text on bright red at body size is `#040507`, not white. - **No codebase or Figma file was provided.** UI kits are brand-faithful originals. --- ## Company context - **Founded 2015** by CEO Jim Jacobs (say "Since 2015", never "10 yrs operating"); HQ in Philadelphia, PA; ~25 employees; Inc. 5000 honoree (2022, 2023). - **What they do** — qualitative market research *recruitment*. They source and vet the human participants; the client runs the actual research. They also handle incentive processing, transcription, and translation. - **Specialties** — consumer, medical (doctors, nurses, patients, caregivers), B2B, IT/technical, and hard-to-reach SME panels. - **Study formats recruited for** — focus groups, in-depth interviews, online studies, telephone interviews, product testing, secret shopper, shop-alongs, in-home observations. - **Core value props** — proprietary fully-attributed panel, AI-enhanced workflows, high show rates ("9 in 10", never 98%), responsive over-communication, deadline adherence. Two product surfaces naturally emerge from this business: 1. **Marketing website / B2B proposal funnel** — "Hire us for your study" — for researchers and enterprise clients. 2. **Participant portal / panel experience** — "Get paid for your opinion" — for US residents joining the panel and managing study invites, screeners, and incentives. Both live under one brand but the voice and density differ (see Content Fundamentals below). --- ## Content Fundamentals — voice, tone, copy rules The Focus Insite voice is **direct, warm, competent, slightly folksy**. It sounds like a senior project manager who's been doing this for a decade — no jargon theater, no Silicon Valley pomp. Below are specific rules distilled from live site copy. ### Tone dials | Dial | Setting | | ----------------------- | ---------------------------------------------------------------------- | | Formality | Business-casual. Contractions are fine. "We've" over "We have." | | Warmth | High for participants ("your opinion matters"), medium for B2B. | | Confidence | Direct and declarative. Avoid hedging ("may," "could") in value props. | | Humor | Sparing, occasional. Never at expense of clarity or trust. | | Technicality | Low. Explain qualitative methods in plain English. | ### Person & pronouns - **"You"** for the reader in both audiences. "You run the research. We deliver the people." / "You could get paid for your opinion." - **"We"** for Focus Insite as a team, not the royal we — "We recruit for all types of businesses." - **"Our team," "our panel," "our recruiters"** — reinforces the human-first positioning. - Never use "I" in corporate copy. ### Casing - **Title Case** for section headers and primary CTAs ("Request a Proposal," "Join Our Panel"). - **Sentence case** for form labels, microcopy, and table headers. - **ALL CAPS** only for the logo wordmark ("FOCUS"), small eyebrow labels, and stat badges. Never for long text. - The italic "insite" in the logo is always lowercase italic — do not capitalize it. ### Signature phrases (use verbatim or as models) - "You run the research. We deliver the people." — master tagline, B2B. - "You run the research. We deliver the people." — the one tagline, B2B and org-wide. - "Get paid for your opinion." — participant-facing hook. - "Real human insight, every time." — value prop. - "Highly qualified and dependable participants." - "Accuracy, transparency, and real human insight." ### Copy patterns - **Lead with the outcome, then the mechanism.** "9 in 10 show rate on a multinational soft drink study. Here's how we got there." Not "Our proprietary process yields…" - **Short declarative sentences** for heroes and CTAs. Longer flowing sentences allowed in long-form blog / about copy. - **Numbers are specific.** "$150 incentive," "45-minute interview," "two-hour online focus group," "1 per household limit." Never vague "generous compensation." - **Acronyms are always spelled out on first use.** "Subject matter experts (SMEs)." "Information technology decision makers (ITDMs)." - **Em dashes** used liberally for parenthetical clarity — Focus Insite copy does this a lot — it's part of the voice. ### Emoji, exclamations - **Emoji**: essentially never on website or product surfaces. Occasional 🚀/🎯 on social captions only — do not import this to product UI. - **Exclamation marks**: max one per paragraph; only for genuine enthusiasm ("Yes! It is absolutely real.") — never for selling. ### Do / Don't examples | ✅ Do | ❌ Don't | | ----------------------------------------------------------------- | -------------------------------------------------------- | | "Join our panel to receive paid study opportunities." | "Unlock cutting-edge research opportunities!" | | "We recruit doctors, nurses, and caregivers for medical studies." | "We leverage our expansive ecosystem of HCPs." | | "$150 for a 2-hour online focus group." | "Competitive compensation for your participation." | | "You'll know where you stand on your project at all times." | "Best-in-class project visibility and stakeholder alignment." | --- ## Visual Foundations ### Color philosophy White is **dominant** — 70–80% of any surface. Dark gray carries running text and UI chrome. Red is the **focal accent** — used for the logo, primary CTAs, key stats, and attention moments. Silver/mist grays handle structure (borders, dividers, form fields). **Recommended ratios on any screen:** - **~70%** White / near-white (`--fi-white`, `--fi-paper`) - **~20%** Gray family (text, borders, secondary surfaces) - **~8%** Red (logo, 1 primary CTA per view, critical badges) - **~2%** Semantic (success / warning / info — only when relevant) Never stack two red elements adjacent to each other. One red moment per fold. ### Typography approach - **Inter** (master font, files in `fonts/`: 400/500/600/800/900 + 400 italic) for all UI, headings and social. Headlines are sentence case with full stops; display 900, H1–H3 800; tracking −0.02em on display, +0.08em uppercase on eyebrows. Garet (licensed) is reserved but not installed — display stays Inter until the files arrive. - **Inter only.** No serif, no mono. Emphasis words use Inter italic; amounts, IDs and timestamps use Inter with tabular numbers (`.fi-mono`). Garet (licensed) stays reserved until files are supplied. Letter spacing is tight on display/H1 (`-0.02em`) and opens up significantly (`+0.08em`, uppercase) only for the micro eyebrow labels that sit above section headers. Body stays at `0`. ### Layout & grid - **8px base spacing unit**, scaled through `--sp-1` (4px) up to `--sp-10` (128px). - **12-column desktop grid**, 24px gutters, max content width 1120–1280px. - **4-column mobile grid**, 16px gutters. - Content widths prefer **container-md (960px)** for marketing long-form, **container-lg (1120px)** for app dashboards. - **Strong left alignment** by default. Centered composition reserved for hero statements and empty states. ### Backgrounds - **White** and **paper (#F6F7F9)** dominate. Never full-bleed photos behind headlines. - **No gradients** as brand backgrounds. A single faint vertical fade (`white → paper`) is permissible behind a hero section only. - **No repeating patterns, textures, noise, or illustrations-as-backgrounds.** - Accepted: a single, understated **crosshair / target** graphic (echoing Focus Insite's own "target with arrow" metaphor from their About page) used sparingly as a watermark. ### Imagery There is now a **real photo library** (`photos/`). Use real photos; never AI-generated imagery (trust is the product). Natural, neutral warmth; no heavy filters, duotones or grain; clean backgrounds; no staged stock handshakes. | Folder | What | Use for | | --- | --- | --- | | `photos/` (root) | Leadership (`jim-*.jpg`), Titan 100 stage/reception/collage, Inc. 5000 promo, two `illustrative-*` images | Founder/leadership posts, award and press moments. `illustrative-*` are illustrative only — never present as a named person | | `photos/team/` | Headshots: aachal, asyia, betsy, christine (+2), jaymark, jenylene, karela (+2) | Team intros, bylines, "meet your PM". **Only for that named person** — never as a stand-in for participants or clients | | `photos/team-*.jpg` (root) | Earlier crops of the same team | Same rule; prefer `photos/team/` | | `photos/events/` | Booths, AI Summit NY, TMRE, QRCA Austin, networking, photobooth, recruitment banner | Presence/proof posts, event recaps, awards | | `assets/awards/` | Fortune 100, GPTW, Inc. 5000, Quartz, Soaring 76, Titan 100 | Award badges. Inc. 5000 is the company's (2022 No. 1,267; 2023 No. 1,398); Titan 100 (`assets/awards/titan100/`) is Jim Jacobs's personal honor (2025 and 2026) | | `assets/sotw/` | Study of the Week art | SOTW posts | Rules: real team photo only for the named person; participant/patient imagery on campaigns stays licensed real-people stock (e.g. Unsplash) or user-supplied; ask before using any person's photo whose name isn't known. ### Animation - **Restrained.** No bounces, no springs, no parallax. This is a research firm, not a consumer app. - Standard transition: `200ms cubic-bezier(0.2, 0.6, 0.2, 1)` for hover / state changes. - Fades and 4–8px translate-Y reveals on scroll are acceptable. No scale/zoom reveals. - Spinners are thin (2px stroke), dark gray, not brand red. ### Interaction states - **Hover** — on buttons, subtle darkening (red → red-600); on cards, a 1px border strengthen + shadow-sm → shadow-md transition; on links, underline reveal. - **Pressed / active** — one more step darker; no scale shrink (avoid playful feel). - **Focus** — 3px `rgba(227, 6, 19, 0.25)` ring + 1px solid red border. Always visible for keyboard navigation. - **Disabled** — 40% opacity + `not-allowed` cursor. No redesign, just dim. ### Borders, corners, shadows - **Corner radii (master)**: **10px** buttons and inputs (`--r-3`), **16px** cards and modals (`--r-4`/`--r-5`), **pill** badges. Social canvases use **6 / 8 / 12px** (`--r-social-sm/md/lg`). No radius 0 except tables. - **Borders**: 1px solid `--border-1 (#D6D9DE)` is the default hairline. Internal dividers drop to `#E3E5E9`. Dark hero surfaces use `--border-strong`. - **Shadows**: *minimal*. Cards at rest use `--shadow-xs` (essentially invisible, just prevents floating feeling). Hover lifts to `--shadow-sm`. Modals use `--shadow-lg`. Trust comes from borders and whitespace, not drop shadows. No inner shadows. ### Transparency & blur - **Rarely used.** A blurred-white header (backdrop-filter: blur(12px); background: rgba(255,255,255,0.85)) is acceptable on long scrolling pages. Otherwise, use solid fills. - No frosted glass cards. ### Cards — the most important component Cards are the primary content block on this brand and must feel **confident but quiet**: - 1px `--border-1` border, 16px radius, `--shadow-xs`, 24px padding default. - White fill on paper backgrounds, paper fill on white backgrounds. - Hover state: border darkens to `--fi-silver`, shadow to `--shadow-sm`. No translate-Y. - A card may have **at most one** red element inside it (a badge, CTA, or stat number). ### Fixed elements - Marketing header: sticky on scroll, becomes translucent-white with bottom 1px border. - App header: sticky, opaque, bottom border. - No floating chat bubbles or floating CTAs — too consumer-app for this brand. --- ## Iconography Focus Insite has no existing icon system in its public site (the live site uses WordPress theme icons with no consistent language). For this design system we standardize on: - **Primary icon set: [Lucide](https://lucide.dev)** — 24×24 outline, 1.75px stroke, rounded line caps. Matches the modern, minimal, research-driven aesthetic. Delivered via CDN: `https://unpkg.com/lucide@latest` or the React package. **Flagged: this is a substitution**; if you want a custom icon set, I can commission or you can specify one. - **Stroke weight**: 1.75px (Lucide default). Never use filled Lucide icons in this brand — outline only, for consistency. - **Icon colors** follow text: `--fg-1` for primary, `--fg-2` for secondary, `--fi-red` sparingly for active/destructive. - **Sizes**: 16, 20, 24, 28px. 24 is the default for UI controls. - **Emoji**: never in product UI. Allowed in social captions only. - **Unicode glyphs**: permitted for math/stats (`$`, `%`, `×`, `—`) as typographic tools, not decoration. Brand-specific icon motifs worth preserving from the logo: - **Target / crosshair** — from Focus Insite's own "precision and purpose" metaphor. - **Signal / broadcast waves** — from the logo's top-right detail (three figures + signal arcs). Both can be recreated as Lucide icons (`target`, `radio`) or as standalone SVGs if needed. --- ## Index — what's in this folder ### Root files - `README.md` — this file; brand context, voice, and foundations. - `colors_and_type.css` — all tokens (color, type, spacing, radii, shadows, motion) as CSS custom properties. - `SKILL.md` — agent / Claude Code skill manifest for using this design system. ### Master-merge files - `Focus Insite Master Design Kit.dc.html` — the Master reference page (sections 01–12; ids referenced below). - `Social Media Kit.dc.html` — social templates kit. `support.js`, `image-slot.js` — runtime for those pages. - `fonts/` — Inter woff2 files. - `photos/` — photo library (see Imagery). `assets/master/` — primary logo files. ### Folders - `assets/` — logos and visual assets; subfolders `gpm-ref`, `gpm-outro`, `panel-templates`, `panel-outro`, `client-linkedin`, `client-linkedin-outro`, `blog-covers`, `proof-sources`, `sotw`, `awards`, `master`. - `preview/` — design-system specimen cards (one HTML per concept): - Colors: `colors-brand.html`, `colors-neutrals.html`, `colors-semantic.html` - Type: `type-display.html`, `type-body.html`, `type-accent.html` - Spacing: `spacing.html`, `radii.html`, `shadows.html`, `motion.html` - Components: `buttons.html`, `cards.html`, `inputs.html`, `badges.html` - Photography/Brand/Social: `photo-library.html`, `team-headshots.html`, `event-photos.html`, `logos-all-brands.html`, `social-templates.html`, `video-outros.html` - Brand: `logo.html`, `iconography.html`, `photography.html`, `dos-donts.html`, `voice.html` - `ui_kits/marketing/` — B2B marketing site UI kit (Header, Hero, StatBar, ServicesGrid, Process, Testimonial, ProposalCTA, Footer). Open `index.html`. - `ui_kits/participant-portal/` — B2C portal UI kit (Sidebar, Dashboard, StudyCard, Screener, Applications, Incentives). Open `index.html` for click-through. --- ## Caveats & flags - The **Fi monogram**, target-with-arrow metaphor, and signal-waves graphic from the original logo are all preserved; additional brand illustrations would need to be commissioned. - `campaigns/`, both UI kits and `_ds_bundle.js` were restyled to the master Inter font, master reds and `assets/master/` logos (styling only; no copy or layout changes). Inter Tight and `#E30613` no longer appear in the system. - Inter is the only typeface. Serif italic and mono are removed (Oct 21, 2026). - Fi monogram, target and signal motifs come from the logo; no further illustration exists. --- ## Social template rules (from the Master kit — follow automatically) These bind any new design made with this system. Only change the content named; never redesign or borrow styling from other sections unless the user says so. Reference page: `Focus Insite Master Design Kit.dc.html`. 1. **Get Paid Medical** — Section 04 (id `gpm-reference`, images `assets/gpm-ref/`) is the only approved reference. For any new GPM post, graphic, carousel, story, reel cover or ad, use ONLY those examples: match typography, sizes/hierarchy, colors, spacing, photo treatment, shapes, headline and CTA style, logo placement. Do not invent a new direction. 2. **Get Paid Medical video outro** — Section 04 (id `gpm-outro`): `assets/gpm-outro/gpm-outro-9x16.mp4` (vertical), `gpm-outro-16x9.mp4` (horizontal). End every GPM video/reel/short/testimonial/recruitment/study promo/social video with it unless told not to. Structure: Hook → Main content → CTA → Official outro. Locked: never redesign, alter logo/text/colors/CTA, or generate a replacement. 3. **Panel social templates** — Section 04 (id `panel-templates`, `assets/panel-templates/`, 32 images; the Human Layer AI Patriot Day post was removed). For any Instagram/Facebook post, panel recruitment post, paid research promo, sign-up post, opinion panel promo or participant recruiting graphic, use ONLY these. Match layout, type, hierarchy, colors, headline/CTA, logo placement, spacing, icon style, photo treatment. Change only headline, study details, audience, incentive, location, method, CTA, date/time. GPM posts still use rule 1. 4. **Panel video outro** — Section 04 (id `panel-outro`): `assets/panel-outro/panel-outro-9x16.mp4`, 9:16 only. End every panel video/reel/short/study promo/recruitment/testimonial/paid-social video with it unless told not to. Structure: Hook → Main content → Study details/CTA → Official panel outro. Locked. No horizontal or square exists — ask before building those. GPM videos use the GPM outro. 5. **Proof Point series** — Section 7 (id `proof-point-series`, templates 7c and 7n). LinkedIn Proof Points: Hook → Proof → Short context → Why it matters → CTA. Approved sources: `assets/proof-sources/testimonials.pdf` and `case-studies.pdf`. One dominant stat/result/quote, minimal copy, Focus Insite branding. Default for any Proof Point. Never invent statistics, quotes or case results — use only what the user provides or the kit already approves. 6. **Focus Insite client LinkedIn template** — "Client LinkedIn — Approved Template", Section 2 (id `client-linkedin`, `assets/client-linkedin/`, 33 images). Primary reference for any client-facing LinkedIn graphic: layout, type, spacing, colors, headline/image treatment, CTA and logo placement. Change only post content. Not for Get Paid, Get Paid Medical, HumanLayer AI, founder/personal posts or other brands unless asked. 7. **Blog cover template** — "Blog Cover — Approved Template", Section 2 (id `blog-cover`, `assets/blog-covers/`, 16:9, 15 images). Primary reference for any Focus Insite blog cover. Change only title, subtitle, image and topic visual. Ask which look (A–D) if unclear; default A or B. Not for Get Paid, GPM, HumanLayer AI or founder/personal content. 8. **Client LinkedIn video outro** — Section 2 (id `client-linkedin-outro`): `assets/client-linkedin-outro/fi-outro-9x16.mp4` and `fi-outro-16x9.mp4`. End every client-facing LinkedIn video with it unless told not to. Structure: Hook → Main content → Client message/CTA → Official outro. Locked. Ask before square. Not for Get Paid, GPM, HumanLayer AI, panel or founder video unless asked. Also: Human Layer AI keeps its own palette and never shares a piece with Focus Insite. Social canvases are 1080×1350 or 1080×1920 and may use 6/8/12px radii; same colors, type and one-red rule. --- ## Master decisions (Oct 21, 2026) - **Single source of truth** for Focus Insite. Where this kit and the Master Design Kit project disagree, the Master wins. - **Inter only.** Tagline: "You run the research. We deliver the people." - **Show rate is "9 in 10", never 98%.** **Founded 2015** ("Since 2015"). **HQ Philadelphia, PA** (West Chester is retired). - **Proof points (pending Jim's confirmation):** 300,000+ participants, 2,400+ projects, $5M+ paid to participants. Sources disagree on incentives paid ($5M+ vs $3.5M+); do not publish new uses of these numbers until Jim confirms. - **Radii:** 10 buttons/inputs, 16 cards, pill badges, 6/8/12 on social canvases. - **Removed:** Human Layer AI Patriot Day post from `assets/panel-templates/` (was panel-19; remaining files keep their numbers). The Focus Insite Patriot Day post (panel-17) stays. - **Fixed:** `assets/client-linkedin/cl-12.png` (was cl-12.jpg) had Canva placeholder text (website, phone, hotel copy); replaced with Focus Insite copy. The original JPG was removed. ### Asset flags - **Great Place To Work badge** (`assets/awards/gptw.png`) is **expired**: it reads Jun 2022 to Jun 2023. Do not use as current. Say "Certified 2022–2023" only if used at all, until renewal is confirmed. - **Titan 100** official high-res files are in `assets/awards/titan100/`: `titan100-horizontal-black.png` (light backgrounds), `titan100-horizontal-white.png` (dark backgrounds, red crest), `titan100-shield-black.png` (shield mark), `titan100-2025-philadelphia-billboard.png` (2025 Philadelphia billboard collage, founder-post photo). Titan 100 is **Jim Jacobs's personal honor (two-time Philadelphia Titan 100 honoree, 2025 and 2026), never a company award**, and keeps its own red. ## Templates (fill-in) Eleven editable templates in `templates//`. Each has red slot tags for headline, stat, body, photo and CTA (toggle "Show slot labels" in Tweaks before export). They follow the rules above; panel, GPM and client-LinkedIn reference rules still apply. | Template | Size | File | | --- | --- | --- | | Proof Point stat post | 1080×1350 | `templates/proof-point-stat/ProofPointStat.dc.html` | | Study of the Week | 1080×1350 | `templates/study-of-the-week/StudyOfTheWeek.dc.html` | | Testimonial | 1080×1350 | `templates/testimonial/Testimonial.dc.html` | | Meet the Team | 1080×1350 | `templates/meet-the-team/MeetTheTeam.dc.html` | | Event recap | 1080×1350 | `templates/event-recap/EventRecap.dc.html` | | Carousel (cover, stat, CTA) | 1080×1350 ×3 | `templates/carousel/Carousel.dc.html` | | LinkedIn company post | 1200×627 | `templates/linkedin-company-post/LinkedInCompanyPost.dc.html` | | Story / Reel | 1080×1920 | `templates/story-reel/StoryReel.dc.html` | | Blog cover | 1920×1080 | `templates/blog-cover/BlogCover.dc.html` | | Founder: 2x Titan 100 honoree | 1080×1350 | `templates/founder-titan100/FounderTitan100.dc.html` | | One-page capabilities sheet | US Letter | `templates/capabilities-sheet/CapabilitiesSheet.dc.html` |