Centric3 — Shared Components
Canonical chrome. Links design-tokens.css; helpers above are token-composed only. Page agents lift these blocks verbatim and swap content slots. Every key state is shown statically (toggleable demos are progressive enhancement). Entity is always Centric3; CTAs use only the typed ladder; founder-first ordering throughout.
TopNav — light (rest 72px)
Skip to main content#TechnologyCentric
Prototype → production. The team that shipped for Apple, Disney, and Meta now builds your product.
Hover a "Services/AI/Industries/Company" trigger in the live doc to toggle aria-expanded; full mega-menus render statically in C2. Keyboard: Enter/Space opens, arrow keys move within, Esc returns focus to trigger.
Mega-menus (founder-first)
Services — Product & Platform leads (★ flagship). Footer CTA = Take the AI Readiness AssessmentMobile nav — full-screen focus-trapped overlay (≤md)
Shown here inside a framed device. In production it is position:fixed; inset:0, body scroll locked, focus trapped, Esc returns focus to the hamburger. Get Started is pinned to the bottom safe-area.
Ribbon — governed, dismissible (navy-900)
Default = AI Readiness Assessment promo · single CTA · reserved height (no CLS)CTA ladder — 5 typed tiers + nonprofit substitute
CTA LAW: primary = coral-600 fill + white (never coral-500). One primary per band. Retired strings ("Get a Centric Consultation", "Schedule Intro Call", "Contact Us") are compile errors.
Tiers (light band) Nonprofit substitute (only on /ai/nonprofits) Sizes · states On dark band — secondary uses dark variantBreadcrumb — visible order === BreadcrumbList order
Service detailCards
C8a Service cards
Product & Platform Engineering
Prototype → production software & platform engineering. One tier above the AI build tools.
Explore →AI & Data Solutions
AI strategy, build, and productionization — GenAI, analytics, NLP, agentic.
Explore →Experience & Design
Human-centered digital + physical experiences.
Explore →Strategy & Research
Advisory: planning, validation, market intelligence.
Explore →C8b Case-study card (tri-facet) — confirmed stat · suppressed stat (DEC-2) · de-id fallback (OD-21)
Kodak Pavilion @ Disney
SignDesigns.Ai — founder build, prototype → production
Client (confidential) — AI productionization
Outcome de-identified at client request (OD-21).
C8c Article cards — category + author + date + read-time (no logo, no mini-stat) · 3rd shown as loading skeleton
Top 5 Threats for SMBs in 2026
Practical defenses founders can ship this quarter.
From demo to production: GenAI that survives contact with users
The gap between a prototype and a productionized AI system.
C8d Persona cards — Startups → Enterprise → Nonprofits (founder-first, DEC-3)
Startups & Founders
Funded seed–Series B. Ship prototype → production fast, with senior engineers.
Build your product →Enterprise & Brands
The team that shipped for Apple, Disney, and Meta. Land and expand.
See the work →Nonprofits & Mission
Mission-first AI. Free consultation for 501(c)(3) organizations.
AI for nonprofits →people reached
Source: client-reported, Facebook @Scale
team experience
“The people who pitched us were the people who built it. Beyond the code.”
— Founder, seed-stage SaaS · render only when a real quote exists
Marquee — named slugs + outcome/case link (never a bare logo wall)
Light (surface) variant#ClientCentric
The team that shipped for Apple, Disney, and Meta now builds your product.
- Apple
- Disney
- Meta (Facebook @Scale)
- Kodak
- HP
#ResultsCentric
Marquee pedigree is the trust floor beneath the work — not the headline.
- Apple
- Disney
- Meta (Facebook @Scale)
- Kodak
- HP
Newsletter inline subscribe — explicit consent (PLAN-3)
Section band wrappers — eyebrow + heading pattern
#ProcessCentric
band--light
White content surface. Body slate-600 (7.58:1 AAA), headings slate-900.
#ImpactCentric
band--surface
slate-50 alternating section. Quiet contrast for rhythm.
Overlay shells — Consent Manager & Search
C12a Consent Manager — Necessary always-on; Analytics/Marketing off; Reject = equal weight as Accept (OD-29)Node motif — parametric NodeField (REQ-21)
Coral spheres on neutral connectors. Connectors slate-200 (light) / navy-800 (dark); nodes coral-500 (light) / coral-400 (dark). Draws in via stroke-dashoffset; static final frame under reduced-motion. One focal element per section; decorative instances aria-hidden.
- 1 · Goals
- 2 · Data
- 3 · Team
- 4 · Tooling
- 5 · Result
ResultsDial (assessment-only) uses the same motif on a navy-950 panel with a mandatory numeric readout + data-table equivalent beside it (OD-11) — specced in DESIGN-SYSTEM §6.3, rendered on the assessment-result mockup.
Sticky section sub-nav (scroll-spy) — service & cluster pages
Desktop — active = Overview · CTA = Talk to an ExpertFAQ / disclosure accordion (native <details>)
How fast can you ship an MVP?
Most founder builds reach a usable prototype in weeks, then move to production on a clear path — senior engineers, not a junior hand-off.
Do the people who pitch us build it?
Yes. The people who pitch you are the people who build it. Beyond the code.
Can you productionize an AI prototype we already have?
That is the core of AI & Data Solutions — taking a demo to a reliable, observable production system.