Display
Pantheon Serif Italic
Get cited by AI
В ответах AI
Canonical web file is Pantheon Serif v0.8 with bundled Latin + Cyrillic.
Brand book · system workbench
One place to design the entire humanswith.ai system before we roll it across the site
This is no longer just the logo board. It is the central workbench for the migration design system: logo states, typography, image generation patterns, reusable components, page-type archetypes, spacing rules, and the commercial references we are borrowing from without copy-pasting their products.
Foundations
Typography, spacing, and control language
The stack is now explicit: one display face with bundled Cyrillic support, one UI sans, one utility mono, and one spacing ladder. The goal is to remove improvisation before we touch every template.
UI sans
Inter
One system. One path. One next step.
Один маршрут. Один ритм. Один следующий шаг.
Use weights 300–700. Calm first, emphatic second.
Utility mono
JetBrains Mono
audit · citations · rollout · source link
аудит · цитаты · rollout · source link
Keep it on the utility layer. Never promote it to primary headlines.
Spacing scale
Use one shared ladder across the whole site: 8, 12, 16, 24, 32, 48, 72, 96. No random 18, 22, or 37px jumps in shells and section stacks.
812162432487296
Radii and controls
Buttons, pills, inputs, and dropdowns stay flatter and more product-like: 8–12px radius for controls, 16px max for larger panels.
8px10px12px16px panels
Line-up rule
Poster first, utility second, proof third. The first screen should read headline → promise → one callout → CTA before any long proof or FAQ density enters.
PosterUtilityProof
Primary signal
Aqua
#1B8AA0
Citations, source links, selected utility states.
Action
Vercel blue adapted
#0969FF
Primary selected pricing tier, active product state, important CTA support.
Positive proof
Green
#1F9D6A
Verified reviews, included features, successful checks.
Attention
Coral
#FF5A3D
Warnings, open tasks, migration blockers, not decorative noise.
Logo system
The four production logo states only, all using the chosen Runline standard
The chosen suffix family remains `Study D — Mono light`, and the active wordmark standard is `Study C — Runline`. Backup studies remain in project history, but the primary board now shows only the version already placed in the navbar.
Primary wordmark
Humanswith.AI
Humanswith
The long lockup without a descriptor. Use this when the promise already exists nearby and the logo needs to stay quiet.
Primary wordmark + descriptor
Humanswith.AI | Get cited by AI
Humanswith Get cited by AI
The active navigation version and the main identity on web surfaces. This is the production anchor for chrome.
Compact platform mark
.AI
The flattened compact mark for collapsed nav, app shells, compact placements, or places where the full wordmark becomes too wide.
Square platform mark
.AI
The square utility icon for platforms that need a clean square avatar or image slot instead of a horizontal asset.
Image system
The missing visual engine for covers, infographics, scorecards, and runtime surfaces
The site does not need random stock photos. It needs a reusable image language. These six modes define what we generate, where we use it, and how each visual stays inside the Pantheon/HWAI system.
Hero editorial frame
Citation mesh panel
Use on: Homepage hero · Solution hero · Research callout
Light editorial AI citation panel, off-white surface, aqua signal threads, ink callouts, one cropped chat window, no purple neon, no glossy 3D blobs, no stock people.
One dominant signal planeOne proof cardOne quiet mesh texture
Article cover
Topic poster
Use on: Blog cover · Research snippet · Social crop
Minimal AI search article cover, off-white paper, ink headline fragment, aqua utility blocks, one abstract diagram or chat trace, no photo background.
Big topic phraseOne data artifactOne directional motif
Case metric poster
Outcome-first case visual
Use on: Case card · Review deck · LinkedIn proof post
Case-study metric poster, calm light background, mono labels, one oversized number, one compact logo plate, one supporting sentence, no decorative gradients.
One company plateOne giant metricOne tiny method line
Infographic system
Framework ladder
Use on: Explainers · How-it-works · AEO vs SEO comparisons
Minimal consulting infographic, vertical step ladder, clean aqua accents, mono labels, short captions, clear hierarchy, no clutter, no icon soup.
Three to five stepsShort captionsOne path through the page
Scorecard + table
Data surface
Use on: Audit tables · Pricing matrices · Benchmark summaries
Clean light data table, generous spacing, mono labels, one emphasized row, subtle dividers, no zebra-striping, no dashboard-card overload.
Soft panelMono column labelsOne highlighted row
Runtime strip
Terminal marquee
Use on: Workflow band · Toolchain proof · Product runtime surfaces
Terminal-style signal strip, off-white console, aqua prompts, short command fragments, product UI feel, not hacker neon, no long code walls.
Short commands onlyInline chipsLooping but quiet motion
Event poster
Talk / webinar cover
Use on: Events hub · Event detail · LinkedIn announcement
Light event poster for an AI visibility talk, clean editorial background, speaker initials plate, venue chip, deck and recording badges, aqua and blue accents, no crowded conference stock photo.
Speaker / topicVenue chipOne artifact promise
Category system
Filtered hubs for Solutions, Cases, Reviews, Blog, About, and Events
This is the Vercel-inspired catalog pattern translated into Pantheon: left filter rail, right card grid, visible result count, and hover visuals that lift and rotate subtly.
Solutions
Service layer catalog
Use when a visitor is comparing what to buy first.
Filters
StrategyContentAuthorityTechnical
Card elements
Tier cardprice chipmethod visualservice CTA
Cases
Proof archive
Use when the page needs outcome scanning before deep reading.
Filters
AI visibilityMedicalPerformanceAutomation
Card elements
Compact logo markresult titlebottleneck tagcase CTA
Reviews
Trust source map
Use to separate 85 verified reviews from Clutch 4.9/5 and 9 verified Clutch reviews.
Filters
VerifiedAgencyLocalAwards
Card elements
Source iconreview claimverification chipexternal role
Resources
Evidence library
Use when owned articles, research notes, press mentions, and public g-shevchenko artifacts need one browsing model.
Filters
BlogResearchPressGitHubHugging Face
Card elements
Topic postersource badgeartifact linkread / open CTA
About
Company hub
Use when company pages must route visitors into proof, people, and contact.
Filters
CompanyProofTeamContact
Card elements
Operating blockproof chippeople linkcontact path
Events
Talks and sessions shelf
Use for Gregory Shevchenko talks, webinars, corporate sessions, and public appearances.
Filters
OnlineOfflineHybridOn demand
Card elements
Event postervenue chiprecording / deck badgesguest slot
Pricing system
Pricing cards and comparison tables need a brandbook pattern before sales pages multiply
The pricing surface uses one blue featured state, green included-feature markers, and calm table dividers. It should be reused on `/solutions/`, Hermes pricing, and future offer pages.
Pilot
Analytics only
$1,100
7 days
Decision gate before scaling.
- 150-200 prompts
- 4 AI engines
- Strategy deck
- 25 donor topics
Standard
Vertical program
$21,100
6-9 months
Content plus authority building.
- ContentOS by Humanswith.ai
- 30-50 placements
- Readout deck
- Share-of-AI-voice tracking
Enterprise
Program + migration
$33,400
3-9 months
Standard program plus SSG migration.
- Astro 5 + Decap CMS
- 410h migration scope
- Content + outreach
- Technical readouts
| Feature | Pilot | Standard | Enterprise |
|---|---|---|---|
| Strategy Prompt map and blocker diagnosis | Included | Included | Included |
| Content 25 donor articles + 75 rewrites | — | Included | Included |
| Authority 30-50 SEO outreach placements | — | Included | Included |
| Technical Astro 5 + Decap CMS migration | — | — | Included |
| Measurement Share-of-AI-voice readout | Included | Included | Included |
Content modules
Reusable shortcodes for service pages, blog posts, press links, and data-heavy content
Service pages should not inherit the blog article shell. Blog posts need covers and infographics. Press and Medium links need outbound card treatments. This module set is the pattern library before we roll content page by page.
Service matrix
<ServiceMatrix /> Offer facts before long copy
Use: Solution detail pages
Visual: Compact table or side panel
PriceTimelineArtifactSuccess metric
Method ladder
<MethodLadder /> Audit to readout without a text wall
Use: Service pages and case pages
Visual: Numbered rail with small icon marks
Step numberActionProof artifactOwner
Article cover
<ArticleCover /> Topic poster for every owned post
Use: Blog detail and blog cards
Visual: 16:9 poster or OG crop
Topic phraseData artifactSource / category
Framework infographic
<FrameworkGraphic /> Dense explanation becomes a visual
Use: Guides, explainers, comparison posts
Visual: Vertical ladder or horizontal flow
3-5 stepsShort captionsOne directional path
Evidence table
<EvidenceTable /> Tables only where comparison is real
Use: Pricing, audits, benchmarks, case results
Visual: Accessible comparison table
Row headerColumn headersPlain text statesCaption
Source callout
<SourceCallout /> Trace claims without breaking flow
Use: Blog, research, service proof
Visual: Claude-docs inspired inset callout
ClaimSource labelWhy it matters
Press card
<PressCard /> Media trust, not an owned article
Use: Resources hub, media page, press sections
Visual: Source badge plus compact editorial card
PublicationHeadlineDateExternal CTA
External post card
<ExternalArticleCard /> Medium, LinkedIn, GitHub, Hugging Face, and partner posts
Use: Resources hub and author pages
Visual: Outbound card with small platform mark
Platform badgeExcerptCanonical URLOpen CTA
Event snapshot
<EventSnapshot /> Talk context without a long article shell
Use: Events hub and event detail pages
Visual: Compact table or hero side panel
Date / statusFormatVenueRecording state
Event program
<EventProgram /> Agenda that works before and after the session
Use: Event detail pages
Visual: Time-coded program rail
Time markerSegment titleShort takeawaySpeaker
Event materials
<EventMaterials /> Recording, deck, sources, and photos stay attached
Use: Event detail pages and post-event recaps
Visual: Material cards with source-style icons
Artifact typeAvailabilityAccess CTAOptional note
Events system
Events become a proof shelf for talks, webinars, recordings, and corporate sessions
The event pattern stays deliberately simple. A hub filters online, offline, hybrid, and on-demand sessions; each detail page stores the venue, program, recording, deck, source links, photos, and invited guests when they exist.
Events hub
Filterable shelf for talks, webinars, workshops, and recordings
The category page should answer what happened, what is coming next, where it happens, and which materials are available.
Type filtersevent poster cardsstatus chipvenue chipartifact badges
Event detail
One session as a useful archive, not a disposable announcement
Every event page keeps the program, location, speaker context, attached materials, and post-event assets in one stable URL.
Hero snapshotlocation modelprogram railmaterials gridspeakers / guests
Venue model
Online, offline, and hybrid events share one layout logic
Zoom, YouTube, offline venues, corporate rooms, and recordings are treated as states of the same event object.
Online linkoffline addressmap / room noterecording slotphoto gallery
Component kit
The reusable element families we should stabilize before page-by-page polishing
Instead of redesigning every route from scratch, we lock a kit: chrome, hero, proof, editorial, utility, and contact surfaces. This makes rollout predictable and keeps content work from re-breaking the design layer.
Navigation + global chrome
Header, footer, locale switch, CTA row
- Runline wordmark
- Globe locale switcher
- Primary CTA
- Dubai / Tbilisi footer cards
Hero + conversion
Poster hero, utility rail, trust line
- Display headline
- One callout
- Hero visual panel
- Quiet proof strip
- Terminal marquee
Trust + authority
Case cards, review tiles, source links
- Metric plate
- Quote tile
- Source link row
- Research callout
- Benchmark footnote
Editorial + content
Article covers, quote blocks, comparison modules
- Article poster
- Explainer ladder
- Comparison table
- Checklist band
- FAQ accordion
Category + filtering
Vercel-inspired catalogs and filtered archives
- Filter sidebar
- Search shell
- Hover visual card
- Result count
- Topic chips
- Events shelf
Pricing + comparison
Tier cards and sticky comparison tables
- Pricing tier
- Featured plan state
- Included-feature row
- Comparison matrix
- Action footer
Utility + workflow
Callouts, chips, prompts, audit artifacts
- Doc callout
- Artifact chips
- Mono labels
- Runtime strip
- Prompt cards
- Event materials
Forms + contact
Form surfaces, contact rows, maps
- Flat inputs
- Contact cards
- Office list
- Policy links
- Calendly CTA
Page matrix
Every page type in the site structure, broken down into its element set
This is the rollout map. Each card defines the job of the page, its image mode, and the key elements we should compose from the shared kit instead of improvising in-page.
Homepage
/ · /ru/ · /ar/
Narrative front door that triages buyers into the right service layer.
- Announcement bar
- Poster hero
- Utility rail
- Market signals
- 4-tier stack
- Process rail
- Proof cards
- FAQ accordion
- Global CTA
Solutions hub
/solutions/
Category page for comparing the four service layers before opening a detail page.
- Catalog hero
- Filter sidebar
- Service cards
- Pricing tiers
- Comparison table
- CTA
Pricing hub
/pricing/
Commercial comparison page that lets buyers switch between programs, content, software, and technical layers.
- Pricing hero
- Product switcher
- Offer cards
- Included-feature table
- Buying path CTA
- FAQ
Solution detail
/solutions/[slug]/
Money page for one service with a strong problem → method → proof sequence.
- Service hero
- Fact matrix
- Problem block
- Method ladder
- Deliverables table
- Platform examples
- Pricing band
- FAQ
- CTA
Cases hub
/cases/
Proof archive that helps visitors scan outcomes by vertical and problem type.
- Catalog hero
- Filter sidebar
- Hover case cards
- Metric cards
- Industry grouping
- CTA rail
Case detail
/cases/[slug]/
Deep proof page built around challenge, intervention, outcome, and method credibility.
- Case hero
- Client snapshot
- Challenge
- Approach
- Execution stack
- Results table
- Quote / proof
- Next CTA
Resources hub
/blog/
Resource archive that separates owned articles, research notes, press mentions, and external repositories while keeping one browsing model.
- Catalog hero
- Type filters
- Topic filters
- Search shell
- Owned article cards
- Press cards
- Research cards
- GitHub / Hugging Face cards
Events hub
/events/
Public shelf for Gregory Shevchenko talks, webinars, corporate sessions, recordings, decks, and photos.
- Events hero
- Online / offline / hybrid filters
- Event cards
- Venue chips
- Recording / deck badges
- Invite CTA
Event detail
/events/[slug]/
Single event archive that covers venue, program, speakers, guests, recording, deck, sources, and photos.
- Event hero
- Snapshot table
- Location panel
- Program rail
- Materials grid
- Speaker / guest cards
- Gallery slot
- CTA
Article detail
/blog/[slug]/
Thought-leadership page with high scannability and embedded visual explainer assets.
- Hero cover
- Summary deck
- In-this-article rail
- Section pull-quotes
- Framework graphic
- Evidence tables
- Source callouts
- CTA / next read
Reviews hub
/reviews/
Trust page that proves consistency across platforms and buyer contexts.
- Aggregate proof
- Source filters
- Platform cards
- Featured quotes
- Industry slices
- Contact CTA
About page
/about/
Company narrative and operating model without collapsing into a timeline dump.
- Company hero
- Explore filters
- Operating cards
- Awards / proof
- Leadership bridge
- CTA
Team hub
/team/
Directory of the people layer, not a generic staff grid.
- Intro
- Leadership plate
- Role grouping
- Profile cards
- Hiring / partner CTA
Profile detail
/team/[slug]/
Single expert page combining bio, proof, specialties, and schema-ready identity.
- Hero
- Credential rail
- Specialties
- Proof links
- Publications / appearances
- CTA
Contact page
/contact/
Conversion page with real offices, direct paths, and low-friction contact choices.
- Contact hero
- Office cards
- Direct phones
- Working hours
- Form
- Map / access notes
- Policy links
Geo landing
/geo/[city]/
Local-intent pages that combine regional proof with a reusable service shell.
- City hero
- Local proof
- Service fit
- FAQ
- Contact CTA
Product page
/products/[slug]/
Product-led page for Hermes and future tools with more runtime semantics than service pages.
- Product hero
- Interface panel
- Use cases
- Pricing
- FAQ
- Book demo
Authority/support page
/research/ · /media/ · /partners/
Supportive authority surfaces that raise trust and external validation.
- Intro
- Resource cards
- Press / partner plates
- Authority CTA
Compare page
/compare/[a]-vs-[b]/
High-intent comparison page for buyers already evaluating two methods or vendors.
- Intro verdict
- Criteria table
- Use-case comparison
- FAQ
- CTA
Tool taxonomy
/tools/[category]/ · /tools/[category]/[tool]/
Future utility content cluster where the design must feel operational, not marketing-first.
- Category intro
- Tool cards
- Feature table
- Integration rail
- CTA
Commercial references
What we borrow from strong products, and what we explicitly refuse to copy
The reference stack is intentional. We are not moodboarding randomly: we are borrowing specific behaviors from products that already solve hierarchy, density, or runtime language well.
Claude Docs
Open referenceBorrow: Utility callouts, gentle panel contrast, compact meta labels, disciplined vertical rhythm.
Avoid: Do not copy the docs shell, left sidebar, or cold documentation tone.
Mirai
Open referenceBorrow: Terminal motif as product proof, light product chrome, runtime snapshots as visuals.
Avoid: Do not overuse the terminal pattern outside workflow/runtime sections.
Linear
Open referenceBorrow: Tight spacing discipline, low-noise density, opinionated section hierarchy, calm proof language.
Avoid: Do not flatten the marketing narrative into pure product minimalism everywhere.
Vercel
Open referenceBorrow: Megamenu groups, resources navigation, template filters, hover-lift catalog cards, pricing tiers, sticky comparison matrix, and restrained accent colors.
Avoid: Do not inherit black-heavy brand language or infrastructure-over-brand tone.
Luma
Open referenceBorrow: Simple event pages with clear date, place, host, registration state, and post-event attachment logic.
Avoid: Do not copy consumer social-event chrome or attendee-network emphasis.
Sessionize
Open referenceBorrow: Speaker/session metadata and agenda clarity for talks, panels, and conference-style content.
Avoid: Do not turn corporate sessions into complex conference-management software.
Codex
Open referenceBorrow: Flatter radii, command-surface feel, strong chrome restraint, multi-surface product polish.
Avoid: Do not turn the whole site into a dark app or testimonial wall.
System workflow
How we use the brandbook when designing real pages and future assets
This is the operating discipline we were missing: one image prompt scaffold, one QA loop, one page rollout order, and one shared rule set before we go back into copy refinement and template rollout.
Image prompt scaffold
Subject → one data artifact → one supporting UI crop → palette lock → negative prompt. Start from the system, not from random mood adjectives.
Design QA loop
Poster read at 1280px, scannability at 375px, proof links visible, CTA line stable, and no accidental third typeface or rogue radius family.
Page rollout rule
Finish the pattern once in the brandbook, then roll it into homepage → solutions → cases → reviews → company pages. Do not invent each page in isolation.
Category rollout rule
Every hub page needs a filter model, a card model, a hover state, and a useful empty/no-match state before we call the design system complete.
Reference extraction rule
When Greg marks Vercel, Claude Docs, Codex, or Mirai screenshots, extract the behavior first: navigation, filtering, card motion, pricing, spacing, and accent use. Never copy the surface wholesale.
Visual proof order
After implementation, check brand-lab first, then homepage chrome, then category hubs, then detail pages. Content uplift resumes only after these primitives stop fighting each other.