Design Standards · 2026 · First Edition
Design that performs.
For small business owners who cannot afford to look unprofessional, Polynexa Labs is the veteran-owned design partner that makes you compete with businesses ten times your size, because precision, integrity, and performance aren't slogans here. They are operating procedure.
Compete with businesses ten times your size.
Owner-operated businesses and small professional firms, typically 1–25 employees and $250K–$5M annual revenue. The operator is close enough to the work to feel every brand decision, and serious enough about the business to treat it as one.
The Target Audience Definition sets the outer perimeter. The tier structure sets the priority stack inside it. Tier 1 is where the positioning strikes cleanest and the work is most defensible. Tier 2 is plausible fit accepted opportunistically. Tier 3 is declined with clarity. Who the studio refuses to serve matters as much as who it serves. Tiering is not snobbery; it is the operating discipline that keeps the positioning sharp and the portfolio coherent.
Businesses where a client's first visual impression either earns or forfeits the engagement. The work is already excellent; the presentation has not caught up. The owner is personally invested, knows what "right" looks like, and is willing to spend to stop leaking credibility. This is the core of the book.
Security, investigations, and protective-services firms · Law, accounting, and consulting practices · Independent hospitality (restaurants, cafés, tour operators) · Personal-brand professionals (authors, speakers, veteran-founded consultants) · Peer creative and professional B2B studios.
Owner, founder, or managing principal. Ten to twenty-plus years in trade. Signs the contract directly. No procurement layer. Values craft, verifies references, pays on terms.
"Make my business look as serious as it actually is, so I stop losing work to competitors who only look more professional than me."
Engagements the studio accepts when timing, fit, and terms are right, but does not actively pursue. Margins are workable; sales cycles are longer; the positioning still holds but the alignment is less exact. Useful for portfolio breadth and referral reach.
Veteran-and-military-adjacent brands (apparel, commemoratives, memorial projects) · Regional non-profits and mission-driven organizations · Owner-led e-commerce with craft positioning · YouTube and creator-economy businesses with established audiences · Civic and political campaigns with disciplined principals.
Owner, executive director, or campaign principal. May have a small committee or board layer. Respects the process. Budget is real but earned in smaller increments.
"Give this cause, product, or campaign the dignity it deserves, and do it without the fluff and overhead of a larger agency."
Work that the positioning cannot serve well. Declining is an act of respect: for the client, whose needs are better met elsewhere, and for the book, which stays coherent only if the studio knows what it is not.
VC-backed startups chasing disruption narratives · Enterprise B2B with procurement departments and RFP theater · High-volume commodity e-commerce competing on price · Crypto, gambling, and speculative-product categories · Any engagement requiring performative agency theater (week-long kickoffs, war-room deliverables, strategy deck maximalism) · Work that asks Polynexa Labs to imitate a trend rather than resolve a problem.
The studio is built for direct principal engagements, durable systems, and discipline-led craft. None of the categories above reward those qualities. Taking the work would dilute the positioning, stretch the process, and produce an engagement neither side would be proud of.
A position is defined by what it is positioned against. Polynexa Labs is not a generalist studio competing on a single axis; it operates in three distinct competitive fields at once. Naming them is how every downstream specialist (copy, marketing, sales) calibrates. It is also how the studio stays honest about what it is refusing.
Polynexa Labs is a partner, not a platform. The studio owns outcomes (positioning, coherence, the ability to defend the work under scrutiny), not just a file at the end of a transaction. Marketplaces move pixels; the studio moves the business.
A single point of ownership, a resolved system (not disconnected assets), and the authority to tell the client what the work needs rather than guessing what the client wants.
Templates survive the homepage. They do not survive scrutiny: the second client visit, the competitive pitch, the proposal packet opened next to a peer's. Polynexa Labs builds brands that hold up under inspection because they are built from the structure out, not dressed up at the surface.
A brand system that defends itself. Typography that is deliberately chosen. Color that is controlled. A grid that holds across every surface. A voice that remains consistent when the principal is not in the room.
The aesthetic is peer-level; the operating model is not. Polynexa Labs brings veteran operating discipline to the engagement: clear scope, kept timelines, delivered systems, no drift. Most peers match the taste. The shipping and the standards are where the studio wins.
Direct principal engagement. A stated process executed without drama. Decisions made once. A studio that treats the engagement as a mission, not a creative exercise.
Polynexa Labs is not hustle-driven, not deck-heavy, not priced to feed a bench of middle managers. It is a small studio with direct principal involvement, craft over scale, and the good sense to refuse the work it cannot serve. Fewer clients, better results, no pitch theater.
Access to the principal on every engagement. A proportionate process. Pricing that reflects the work, not the overhead. Standards that are not diluted as the engagement moves from senior pitch to junior execution. There is no junior execution.
Polynexa Labs operates from a single conviction: that design is a discipline, not a decoration. Every visual decision (the weight of a typeface, the tension between elements, the silence of negative space) is resolved through structure, not intuition. This is not minimalism for its own sake. It is the belief that when form is precisely controlled, meaning becomes unmistakable.
The studio's aesthetic draws from the great rationalizing movements of the twentieth century: the geometric rigor of De Stijl, the Bauhaus conviction that form and function are inseparable, the systematic clarity of the Swiss International Style, the authoritative restraint of American corporate modernism at its height. These are not historical references; they are working principles. Polynexa Labs designs the way a good architect builds: with discipline, with proportion, and with a ruthless commitment to what can be removed. Type, grid, and color are the primary instruments. When they are calibrated correctly, nothing else is needed.
That discipline produces a specific visual character: clean without coldness, precise without rigidity. The palette is drawn from materials (paper, ink, graphite, aged cloth), not from trend cycles. The typefaces carry distinct voices that serve distinct roles, and they do not compete. Layouts are structured on architectural logic: ruled, weighted, and resolved to stillness. The result is a body of work that reads as considered, durable, and unmistakably made. The signature of a studio that takes its craft seriously.
A studio that will never be modern, which makes it always modern. The work does not answer to fashion cycles, because its materials do not. Paper White, Obsidian, Accent Blue, and Signal Red are drawn from stock, ink, drafting pencil, and bound cloth. These are surfaces that outlast the season they are used in. The typography carries the same discipline across eighty years of practice: Inter stands on Helvetica and Akzidenz-Grotesk, Crimson Pro on Garamond, Space Mono on the terminal-era machined type that preceded the screen. The Craftsman works on generational rhythms, not seasonal ones. A studio calibrated that way cannot date, because it was never dressed for a date.
The studio's visual language carries a working name: Industrial Paper. The theme is architectural drafting paper marked in graphite: the warm off-white of the stock, the cold precision of the lines drawn across it, and the disciplined restraint of the modernist tradition that taught the hand how to draw them. Every surface Polynexa Labs produces is a specific register of that pairing. The full treatment (palette, grid texture, typographic weight) lives in §03 Color and §05 Grid & Layout. The name anchors the work; the sections carry the specifications.
Lineage. Polynexa Labs draws its design tradition from the formal discipline of De Stijl, the Bauhaus principle of purposeful form, the typographic authority of the Swiss International Style, and the enduring principles of Massimo Vignelli and Paul Rand, designers who proved that rigor and beauty are not in opposition.
Lineage. The POLY/NEXA duality is Rand-derived wordmark logic: the mark is a system, not an image. Construction rules, proportions, and clear-space are recoverable from the final artwork, which is how Rand built IBM, ABC, and UPS. Identity is the sign; the sign is the system.
The wordmark "POLYNEXA" carries an intentional duality: the first four letters (P-O-L-Y) render as architectural outlines: wireframe glyphs with dashed strokes referencing technical drafting. The final four (N-E-X-A) fill solid. The finished product alongside the blueprint.
The horizontal pencil mark below the wordmark grounds the identity in craft. The literal tool. Vertical measurement ticks reference engineering callout lines. "LABS" in reduced uppercase at the foot signals process, iteration, and the laboratory discipline behind every deliverable.
Cross-reference. The POLY-wireframe / NEXA-solid duality is the static spec of the inking concept. Its kinetic counterpart lives in §07 Motion (motion.inking, Signature Effect), where hero glyphs ink from wireframe to solid over 3.5s on page load. The mark is the motion held still; the motion is the mark drawn in time. Each validates the other.
Minimum clear space on all sides equals the cap-height of the "P" in the wordmark. No competing visual elements may enter this exclusion zone.
| Digital | Full Lockup | 120px wide minimum |
| Digital | Favicon / Mark Only | 16px square |
| Full Lockup | 1.5 inches wide | |
| Embroidery | 2.5 inches, wordmark only | |
| Coin / Embossed | Consult original artwork |
Never recolor the wordmark to any color other than navy, black, obsidian, or white
Never substitute the wordmark with a generic typeface
Never stretch, compress, or distort proportions
Never place on busy backgrounds or patterned textures
Never overlay with drop shadows, glows, or transparency effects
Never add text elements, taglines, or modifiers attached to the wordmark
High-contrast modernist palette drawn from architectural drafting paper and graphite. Paper White is the stock; Obsidian is the inked line; Primary Navy is the blueprint; Graphite is the pencil before commitment; Accent Blue marks the callout; Signal Red is the annotator's red. Nothing here is trend-sampled. Every value is a material the studio can name.
Lineage. The palette-as-materials reading is Vignelli: chosen once, kept for decades, defended by the work. The draftsman's register is American corporate modernism at its height: Rand, Paul Rand's IBM blueprints, the Unimark/Vignelli mass-transit sheets. The theme is named so every specialist can reach for it by name.
Pantone equivalents are approximate. Verify against physical swatch before print production.
Color as structure, not content
Color carries semantic load only as architecture.
Signal Red and Polynexa Green are architectural-semantic colors, not body colors. They are permitted only as 1px understrokes, 2px structural rules, or 6px structural markers (bullet dots, list punctuation, framing rules). They are never used as text, fill, background, icon body, or decorative element. Signal Red operates across the system; Polynexa Green is scope-locked to stop/go semantic pairs (We Say / We Never Say, Correct Usage / Logo Misuse). Color is the studio's instrument, deployed where meaning must be unmistakable, never where it would be ornament.
Lineage. Type on grid, systematic hierarchy, restraint: Müller-Brockmann's Swiss inheritance applied to a three-face palette Vignelli would recognize. One sans, one serif, one mono: distinct voices, each with a job, none competing. Restraint is the discipline; the discipline is the style.
One sans · One serif · One mono
Vignelli's axiom: a designer needs half a dozen typefaces, not sixty. The Polynexa trinity reduces further: three faces, each with a job no other can do. The discipline is the brief.
Voice differentiation first, x-height math second. Inter (x-height 0.726em, neutral geometric) carries display and interface. Crimson Pro (x-height 0.438em, classical old-style) carries narrative. Space Mono (x-height 0.504em, fixed-width technical) carries metadata. The three never compete because their voices do not overlap: display authority, narrative warmth, technical precision. Each occupies a single register.
X-height math sets the optical scale between faces. Crimson Pro body at 1.1rem reads at roughly the same optical height as Inter at 0.95rem: the serif sits lower, so the point size runs larger. Space Mono at 0.75rem with tracking +0.15em optically matches Inter UI at 0.875rem. These ratios govern the scale below.
Bauhaus (Bayer, Tschichold) taught that typefaces have distinct voices and must not impersonate one another. Swiss International (Müller-Brockmann, Hofmann) taught that type-on-grid requires restraint of choice. The trinity is those two disciplines, one brand.
Primary Interface · Display, Headlines, UI
Inter
A precise, geometric sans-serif designed for screen readability and maximum legibility at all sizes. The backbone of the visual identity system, used for everything from 14rem display type to 8px metadata labels.
Narrative Voice · Body Copy, Testimonials, Story
Crimson Pro
A classical academic serif with deep historical roots. Used for narrative passages, testimonials, and anywhere the brand needs to slow down and speak with depth. Its italics carry authority without arrogance.
Technical Metadata · Labels, Specs, Annotations
Space Mono
Monospaced precision. Used exclusively for metadata labels, technical callouts, spec annotations, section numbers, and UI indicators. Always uppercase. Never for running body copy. The typeface of the drafting table.
Every level specified in full: family · weight · fluid size via clamp(min, ideal, max) · explicit min/max at breakpoint extremes · leading · tracking · use · pairing. Down-scale designers do not invent missing levels. Every register is here.
| Hero · Massive | Design | Inter 900 · clamp(6rem, 16vw, 14rem) · min 96px / max 224px · lh 0.84 · tr -0.055em |
| H1 · Display | Brand Identity | Inter 900 · clamp(3.5rem, 7vw, 6.5rem) · min 56px / max 104px · lh 0.92 · tr -0.045em |
| H2 · Section | Our Services | Inter 800 · clamp(2.25rem, 4.5vw, 3.25rem) · min 36px / max 52px · lh 1.02 · tr -0.028em |
| H3 · Card | Graphic Design | Inter 800 · clamp(1.5rem, 2.5vw, 2rem) · min 24px / max 32px · lh 1.12 · tr -0.02em |
| H4 · Component | Component Title | Inter 700 · clamp(1.125rem, 1.6vw, 1.375rem) · min 18px / max 22px · lh 1.24 · tr -0.012em |
| H5 · Meta-head | Small-Section Anchor | Inter 700 uppercase · clamp(0.9375rem, 1.25vw, 1.0625rem) · min 15px / max 17px · lh 1.3 · tr -0.005em |
| Subhead · Kicker | The Lede Above a Headline | Space Mono 400 uppercase · clamp(0.75rem, 0.9vw, 0.875rem) · min 12px / max 14px · lh 1.3 · tr +0.2em · red |
| Lede · Opener | The opening paragraph carries its own register: slightly larger, slightly lighter, it sets the reader's pace. | Crimson Pro 300 · clamp(1.25rem, 1.8vw, 1.5rem) · min 20px / max 24px · lh 1.5 · tr -0.005em |
| Body · Narrative | We help small businesses compete with big ones. Craft is the method, performance is the measure. | Crimson Pro 400 · clamp(1rem, 1.15vw, 1.1rem) · min 16px / max 18px · lh 1.6 · tr 0 |
| Blockquote | A testimonial indented, lightweight italic, delineated by a red rule: quoted speech on the page. | Crimson Pro 300 italic · clamp(1.125rem, 1.35vw, 1.25rem) · min 18px / max 20px · lh 1.55 · red rule-left |
| Pull-quote | "Restraint is the discipline; the discipline is the style." | Inter 300 navy · clamp(1.75rem, 3.2vw, 2.75rem) · min 28px / max 44px · lh 1.15 · tr -0.025em |
| UI-Large | Button Text · Form Labels | Inter 600 · clamp(0.875rem, 1.05vw, 1rem) · min 14px / max 16px · lh 1.3 · tr 0 |
| UI-Small | 01 / CAPABILITIES | Space Mono 400 uppercase · clamp(0.6875rem, 0.8vw, 0.8125rem) · min 11px / max 13px · lh 1.3 · tr +0.15em |
| Caption | Fig. 01 · Brand mark clearspace · 2026 | Space Mono 400 uppercase graphite · clamp(0.625rem, 0.7vw, 0.75rem) · min 10px / max 12px · lh 1.4 · tr +0.12em |
| Footnote · Micro | † Polynexa Labs · Brand Standards · 2026 · footnote scale specimen | Space Mono 400 uppercase graphite · clamp(0.5625rem, 0.6vw, 0.6875rem) · min 9px / max 11px · lh 1.5 · tr +0.1em |
Pairing Guidance · Hero + Subhead above · H1 + Lede below · H2 + H5 for section breaks · H3 + H4 inside cards · Body + Blockquote in long-form · Pull-quote on feature pages, one per composition · UI-Large + UI-Small in interface · Caption + Footnote at page base.
Veteran-Owned
Excellence.
Work starts with the objective. The mark, the website, the campaign, each is calibrated against a business result. Craft is the method. Performance is the measure.
All three typefaces ship under the SIL Open Font License v1.1: free for commercial use, embedding, and modification with attribution. No studio-level or per-seat licenses required.
| Inter | SIL OFL 1.1 | Rasmus Andersson | Weights 100 / 300 / 400 / 600 / 700 / 800 / 900 |
| Crimson Pro | SIL OFL 1.1 | Jacques Le Bailly (after Sebastian Kosch) | Weights 300 / 400 · italic 300 / 400 |
| Space Mono | SIL OFL 1.1 | Colophon Foundry | Weights 400 / 700 · italic 400 |
Punctuation discipline
Every keystroke is a type-design decision.
Em-dash — suppressed in Polynexa prose (see §06 Punctuation Discipline); cited here as a character, not a tool. En-dash – sets ranges and spans (2020–2026, pp. 14–22, Tuesday–Friday). Hyphen - binds compounds and breaks words at line end. Smart quotes " " always, never straight primes. Apostrophes curly ', never primes. The serial comma (Oxford) is the house default: "design, strategy, and execution," never "design, strategy and execution." Ellipses are three spaced periods or the Unicode glyph …, chosen per context; straight ASCII "..." is banned.
POLY wireframe discipline, typographic form
Hollow stroke, same geometry.
Outline treatment is the typographic expression of the wireframe POLY. A solid phrase paired with a hollow phrase inside a single Hero composition: same geometry, same cadence, different density. Use sparingly: one outline phrase per hero composition maximum. Never in running body copy. Never on headlines smaller than H2. Never stroked heavier than 1.5px at Hero scale. A hairline stroke holds the shape; a heavier stroke reads as bold and breaks the discipline.
Design that performs.
Emphasis is a color event
Slant reserved for narrative prose only.
Genuine italic is permitted on Crimson Pro in three contexts: long-form narrative body copy (foreign phrases, titles of published works, classical typographic italic inside serif prose), quoted speech (testimonials, blockquotes, pull quotes), and editorial asides under display headlines. Inline <em> emphasis, wherever it occurs, renders as Navy on light surfaces. On dark surfaces, italic emphasis renders as paper white underscored by a 2px red rule. The reason: in Inter display type and sans body, faux-italic breaks the geometric register. In Crimson Pro narrative, italic carries authority without arrogance; the typeface was cut for it. Outside of those three serif contexts, emphasis is a color event, not a slant event.
Light surface: we help small businesses compete with big ones. Navy, not slant.
Dark surface: we help small businesses compete with big ones. Paper white, red rule beneath.
Narrative exception: opere citato. Crimson Pro italic preserved in long-form prose.
Inter weights loaded: 100 · 300 · 400 · 600 · 700 · 800 · 900. Weights 200 and 500 dropped: load only what specimens consume.
WOFF2 exception: The house standard is TTF-only, no WOFF2 for self-hosted web fonts. Google Fonts CDN serves WOFF2 automatically; this brand guide loads from CDN and thus receives WOFF2. This is an intentional documented exception for this file only.
Bebas Neue exception: The trinity does not include Bebas Neue. When Bebas Neue is invoked elsewhere for display work, every selector must set font-weight: 400. No bold variant exists, the browser fakes it and the rendering breaks.
Lineage. The 12-column plus 60px module is Müller-Brockmann's Grid Systems in Graphic Design translated to screen. Every layout decision is recoverable from the grid. Composition is not a feeling; it is a set of calibrated decisions a competent designer can reproduce.
12-column CSS Grid. Gap = 0. All column divisions are defined by content boundaries and module padding, never by explicit column gutters. This creates flush, architectural layouts.
Background texture, not measurement. The hairline grid is a perceptual texture whose job is to evoke drafting paper: a fine, quiet lattice behind content, atmospheric rather than structural. Spec: background-size: 10vw 10vh, approximately ten squares across the viewport on any device, Accent Blue at 12–22% opacity, graduated by hierarchy. The reasoning is Vignelli's move when porting print systems to signage and environment: on the web the viewport replaces the page, so a fixed pixel unit produces inconsistent experience across devices; 60px reads as fine texture on a 1920px monitor and as a dominant waffle on a 375px phone. A viewport-relative unit preserves the relationship, a fine lattice roughly ten squares across, rather than the literal measurement. This is the only element in the Polynexa Labs system permitted to deviate from fixed-unit discipline; columns, spacing scale, type scale, and component padding remain locked.
Dual-layer 45° / -45° diagonal cross-hatch, rendered at two named scales: a precise graph-paper scale and a sparse atmospheric scale. Accent Blue at 4–6% opacity, always subordinate to the primary orthogonal. References engineering cross-hatching. Scale selection is governed by the surface register; the full rule lives in the Two-Scale Diagonal System below.
The diagonal texture resolves at two scales, each with its own register and its own surface. The tight scale is the graph-paper register: math-derived, dense, disciplined. The wide scale is the atmospheric register: sparse, calibrated by eye, read as lattice rather than texture. Both derive from the 60px orthogonal module; both are authored. Designers choose by surface, not by taste.
grid.module
Derived value: 60 ÷ √2 = 42.43px. Calibrated to intersect every corner of the 60px orthogonal module. Reads as a tight precision diamond lattice: engineering paper, drafting-table density. The Swiss-discipline register.
Use for: Bento module interiors, component backgrounds, small-to-mid canvases, print applications where paper texture wants density, interior case-study surfaces.
background:
repeating-linear-gradient(
45deg,
rgba(36,58,115,0.05) 0 1px,
transparent 1px 42.43px),
repeating-linear-gradient(
-45deg,
rgba(36,58,115,0.05) 0 1px,
transparent 1px 42.43px);
grid.atmospheric
Empirical value: ~200.5px, approximately 60 × √11 ≈ 199: the architect's-ruler unit. Calibrated by the studio's trained eye for full-bleed surfaces. Reads as sparse diamond lattice rather than texture. The Industrial Paper register: architectural drafting at room-scale.
Use for: Full-bleed page backgrounds, hero sections, large-surface applications, cover pages, full-viewport mise-en-scène.
background:
repeating-linear-gradient(
45deg,
rgba(36,58,115,0.05) 0 1px,
transparent 1px 200.5px),
repeating-linear-gradient(
-45deg,
rgba(36,58,115,0.05) 0 1px,
transparent 1px 200.5px);
The rule is surface, not preference. Any surface that fills the viewport (homepage hero, full-bleed cover, section background that stretches edge-to-edge) takes grid.atmospheric. Any surface inside a module (bento cell, card interior, contained canvas) takes grid.module. A full-bleed surface reading at graph-paper density becomes visual noise; a contained module reading at atmospheric density loses the texture entirely. Use both; do not mix them on the same surface.
Note on mathematical anchoring. Both scales derive from the 60px module. 42.43px is the exact math: the diagonal period that intersects every module corner. 200.5px is the empirical atmospheric value, calibrated in the field and anchored mathematically at 60 × √11 ≈ 199 (the architect's-ruler unit), close enough to round to 200 for production. The math secures the first scale; the eye calibrates the second; the system holds both.
A seven-step scale, each step defended by the job it does. The scale is not a modular ratio. It is what the work taught the studio across dozens of deliverables. 8 is the base unit. The column-grid module is 60px. Every scale value is reconciled against those two anchors: component-scale values nest inside the module; section-scale values are multiples of it. Designers should never invent a spacing value outside this table. If a layout seems to need one, the layout is wrong before the scale is.
| XS | |
| SM | |
| MD | |
| LG | |
| XL | |
| 2XL | |
| 3XL |
We talk like someone who knows the answer before you finish the question, and still lets you finish.
Brand Voice Principle: Polynexa Labs
Formal-leaning · Tick 3 of 7
Leaning formal, never stiff
Strongly Authority · Tick 2 of 7
Authority from expertise, not posturing
Balanced · Tick 4 of 7
Balanced, client-appropriate depth
Strongly Serious · Tick 2 of 7
Dry wit allowed, slapstick never
We Say
We Never Say
Register Rule
We never adopt the vocabulary of agencies, consultancies, or startups, even when specific phrases are not on this list. If it sounds like a pitch deck, it is not ours.
The studio's committed sentences. Pre-approved, on-voice, and available to every specialist without reinvention. Use verbatim in finished work. Modify only when the deliverable requires it, and only within the voice architecture these sentences define.
Design that performs.
The brand line. Three words. Never expanded, never softened. Sign-off on the website, on the portfolio, on every proposal. Earned by the work.
We build brands for businesses that can't afford to look amateur.
Opens the About page. Qualifies inbound leads. States the client in one sentence without naming revenue, industry, or headcount.
Precision is the process. Performance is the outcome.
Answers "how do you work" and "what do we get" in one breath. Use on the Services page, in proposal methodology sections, in case-study openers.
Small studio, veteran discipline, twenty years of practice.
The who-we-are sentence. Credentials without a resume. Use in the footer, in bios, in speaker-intro copy, in the first line of a cold pitch.
The brand you have is the one you can defend. We build brands that defend themselves.
The strategic argument. Use when a prospect is shopping price. Use when a brand audit finds weakness. Use when the deliverable is a rebrand, not a refresh.
We don't compete on price. We compete on what the price buys.
For pricing-page copy, proposal objections, and the email that follows "can you do it cheaper." Closes the conversation without apologizing for the number.
Scope is the contract. Everything outside it is a new conversation.
For mid-project scope expansion. Firm, not hostile. Frames the request as legitimate and the path forward as a new agreement, not a fight.
If the brand can't survive a bad week, it was never the brand.
For brand-system arguments. Use in discovery when a client wants decoration over architecture. Use in internal critique when a deliverable is thin.
A studio that will never be modern, which makes it always modern.
The defining identity-register phrasing. Deploys in positioning copy, About-page surfaces, proposal headers, email sign-offs, and any surface where the studio is named. Works because of the paradox structure (two clauses, one rhetorical turn) and because it refuses the agency shelf without reaching for it: it does the work "timeless" was shorthand for, without borrowing the word. Punctuation locked at the comma, never an em-dash. Not a tagline, not an ad headline, not a decorative line. A defining phrasing. Use verbatim.
The studio writes three opener lines, each with a fixed job and a fixed placement. They are not interchangeable. Copy that ships must read against this table before the deliverable goes out. The most common voice error in finished work is using the wrong register in the wrong slot.
Brand Line
"Design that performs."
Sign-off register. Three words. Lives in footers, colophons, cover taglines, and above-copyright sign-offs. Never used as a homepage hero. It is the mark's closing gesture, not its opening argument. Phrasing 01 in §06.
Hero Headline
Look The Part.
Homepage top. The imperative argument that opens a marketing site: an instruction with a promise attached. Display scale, Inter 800+, uppercase. Earns the hero slot because it commands a behavior and names the stake in three words.
Positioning Hero Line
Compete with businesses ten times your size.
About page / Capabilities page top. The strategic-positioning claim: states the client's situation and the studio's answer in one line. Longer than the Hero Headline because the argument is more specific; shorter than a paragraph because the claim still has to land in a single breath.
Hero Headline
Look The Part.
Value Proposition
We help small businesses compete with big ones, through sharp branding, smart websites, and marketing that actually drives results.
About / Brand Story
Polynexa Labs is built on precision, attention to detail, and the discipline to help small businesses win against opponents ten times their size. Not because it's a good story. Because it's how we were trained.
CTA: Primary
Start Your Project →
CTA: Secondary
See the Work · Start a Conversation · Book a Strategy Call
Error Message (Brand Voice Applied)
That didn't go through. Try again, or contact us directly.
Email Subject: Marketing
The brand audit is free. The honesty is the deliverable.
Email Subject: Transactional
Proposal ready. Polynexa Labs × [Client Name]
LinkedIn Post: Opener
Most small businesses don't have a branding problem. They have a consistency problem. One is a redesign. The other is a system. We ship systems.
Instagram Caption
Built for a one-person team running ten channels. One file. Every format. Every future version of the brand. Swipe for the system.
Proposal: Cover Letter Opener
Thank you for the brief. We read it twice. The work you're describing is brand architecture, not a refresh, and the scope on the following pages reflects that. Everything here is quoted to ship, not to impress.
Case Study: Headline
From five inconsistent logos to one defensible system, in 30 days.
Paid Ad: Google Search (30 / 90)
Branding That Performs · Small-business brand systems built by veterans. Precision, discipline, measurable outcomes. Book a strategy call.
SEO: Meta Description (160)
Polynexa Labs builds brand systems for small businesses competing against larger opponents. Veteran-owned. Precision-built. Design that performs.
Pricing Page: Headline
We don't compete on price. We compete on what the price buys.
Empty State
Nothing here yet. Upload your first file. The system takes it from there.
Confirmation Message
Sent. We'll be in touch within one business day, usually sooner.
When something goes wrong, voice doesn't. Direct, honest, no softening, no blame, no performance of remorse. State what happened, state what's next, move.
Missed Deadline: To Client
We missed Friday. The revised delivery is Tuesday, end of day. The delay is on us. The cause was a scope-check we should have run on day one. No charge for the overage. Full status call tomorrow if you want one.
Scope Disagreement: To Client
We read this differently. What you're asking for is a new deliverable, not a revision, and we'd rather be direct about that than absorb it and miss the next milestone. Here's the scope as signed, here's the ask, here's the delta. Your call on how to proceed.
Project Pause: To Client
Understood. Pausing work as of today. Final files as they stand are attached. The clock picks up where it stopped whenever you're ready. No re-onboarding fee. No hard deadline on your side.
Client Termination: Ours To Them
After this week's exchanges, we don't think we're the right studio for this engagement. We'll complete [current deliverable] and close the project clean. The final invoice reflects only work shipped. We'll also forward a referral list for studios better matched to the scope. No hard feelings, and no charge for the transition.
The studio's public-facing surfaces are punctuated with comma, period, colon, and semicolon. Em-dashes are not used. The shift is a discipline, not a stylistic preference, and applies wherever the studio speaks to a client, a prospect, or a reader outside the team.
The Rule
Use comma for integrated pauses. Use period for clean stops and verdicts. Use colon to introduce proof, list, or conclusion. Use semicolon for balanced joints between complete clauses. Em-dashes are replaced, not inserted.
Rationale
The em-dash has become a frequent marker of AI-generated writing in current client and prospect perception. The studio's craft is indifferent to the perception in principle. In practice, the studio does not broadcast signals that pull its credibility sideways in the first read. Punctuation restraint is a small cost for zero attentional drift.
Scope
Applies to public-facing surfaces: website copy, brand guide body copy, marketing and campaign copy, proposals, case studies, client-facing deliverables, social posts, and outbound email. Internal documentation, agent definitions, team-only channels, and technical or code contexts remain free to use em-dashes where they serve craft.
Replacement Principle
Bracketing em-dashes around an appositive are replaced by commas or parentheses; parentheses only where nesting would get confusing. A pivot em-dash between two clauses is replaced by a period, because two declaratives land with the rhythm of a verdict. A clarifying em-dash before a list or conclusion is replaced by a colon. Where a swap reads awkward, restructure the sentence. Meaning stays stable. Rhythm stays on voice.
Purposeful
No animation without intention. Every transition communicates something: state change, hierarchy, direction of flow. Decoration for its own sake is never the standard here.
Restrained
Fast but not abrupt. Smooth but not slow. Motion respects the user's time. The 800ms cap governs UI-interaction motion (hover, nav, modal, state change), where most interactions resolve in 300–600ms. Atmospheric and content-swap motion may extend to 2000ms via the named motion.contemplative, motion.reveal, and motion.atmospheric-long tokens below.
Mechanical
Easing curves favor cubic-bezier deceleration: like a machine reaching its final position. Bouncy spring animations are off-brand. Ease-out is the dominant curve.
| Token | Duration | Easing | Use Case |
|---|---|---|---|
| motion.instant | 0ms | – | State toggles, checkbox states, no animation desired |
| motion.fast | 150ms | ease-out | Hover states, color transitions, opacity changes |
| motion.standard | 300ms | cubic-bezier(0.4, 0, 0.2, 1) | UI element reveals, nav transitions, modal open/close |
| motion.deliberate | 600ms | cubic-bezier(0.25, 0, 0.1, 1) | Section entry animations, scroll reveals, content transitions |
| motion.atmospheric | 800ms | ease-in-out | Hero animations, page load sequences, large transforms |
| motion.contemplative | 1200ms | ease.expressive | Passive UI fades: scroll indicator, outline-text, back-to-top visibility |
| motion.reveal | 1500ms | ease.expressive | Content swaps where the user must register a change: testimonial cross-fade, slideshow |
| motion.atmospheric-long | 2000ms | ease.expressive | Ambient reveal effects: footer CTA underline, page-scale pulses. One per page maximum. |
| motion.pulse | 3000ms | ease-in-out · infinite | Scroll indicator breathing, ambient status pulses (green dot) |
| motion.inking | 3500ms | cubic-bezier(0.5, 0, 0.2, 1) | Hero wireframe-to-solid fill: wordmark or single hero copy word. Page-load only. 0s delay. One inking per composition. See Signature Effect below for scope rules. |
| motion.parallax | real-time | ratio: 0.05 | Background grid shifts with scroll (scrollPos × 0.05px offset) |
Easing Vocabulary · Named Curves
ease.expressive = cubic-bezier(0.16, 1, 0.3, 1). EaseOutExpo / Penner-derived. A strong-arrival deceleration curve for atmospheric and content-swap motion. Not a spring; no overshoot. Paired with the three long-form tokens above (contemplative, reveal, atmospheric-long) to let motion settle into place without ever snapping back.
The inking motion initializes a hero glyph as an architectural wireframe (a 1.5px obsidian stroke on Paper White, or white stroke on dark surfaces) and transitions to solid fill over 3.5 seconds on page load. The effect performs a concept the studio has always stated in static form: a technical drawing being completed, a part being finished, a raw mark refined into the final artifact. It is the mark's wireframe duality rendered in time.
The wordmark is the originating case: the POLY glyphs ink in and the rest follows. The motion extends to one hero copy word per composition when that word's meaning carries completion: words like PART, DRAWN, BUILT, INKED, or any hero glyph whose meaning the inking visibly performs. The motion must be the word; the word must be the motion. Words that do not carry the concept cannot carry the motion.
POLY
T = 0s · Wireframe
POLY
T = 3.5s · Inked
CSS: stroke-dashoffset animation + fill opacity 0→1 · Duration: 3.5s · cubic-bezier(0.5, 0, 0.2, 1)
These rules are non-negotiable across all applications: digital, print, apparel, environmental, and collateral. Every person, vendor, or platform producing work under this brand identity is responsible for adherence.
Proof Convention
DO cells show the canonical wordmark. DONT cells use Inter 900 stand-ins to demonstrate effect violations without compromising the identity artifact.
Correct Usage
Use the wordmark in Navy (#081F5B), Obsidian (#1A1C1B), or White only. No other colors.
Always maintain the prescribed clear space (minimum: cap-height of "P") around the logo on all sides.
Use Paper White (#F9F9F7) as the primary background, not pure white (#FFFFFF), for all digital materials.
Always pair Inter for headlines with Crimson Pro for narrative body copy in long-form materials.
Use Accent Red sparingly. One primary CTA per page or section. High use destroys its urgency.
Apply Space Mono in uppercase only, for metadata labels, captions, and technical annotations.
Maintain tight letter-spacing (−0.04em to −0.02em) on Inter display sizes above 2rem.
Use motion.standard (300ms cubic-bezier(0.4, 0, 0.2, 1)) for UI transitions. Reserve motion.inking for hero page loads only.
Prefer the Bento/module grid for marketing layouts: full-bleed cells with intentional negative space.
Prohibited
Never recolor the wordmark in any color outside the permitted set. No gradients, no brand colors used decoratively on the mark.
Never apply drop shadows, outer glows, emboss effects, or any layer style to the wordmark.
Never use the logo at below minimum size: 120px digital / 1.5in print. The mark loses legibility and technical line detail.
Never substitute a different typeface for the wordmark or set "Polynexa Labs" in any font.
Never place the logo on photographic backgrounds, patterned textures, or insufficient contrast surfaces.
Never use bounce, spring, or elastic easing in motion design. These are off-brand for a precision craftsman identity.
Never use pure black (#000000) for text. Always use Obsidian (#1A1C1B) for warmth and print accuracy.
Never use more than two type families in a single composition: Inter + one serif or Inter + Mono is the limit.
Never use the Accent Red for decorative elements, backgrounds, or illustrative color. Red = action only.
The identity doesn't end at our own mark. It extends the moment Polynexa Labs appears next to a client's: on a shared pitch cover, in a website footer, on a signed case study, in a co-branded deliverable. Co-brand is the least glamorous and most public surface this system ever touches: wherever our name stands beside another, the discipline has to carry. The rules below govern every arrangement of the Polynexa Labs wordmark alongside a client mark, credit, or partner identity. They are additive to §02 Logo System and §08 Usage Rules, not replacements. Every clear-space, minimum-size, and color rule defined earlier remains in force.
§ 9.1 · Lockup Geometry
Three permitted configurations. No others. Each has its moment, its divider, and its clear-space rule.
Render 01 · Horizontal Lockup
The default for partnerships, joint bids, and any two-mark surface where both parties lead. The Polynexa Labs wordmark sits at its canonical height; the client mark matches the visual weight of the NEXA baseline: optically aligned, not mathematically. A single hairline rule divides them (1px at screen, 0.5pt at print), set to rule-solid (#757681 at 35% opacity). The rule is 1.6× the wordmark cap-height tall. Horizontal spacing: one cap-height of "P" on each side of the divider. Never an ampersand, slash, or multiplication symbol in place of the rule. The rule is quiet because neither party is asking for attention. The work is.
Render 02 · Stacked Lockup
Reserved for narrow-format applications: vertical banners, portrait-mode social tiles, email signatures, business card reverses, tradeshow podium cards. The leading mark sits on top, short 80px horizontal rule below, second mark below that. Vertical spacing: one cap-height of "P" above and below the divider rule. The stacked form is never the default; only chosen when horizontal space is insufficient. Two stacked marks must still respect the optical balance: if one mark is an emblem and the other a wordmark, size to equivalent visual weight, not to equivalent width.
Client Project Detail
Sample client site content: headline, deck paragraph, body copy, navigation links to services, about, and contact pages, all rendered in the client's own typography system.
Render 03 · Credit Footer
The most frequent real-world co-brand. On any client site where Polynexa Labs produced the identity, a credit line appears in the footer: footer-right by default, inline with the copyright. Typography is Inter 400 (not the wordmark, which is set type) at 8–11px, color graphite (#757681), with "Polynexa Labs" set in Inter 700. If digital, the Polynexa Labs words carry a single-pixel underline in rule-solid on hover, and link to polynexalabs.com. Never uses the graphic wordmark here. This is a spoken credit, not a deployed logo.
The single most frequent co-brand error is misreading the context. A mark's position is a claim. The claim has to match the room.
| Context | Lead Mark | Rationale |
|---|---|---|
| Client website, client deliverable, client-owned channel | Client leads | Polynexa appears only as a footer credit at reduced scale. The work is the client's. We built it, but we do not sign it in full-size type. The credit is a handshake, not a flag. |
| Polynexa case study, portfolio page, self-published work | Polynexa leads | Polynexa's wordmark is primary; the case study is our narrative of a client engagement. The client mark is the subject, rendered at equal or slightly smaller visual weight, paired with a "Client · Engagement Year" caption in Space Mono. |
| Joint venture, co-authored deliverable, white-labeled partnership | Equal weight | Horizontal lockup, hairline divider, identical cap-height relationship. Neither party is host. If one mark is an emblem and one is a wordmark, size to equivalent visual weight, never to identical width. |
| Pitch deck for a shared bid | Default: equal weight; defer to prospective client's convention if known | The presenting party leads only when the deck is delivered asymmetrically (one party pitches, the other joins). If both parties present together, equal lockup is the default. If the prospect is a law-enforcement or government agency, their convention leads: see §9.6 Edge Cases. |
| Third-party platform (awards, press, directories, conference listings) | Whichever the platform specifies | Follow the host platform's layout grid. Do not negotiate for featured placement. It reads as insecure. Polynexa's mark as provided, at the size the platform mandates. No improvisation. |
Between marks. One cap-height of the Polynexa wordmark "P" on each side of the dividing rule. This is the inner clear-space: the negotiated distance between two identities.
Around the lockup. Two cap-heights of "P" on all four sides. This is outer clear-space, larger than a single-mark application (§02 specifies one cap-height) because the co-brand lockup is a longer horizontal object and needs proportionally more breathing room.
Between lockup and page edge. Outer clear-space is a minimum, never a target. On covers, pitch decks, and case studies, the lockup should sit in the brand-grid margins defined by §05, which will typically exceed two cap-heights.
Stacked form. Vertical clear-space above and below the horizontal rule equals one cap-height; outer clear-space remains two cap-heights on all sides of the full stacked assembly.
§ 9.4 · Permissions & Prohibitions
The single rule underneath every rule: the co-brand inherits every constraint of the single mark in §02 and §08. The rules below are additions, not replacements.
Permitted
Co-brand on paper white (#F9F9F7), navy (#081F5B), obsidian (#1A1C1B), or pure white: the four canonical backgrounds from §03. Both marks must meet 4.5:1 contrast against the ground.
Co-brand in single-color (mono) form when the surface requires it: embroidery, engraving, single-ink print, small-format dieline. Both marks render in the same color. No two-color co-brand where one mark is navy and the other is black.
Client mark must be supplied as vector artwork: SVG, EPS, PDF, or AI. Polynexa produces the lockup; the client does not produce the lockup for us.
If the client's approved palette clashes with Polynexa navy, render both marks in obsidian or both in white (whichever meets contrast). Monochrome is always the safe fallback.
Co-brand may appear larger than the single-mark minimum (160px digital, 2 inches print) because the lockup is wider and the minimum must preserve legibility of both marks.
The credit-footer variant ("Brand by Polynexa Labs") may appear at the single-mark's minimum size. It is type, not a deployed wordmark.
Prohibited
Never co-brand on photographic backgrounds, patterned textures, gradients, or any insufficient-contrast surface. §08's single-mark ban extends in full to the lockup.
Never construct a co-brand lockup using a pixel-grabbed client logo (screenshot, favicon, web-scraped PNG). If vector isn't available, decline the lockup and use the "Brand by Polynexa Labs" credit instead.
Never recolor the client mark to match Polynexa's palette, or vice versa. Each mark renders in its approved color or in agreed-upon monochrome. Never hybridized.
Never use an ampersand (&), slash (/), "×" symbol, or plus (+) in place of the divider rule. The rule is a hairline. No typography sits in the gap.
Never lock the client mark to the Polynexa wordmark as a permanent composite. The co-brand is contextual: assembled per surface, not saved as a fixed asset.
Never place Polynexa ahead of the client on client-owned surfaces (their site, their deliverable, their deck). The credit is a handshake; Polynexa does not colonize the client's name.
Never use the co-brand in motion or animation unless the motion is applied equally to both marks. No Polynexa inking effect over a static client mark.
Never use the co-brand lockup below 160px (digital) / 2 inches (print). At smaller sizes, either drop to the credit-footer variant or show only one mark.
§ 9.5 · Credit Footer Specification
The canonical footer credit: one wording, one typography, one placement. Deviation is not a stylistic choice.
Default / 95% of uses
Brand by Polynexa Labs
Use on any client site, client deliverable, client print collateral where Polynexa produced the identity. Short, exact, no qualifiers.
Full-engagement credit
Designed & built by Polynexa Labs
Use only when Polynexa produced both the brand identity and the website build. Explicit, not boastful. Signals scope to a future prospect.
Print-only
A Polynexa Labs build.
Reserved for printed case-study backs, book colophons, and annual-report footers. The period is retained. Terminal, declarative.
When prohibited
No credit.
When the engagement contract forbids attribution (white-label, confidential, or government work), no credit appears anywhere. Internal portfolio only, with written permission.
§ 9.6 · Edge Cases
Recurring scenarios from the client portfolio: Scopos, Mark for Sheriff, Casa Elena, FobbitTees, Versitalis. Each ruling is the default; each can be overridden by an explicit scope agreement.
The client's mark is visually heavier than the Polynexa wordmark: a three-color crest or a densely detailed seal. How do we balance the horizontal lockup?
Scale by optical weight, not by bounding-box height. A detailed crest at the Polynexa cap-height will read heavier than it should. Reduce the crest by 15–25% so its perceived mass matches the wordmark. If reduction takes the crest below its own minimum legibility, switch to the stacked lockup. The vertical axis and short divider neutralize the imbalance. When neither works, default to the credit-footer variant: type beats contested geometry every time.
The client is a law-enforcement agency or government body with a heraldic badge (Mark for Sheriff, an agency seal). Does the heraldic tradition displace Polynexa's Swiss co-brand geometry?
Yes. Institutional tradition leads surface style. When the client is an agency whose authority lives in its seal (sheriff's office, municipal department, federal bureau), the host surface belongs to them and the heraldic convention governs: centered arrangement, vertical axis, no hairline divider (heraldry does not separate with hairlines; it separates with space and ordered rank). The Polynexa mark appears only as the credit-footer variant in small type, never as a co-equal badge. Heraldry does not co-brand as peers. On our own case-study covers of agency work, we return to Swiss geometry, because that is Polynexa's room.
The client is a hospitality or consumer brand (Casa Elena, FobbitTees) whose mark uses a typeface or palette that clashes with navy (#081F5B): terracotta, ochre, rich cream, custom color.
Render both marks in a single monochrome: obsidian on light ground, white on dark. Do not recolor the client mark to a brand-compatible palette. Do not strip Polynexa's navy to match the client's warm ground. The monochrome lockup is a design decision, not a compromise: it says the two brands share a surface without pretending to share an aesthetic.
The client is a professional-services firm with a restrained modernist mark in Polynexa's own aesthetic lineage (Versitalis). Lockup risks reading as "one brand" because both look alike.
Differentiate through measured asymmetry. Increase divider spacing to 1.4× the default (from one cap-height to ~1.4), and set the Polynexa wordmark 8–12% smaller than the client: a subtle visual cue that the client leads this surface. The modernist-next-to-modernist case is the hardest co-brand in practice; restrained hierarchy is the answer, not typographic contrast.
The co-brand appears on social media (Instagram carousel, LinkedIn case study) where the target frame is square, portrait, or stories format. Horizontal lockup doesn't fit.
Default to the stacked lockup on square and portrait surfaces. For 9:16 stories, use a single-mark render on the opening frame (Polynexa) and a single-mark render on the closing frame (client). The co-brand is sequential, not simultaneous. Never squeeze the horizontal lockup into a frame it wasn't built for.
The client asks for a co-branded deliverable cover (pitch deck, report, proposal) where the client requests Polynexa's mark be "equal size or larger" as a gesture of partnership.
Accept equal weight. Decline "larger." The horizontal lockup at equal visual weight is the strongest public signal of partnership; asymmetry favoring Polynexa reads as vendor-forward and undermines the client's ownership of their own engagement. This is a gesture to receive gracefully, then meet with discipline.
The mark is a handshake, not a signature. Co-brand is the least glamorous surface the identity touches, and the one most people see.
Lineage. Component patterns are the studio's engineered repeatables: layouts that solved a specific problem, held up under production, and earned promotion from one-off to system. Documented here for reuse, not reinvention. Each entry states the problem, the solution, the rule, and the swap-in protocol.
A CSS technique engineered to solve a specific symmetry problem inside the graph-paper bento block: equal top margin, equal row gap, equal bottom margin, all calculated automatically, regardless of content height. The pattern is deployed in every client showcase set in the Featured Showcase rotation on polynexalabs.com. It is asset-agnostic; swap in a client's logo, palette, and typography specimen, and the grid holds.
CSS height: 100% cannot resolve against a parent that only has min-height (no explicit height). If you use height: 100% on a grid inside a min-height container, the grid collapses to content size and floats inside the module, creating unequal top / gap / bottom spacing. The fix is absolute positioning plus align-content: space-evenly on the grid.
<div class="module graph-paper brand-showcase"
style="grid-column: span 6; min-height: 500px; position: relative;">
<div class="metadata-overlay metadata-hud">BRAND / CLIENT SHOWCASE</div>
<div class="brand-quadrant-grid">
<div class="brand-quadrant brand-q-logo">...</div>
<div class="brand-quadrant brand-q-palette">...</div>
<div class="brand-quadrant brand-q-type">...</div> <!-- spans full width -->
</div>
</div>
.brand-quadrant-grid {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
align-content: space-evenly;
box-sizing: border-box;
padding-top: 2.5rem; /* clears the HUD label at top: 1.5rem */
}
| Quadrant | Class | Grid Position | Notes |
|---|---|---|---|
| Logo | .brand-q-logo | Top Left · col 1, row 1 | align-items: center; justify-content: center |
| Color Palette | .brand-q-palette | Top Right · col 2, row 1 | padding: 0 !important · edge-to-edge bars |
| Typography | .brand-q-type | Bottom Full Width | grid-column: 1 / -1 · spans both columns |
Each bar uses a right-anchored gradient that fades to transparent toward the center, with text overlaid inside:
background: linear-gradient(to left, [COLOR] 0%, [COLOR] 30%, transparent 100%);
Text is right-aligned at 0.6rem monospace, uppercase, letter-spacing: 0.1em. The Paper White bar adds a subtle right border (border-right: 1px solid rgba(117,118,129,0.3)) and uses dark text instead of white.
.brand-quadrant {
padding: 0 2rem; /* horizontal padding only — vertical rhythm handled by the grid */
display: flex;
align-items: center;
}
The grid system is asset-agnostic. Replace the Polynexa Labs assets with client assets in the markup. Nothing in the grid needs to change.
Working example. The pattern is deployed in the Featured Showcase sets on polynexalabs.com (FobbitTees, Versitālis, Scopos Strategies, Mark For Sheriff, and other client engagements). Each set is one instance of this quadrant grid paired with a monitor-framed website screenshot. The quadrant grid is the component that fills each slide; the rotation behavior on the live site is the surface that carries it.