Advancis Design System.

Colors

All color values live in styles/tokens.css. Consume them via var(--color-*) / var(--bg-accent-*) / etc. Never paste raw hex or rgba into rules.

Each product color may only be used inside that product's context. Brand blue is the canonical accent for Advancis and WinGuard surfaces. Orange is product-scoped to AIM. Teal is product-scoped to AOP. This rule applies across every channel — web pages, PowerPoint decks, documents, social media. Cross-context usage is the most common drift pattern; resist it.

On surfaces that touch multiple products (Solutions pages, multi-product decks, corporate documents), brand blue stays the default accent and orange / teal appear only on explicit product CTAs or product-scoped modules. A Solutions page section title is brand blue; a "Learn more about AIM" button inside that section is orange.

For PowerPoint, documents and social-media graphics: the entire deliverable is tinted to one product accent. Solve every visual need with shades and tints of that product's color (mixes with white and black). Do NOT introduce a second accent color anywhere in the file. A WinGuard deck is blue + neutrals. An AIM deck is orange + neutrals. An AOP deck is teal + neutrals.

Status-color exception. Red and green are allowed only when the content semantically requires them (success vs error, valid vs invalid, gain vs loss, positive vs negative). They are informational tokens, not decorative. Reach for them sparingly and never as a substitute for the product accent.

Typography

Two families only: Poppins for headings and chrome, Figtree for body prose. Body weight --fw-body is Light (300), a deliberate editorial voice. Chrome (buttons, labels, nav, form inputs) pins to --fw-regular or heavier.

The typography scale is two-tier. Chrome tokens (--text-11 / --text-12 / --text-14 / --text-15 / --text-16) stay pinned at fixed px, they're for UI labels, buttons, nav, form inputs, and meta rows: places where fluid scaling would cause layout drift or tap-target regressions. Fluid role tokens (--text-hero / --text-h2-lg / --text-h2 / --text-h3-lg / --text-h3 / --text-lead / --text-body-fluid) carry the content hierarchy and clamp between mobile and desktop ceilings. Default to chrome for any UI surface; reach for fluid only when the element is content-carrying hierarchy.

Fluid role ladder, top to bottom, each tier traverses between mobile floor and desktop ceiling.

--text-hero

clamp(36px, 2.5vw + 20px, 56px)

Page H1 / hero display

--text-h2-lg

clamp(32px, 5vw + 10px, 48px)

Highlight-1 / oversized statement

--text-h2

clamp(28px, 4vw + 12px, 40px)

Section H2 / statement headline

--text-h3-lg

clamp(22px, 1.25vw + 14px, 32px)

Product tile titles / mid-tier headlines

--text-h3

clamp(20px, 0.56vw + 18px, 26px)

Card titles / accordion triggers

--text-lead

clamp(16px, 0.3vw + 14.875px, 18px)

Intro / lede paragraphs

--text-body-fluid

clamp(16px, 1.8vw + 14px, 18px)

Fluid body prose

Headlines & text styles

Every major headline ends with a brand-blue period (.headline-dot). The dot locks to Poppins Bold regardless of the surrounding heading weight.

Hard rule, site-wide: only .headline-dot is blue inside a headline. The headline text is one uniform color (--color-dark-blue on light, --color-white on dark); the trailing dot is the single accent. Never color an individual word, not via <em>, not via a <span>, not via a per-page .statement-headline em { color: … } override. <em> is allowed only as a markup hook, the global .statement-headline em rule keeps it Bold with no color change. The only exception is when the design owner explicitly asks for a colored word in a specific headline, it is never introduced on our own initiative. (Highlight-text below is a separate tier, vision / mission statements, where inline <em> accents are permitted, that is not a headline.)

Centered .statement-headline instances pin to roughly 40–50 % of content width (≈ 14–22 ch depending on tier). Wider center-aligned headlines lose the rhythmic top-center anchor and read as left-aligned prose that happens to be centered. Applied across home, about, winguard.

Highlight text

Three canonical size tiers for the Figtree Light "highlight" register, the emphasized copy that sits under section headlines. One shared family, three sizes. All tiers share family + weight (Figtree Light) so the voice stays consistent; only size, line-height, letter-spacing and default color vary. Base class .text-intro is the default (Highlight 3); --md and --lg are size modifiers. Composable with .text-intro--on-dark for dark surfaces.

Highlight-text is the one place in the system where inline color accents inside <em> or scoped span utilities are permitted, see the .about-opening-accent pattern on about.html where "worldwide" renders blue inside the vision statement. This exception applies because highlight-text is semantically a statement / vision tier, not a section headline. The "no blue words in headlines" anti-pattern (above) does not apply here.

Buttons

The entire CTA system is .btn + one fill variant (--filled / --outline / --text) + one color variant (--blue / --dark / --white / --orange / --teal). Every CTA on every page uses this grid; there are no one-offs. Orange + teal are product-scoped (AIM, AOP) and used for explicit cross-page product CTAs, not as general accents.

Mobile CTA collapse. CTA pairs collapse to a single button on mobile (<640 px). The second and any further .btn children inside the canonical CTA wrappers are hidden via display: none. Applies to: .gate-actions, .home-hero-cta-row, .about-footprint-head-ctas, .cp-opening-ctas. The rule lives in components.css.

Exempt: .home-about-cta , the Recruiter funnel keeps both buttons visible because both CTAs carry equal weight (Apply / Open positions). Document any new exemption in Tier 2.

Stack-gap. When CTA pairs wrap or stack on tablet+ they use --sp-24 as the flex/gap value. .about-footprint-head-ctas uses --sp-12 , a tighter cluster gap appropriate for right-aligned action rows. No other gaps are canonical.

Chip primitive

.chip is the shared visual base for pill-shaped tab / toggle affordances. Consumers layer on size, color, and active-state rules. The trade-selector (.wg-trade) is a full-width tablist row and does not use .chip, see Tier 2.

Feature card

Icon + title + body unit. .feature-card is horizontal by default, a CSS-grid with an 80 px icon track (matches .icon-tile--lg) + a 1fr text column. Orientation isn't a property of the card; it's inherited from the parent .value-props's flex-direction.

Value-props

Grouping primitive for multiple .feature-card children. Vertical-only: cards stack as a flex column with gap: 0 and rely on per-card padding for separation (padding: var(--card-pad-sm) 0 from tablet up, tightened to var(--sp-12) 0 on mobile <640 px). A leading .eyebrow inside a value-props group gets --sp-24 margin-bottom (tightened to --sp-16 on mobile) and removes the top padding of the first card so the baseline reads clean. Multi-column / horizontal layouts of .feature-card use page-specific grid wrappers rather than a value-props modifier , see Channel-Partner Services (.cp-services-cards) and WinGuard product-header (.product-header__tiles) for the pattern.

Statement section

Composed two-column section pattern: .statement-headline on the left (H1/H2 with .headline-dot), a .value-props group on the right. Lives on the homepage and on WinGuard Section A. The section class owns the outer padding + white surface; .statement-section-inner owns the 1:1 grid; .statement-section-lead is the left column.

Stats

Number + label grid. Three equal columns, no breakpoint collapse, the layout holds a single row at every viewport width, including the About-Us pattern the hero migrated to. Per-item structure is .stat-item > (.stat-value > .stat-plus?, .eyebrow.stat-label). The + glyph is optional markup, not a modifier, omit the <span class="stat-plus"> for numbers without plus. Modifiers compose freely: .stats--on-dark flips colors for dark surfaces, .stats--divided adds vertical hairlines between items (either modifier works independently or together, and on either surface).

Event card

Event badge primitive used in the homepage events strip and the mega-menu upcoming-events list. Base class .event-card with size modifier .event-card--sm for dense contexts.

Tick list

Circle-check bullet list, the shared primitive for benefit / capability / payoff lists across the site. Source: components.css. The first <svg> of each <li> is treated as the tick icon (a wrapping <span> also works) and tinted via --tick-color (defaults to brand blue).

Surface quiet

The dark-mode counterpart to a subtle card, no glow, no cursor-follow, just hairline + low-fill + tokenised padding. The non-glowing alternative to .tile-glow. Defaults: var(--color-white-5) fill, var(--color-white-8) border, padding var(--card-pad-md). Density via --sm / --lg; accent variants for highlighted rows.

Feature tile

Icon-led dark feature card. The "Built For X" / "Payoff" shape, always paired with .tile-glow for the outline + cursor-follow glow. Square brand-tinted icon container (56 × 56) + H3 title + body lede + optional .tick-list of supporting bullets.

Editorial section head

Asymmetric 2-column section header: eyebrow + H2 on the left, lede paragraph on the right. Default ratio 5fr/7fr; the --wide-head modifier flips to 6fr/5fr when the headline is the editorial focus. Mobile-first single column, expands at 1024 px.

Surfaces

Every painted surface on the site uses a token. No raw background values.

Canonical dark-tile wash: linear-gradient(180deg, var(--color-white-5), transparent 70%). Pairs with --border-tile-dark (see Colors → Accent Washes) and the .tile-glow primitive, together they compose every dark card/tile surface on product pages, homepage modules, and winguard. Rendered here over --color-dark-blue so the subtle top-to-transparent lift is visible.

Shadows

Three canonical shadow tokens cover the entire site. Inline box-shadow composites beyond these are drift, see Tier 3.

Borders & radii

Canonical width is 1px solid everywhere; dashed only for intentional placeholder surfaces. Canonical radii below.

Spacing

Scale is non-linear and tuned for rhythm, every margin, padding, and gap consumes the scale. Major-section top/bottom padding ships as three dedicated clamp-based tokens, --sp-section-sm, --sp-section-md, --sp-section-lg, documented in the Section rhythm subsection below.

--sp-section-sm

clamp(40px, 6vw + 16px, 72px)

Compact sections: tight verticals, in-page callouts.

--sp-section-md

clamp(56px, 10vw + 8px, 120px)

Default section rhythm, most sections.

--sp-section-lg

clamp(72px, 12vw + 16px, 160px)

Generous sections: hero, major statements, content-heavy.

Default to --sp-section-md. Reach for --sp-section-sm / --sp-section-lg only when the section's density warrants a departure from the base rhythm.

Vertical rhythm between adjacent typographic blocks inside a section. Same value at every viewport , no mobile overrides.

eyebrow → headline

--sp-24

24 px gap between an .eyebrow label and the headline that follows.

headline → text-intro (Lead-typed block)

--sp-32

32 px gap when the next element carries .text-intro (or any Lead-typo class).

headline → p (bare body paragraph)

--sp-20

20 px gap when a plain <p> follows directly without a Lead class. Tighter than the Lead-typed pair because body type sits closer to its headline.

lead / intro / body → CTA

--sp-40

40 px gap above any CTA cluster following a content block.

The four pairs cover every standard section composition. If a section needs tighter rhythm (a marker pattern, a head-block with custom geometry), document the deviation in Tier 2 rather than introducing a one-off mobile override.

Three padding tiers cover the canonical card surfaces. Cards reach for one of these tokens directly; surface-bespoke padding lives in Tier 2 only with documented reason.

--card-pad-sm

var(--sp-20) · with var(--sp-16) on mobile <640 (applied at .feature-card)

Compact cards: feature-card, dense list rows.

--card-pad-md

var(--sp-24) · 24 px

Standard tier , partner cards, membership cards, region cards (vertical), WG module tile on mobile.

--card-pad-lg

clamp(var(--sp-32), 3vw, var(--sp-40)) · 32–40 px fluid

Editorial-density cards: CWI tier, WG module tile on tablet+.

Breakpoints

Three canonical breakpoints govern layout collapse and nav chrome transitions. Values are documented as tokens for reference, but are NOT consumed by @media queries (CSS custom properties can't be used in media-query conditions). Always write the literal px value in media queries, matching the token values exactly.

--bp-sm

640px

Layout collapse: 2-col → 1-col transitions, tablet-to-mobile rhythm.

--bp-md

1024px

Nav chrome: desktop nav → mobile hamburger.

--bp-lg

1280px

Maximum content width ceiling, optional wide-desktop adjustments.

Two things govern breakpoint usage: (1) Layout-collapse breaks use 640 px, not 768 px, the tablet (768) tier stays 2-col. (2) Nav-chrome breaks use 1024 px, cleanly below typical laptop widths (1280, 1366, 1440+).

Icons

Three canonical icon sizes. Icon color is inherited from the parent via stroke: currentColor / fill: currentColor. Context-pinned deviations (18px, 22px) are documented in Tier 3.

Rounded-square icon containers. .icon-tile supplies the shared base (flex-centered, --radius-sm, --color-superlight background, --color-blue icon color, duration-base transition on background + color). Two size modifiers set only container and inner SVG dimensions, no other overrides. Consumers add any section-specific hover / active rules on top.

Placeholder slot

Empty-frame primitive for "drop-in target awaiting a real asset". .placeholder-slot handles the shared geometry, relative positioning, --radius-md, clipped overflow, and nothing else. The three surface modifiers supply matching treatments, just on different tokens: .placeholder-slot--light (white, solid light-grey outer ring, inset dashed mat ring, faint diagonal wash); .placeholder-slot--superlight (one tone darker than white, for use when the surrounding section is white and the frame would otherwise disappear; same border + dashed mat as --light); .placeholder-slot--dark (dark-blue, solid white-15 outer ring, inset dashed white-15 mat ring, faint white-5 diagonal wash). Inside, a shared .placeholder-slot-inner lays out a bottom-start caption (.placeholder-slot-caption) and a lowercase mono filename hint (.placeholder-slot-hint). Both lines read at watermark weight, caption + hint share --color-text-meta on light and --color-white-70 on dark, so the empty frame doesn't parade a fake label; font family + size still carry the hierarchy. Consumers supply display, aspect-ratio and any surface-specific box-shadow. Hydration pattern: when the real asset lands, swap the element wholesale (replace the placeholder with an <img> or real markup) or strip the .placeholder-slot + .placeholder-slot--* classes. In the wild: .about-campus-slot composes the light variant; the WinGuard capabilities section (.wg-shot--dark stage + .wg-cap-inline-shot--dark mobile inline shots) composes the dark variant.

Placeholder captions and hints sit at "watermark weight", hierarchy is carried by family + size, not color weight. This prevents empty frames from visually advertising fake labels. The caption reads as a stand-in, not a live UI element.

Motion

Hover any cell below to trigger the motion with the indicated token. Users with prefers-reduced-motion: reduce see an instant swap.

Theme mapping

PowerPoint Theme uses 12 color slots (2 text + 2 background + 6 accents + 2 hyperlink). The Advancis PPT theme maps the web tokens onto those slots so every Theme-aware element (charts, SmartArt, table styles) picks up the brand without manual recoloring.

Accent 5 and Accent 6 occupy the two PowerPoint accent slots that would otherwise be picked at random by chart auto-coloring. By reserving them for status (success = green, error = red), the deck author can use them deliberately while ensuring no decorative color ever lands in a chart. Don't use Accent 5/6 outside their documented status purpose.

Typography

Same families as the web (Poppins for headings + chrome, Figtree for body), with PowerPoint-safe fallbacks so the deck renders correctly on machines that don't have the brand fonts installed.

Practical use inside slides:

• H1 / Slide title: Poppins Bold, 36–48 pt, line-height tight, letter-spacing −0.02 em. Always ends with a brand-blue period (matches web .headline-dot).
• H2: Poppins Bold, 28–32 pt, no closing period.
• H3: Poppins SemiBold, 18–22 pt, no closing period.
• Body: Figtree Light (300), 16–18 pt, line-height 1.5.
• Eyebrow / category: Poppins SemiBold, 10–12 pt, ALL CAPS, letter-spacing 1.5 px, brand-color.
• Logo lockup: Poppins Bold, 12–14 pt, dark text + brand-blue period.

Transitions

Transitions are part of the brand identity. The system specifies exactly two, applied in two contexts; anything else is forbidden.

No other transitions allowed. Wipe, Reveal, Cube, Honeycomb, Vortex, Origami, Pan, Glitter, Doors, Box, Comb, Ferris Wheel are all out. The system is push + cover/uncover, nothing else.

Transitions are preset on every example slide in the master, but editing / duplicating / moving slides routinely corrupts them. Always recheck transitions after structural edits.

Brand masters

Four slide masters live in the .potx, one per brand accent. Switching the master at the start of a deck retints every accent-aware element automatically. Slide-by-slide override is possible but indicates the wrong master was chosen, please switch instead of overriding.

Title slide

Eyebrow (date / topic / extra info), title with brand-colored period, optional supporting body line. Vertically centered in the safe zone, footer chrome at the bottom corners. Shown below in the Advancis variant; the AIM and AOP masters use the same composition with the accent swapped to --color-orange and --color-teal.

Composition rules: eyebrow → title → optional body, vertically centered in the safe zone. Brand-colored period on the title. Footer chrome: advancis.net URL bottom-left, Advancis wordmark bottom-right (same baseline). The Advancis wordmark is the corporate signature on every standard slide, no matter the brand variant.

Don't: oversized bodies competing with the headline, full-bleed background images, secondary logos in addition to the corp signature, mixed brand accents.

Divider · One row

Single short statement that names the upcoming section, fits on one line. Centered horizontally + vertically on a dark slide. Headline ends with the brand-colored period. No footer chrome. Eyebrow above is optional, toggle below.

Composition rules: text block centered both horizontally and vertically. Headline uses the same size as the title-slide headline (no oversized variant). Max ~4 words so the statement reads in one beat. Eyebrow is optional, only add it when the chapter / topic label aids navigation. No footer, no page number, no logo, the whole canvas is the statement.

Divider · Two rows

Same composition as one-row, but the headline is long enough to break across two lines. Use when one row can't carry the meaning without becoming cryptic. Still one headline (not a headline + subtitle), still no footer chrome.

When to use one vs. two rows: reach for one row by default. Move to two rows only when the headline needs more breathing room to land cleanly. Never split a headline into headline + subtitle, dividers have no subtitle.

Content with headline

The canonical content slide: headline at the top spanning the full width, bullets on the left, image on the right. Headline may wrap to a second line (two rows max). The bullet list uses the shared Bulletpoints primitive (default check variant). The image slot uses the site-wide .placeholder-slot--superlight treatment; swap it for a real <img> when the asset lands.

Composition rules: eyebrow → headline (full width, max 2 rows) → 2-column grid with bullets left + image right. Title is the same size as on the title slide. The brand-colored period sits at the end of the headline. Footer chrome is always present.

No subheadline: content slides intentionally skip the subtitle slot. If you need explanation copy, lean on the bullet list (Poppins SemiBold main + optional Figtree Light subline) rather than adding a paragraph above it.

Variants: bullets-only (no image) is covered by the Bulletpoints showcase. A single centered image with no bullets is covered by Content with image.

Avoid: three-row headlines, more than five bullets, bullets that run longer than two lines, mixing icon variants inside the same list, pushing the image to the left column (image always lives on the right).

Two-column content

Headline at the top spans the full slide width; the body splits into two equal text columns underneath. Use this when two ideas sit at the same level and need to be read as peers: a comparison, two halves of a definition, a before / after. Reading order is always left → right. For text + image use the separate Content with image layout instead, do not press an image into the right column.

Composition rules: headline always spans both columns. The two columns use the same sub-heading style and roughly the same body length, this is a comparison or side-by-side, not a lead + caption. Avoid: a tall column next to a short one, different heading levels per column, mixing a text column with an image (use the image layout for that).

Content with image

Headline at the top, single image centered below in the brand placeholder treatment. Image surface uses the site-wide .placeholder-slot primitive (dashed-mat frame + diagonal wash) so empty image slots match the rest of the site visually. Default aspect is 16:9; replace the placeholder with a real <img> when the asset is ready.

Composition rules: eyebrow → headline → one image, centered horizontally below the headline. Image height is bounded by the slide safe zone (~56% of slide height) so it never crowds the footer chrome. Add a single caption line via an extra .ppt-slide__body below the image only when the image needs disambiguation; otherwise let it stand alone.

Aspect variants (4:3, 1:1, 5:7) live on this same composition via the .ppt-slide-image--4x3 / --1x1 / --5x7 modifiers. Pick the aspect that matches the asset; do not letterbox a 4:3 photo into a 16:9 slot.

Bulletpoints

The shared bullet primitive used inside content slides. Four documented variants cover every list need, swap with the pill below. The check variant is the default. Red and the long-form lead-in color are intentional: red is reserved for semantically negative bullets (anti-patterns, don'ts), the long-form lead picks up the deck's brand accent.

When to use which:

• Check ✓ — neutral list, the default. Brand-colored icon, no status implication.
• Fail ✗ — only when bullets are semantically negative: anti-patterns, things to avoid, contraindications. Uses the reserved error red.
• Work-in-progress — pending / coming-soon / partially-delivered items. Muted neutral, not a status color, the half-filled disk signals progress without alarming.
• Long-form — when each item needs a label + sentence rather than a tight phrase. No icon, the brand-colored lead-in does the visual work.

Don't: mix variants inside a single list, swap icons mid-list for emphasis, use the fail variant as a decorative bullet. Keep at most five items per list, six max.

Key message

A single oversized statement that anchors the deck mid-flow. Light slide (not dark like a divider), centered both axes, uses the --lg title size. Carries the standard footer chrome, the key message sits inside the deck, it does not break it. Eyebrow above the statement is optional.

Composition rules: exactly one headline, no subtitle, no body, no list. Centered horizontally and vertically. Brand-colored period on the headline. Footer chrome stays.

Key message vs. divider: the divider is a dark section break with no footer, used between chapters. The key message is a light pause inside a chapter, used to call out one sentence the audience should walk away with. Don't substitute one for the other.

Key messages

Full-width headline, two to five equal tiles below. Each tile leads with a brand-filled icon disk (swap the <use> href for any of the project's icon symbols), then an H3 SemiBold tile title, then a short Figtree Light body. Count pill toggles between 2 / 3 / 4 / 5 tiles — tile content stays the same primitive across counts; tighter counts simply mean tighter copy per tile. An optional brand- coloured conclusion bar lands at the bottom when the slide needs a takeaway.

Composition rules: all tiles share equal width and column height. Each tile owns one idea — one icon, one short title, one short paragraph. No bullets inside the tile. Tighter counts demand tighter copy: a 2-up can carry a sentence per tile, a 5-up wants a single phrase. The conclusion bar (when present) lands once at the bottom and carries the deck's brand colour.

When to use which count: two for a stark either/or pair (the surface fills more space and the composition reads heavier), three for the most common "three pillars" rhythm, four for a list that doesn't merge cleanly to three, five only when each tile carries a single word.

Avoid: uneven body lengths that make tiles misalign at the baseline, mixing literal "ICON" placeholder text with real icons across the row, pairing the conclusion bar with the 5-tile count (the slide is already at its density ceiling).

Agenda

Editorial timeline laid out as soft tiles. Each day sits in its own superlight card (same surface language as the Comparison primitive) — no brand rail, no row borders, the fill and the typography carry the structure. Day header pairs a small brand-blue DAY 01 eyebrow with a prominent date in Poppins SemiBold. Each entry stacks the time (brand colour, tabular numerals) above its title and details.

Composition rules: day eyebrow (brand colour, small caps, letter-spaced) → prominent date in Poppins SemiBold → time entries stacked. Each entry is a two-line block: time on its own line in brand colour, title on the next line in dark Poppins SemiBold, optional details below in Figtree Light. Two-day mode = two side-by-side tiles, one per day. One-day mode = a single full-width tile whose body flows into two chronological columns inside (left column = first half of the day, right column = second half) so the agenda still fills the slide width.

PPT translation: each tile is a Rectangle Rounded shape with a ~5% superlight fill, sent to back. All headings and rows are plain text boxes positioned on top — no grouped shapes, no row dividers. Keeps the slide editable for any deck author without breaking the visual rhythm.

Avoid: three or more days on one slide (split across slides), mixing 24h and 12h time formats, more than three lines of details per entry, time entries without a bolded title (the brand-colour time alone is not a heading).

Table with bullets

Editorial topic / bullets table. Each row pairs a brand-blue topic eyebrow on the left (with an optional muted sub-line) with a standard Bulletpoints list on the right. Rows are separated by a single hairline rule top and bottom — no filled tiles. Up to three rows on a slide; for more, split across slides.

Composition rules: topic column is fixed- narrow (left ~24% of inner width). Topic eyebrow uses the same brand-blue uppercase letter-spaced treatment as the agenda day label — repeating the move across specialty slides creates a consistent vocabulary. The optional __topic-sub line in Figtree Light gives a one-sentence framing for the bullets. Rows are separated by hairline rules; no fills.

PPT translation: hairlines are thin shape rectangles spanning the inner width. Eyebrow + sub-line are plain text boxes. Bullets reuse the standard list primitive, no row-specific styling.

Avoid: mixing bullet variants across rows (a table is a single comparison, not a mash-up), four or more rows on one slide (split), filling the eyebrow column with full-sentence labels (keep them to one or two words).

Stats

Three big numbers, three short labels. Each stat sits in its own superlight tile so the row reads as three distinct moments rather than a single ledger. Poppins Light value (so the digits feel airy), Figtree Light label underneath. Use sparingly — one stats slide per deck section, never more than three values.

Composition rules: headline at top, hairline + 3 stats below. Numbers always read in the same direction (all "more is better" or all "less is better", never mixed). Label kept short enough to scan at glance distance — one sentence, ideally one clause.

Variants: a + suffix marks approximate / open-ended counts (550+, 600+) and is rendered in the brand colour. Avoid units inside the value ("550 partners" not "550⁺ partners worldwide"), put units in the label instead.

Quote

Centered testimonial slide. Brand-coloured opening mark, the statement in Poppins SemiBold, attribution underneath. Acts as a punctuation moment inside the deck, the way Key Message does, but with attribution rather than a stand-alone claim.

Composition rules: the quote slide is centered both axes. The opening mark sits above the statement in the brand colour, the statement uses Poppins SemiBold (not Bold — it's a sentence, not a headline), and the attribution sits below in two short lines: name on top, role + company on the bottom. Footer chrome stays.

Avoid: quotes longer than three lines (cut them down or reformat into a Key Message), multiple quotes on one slide, decorative photo backgrounds behind the quote.

Timeline

Horizontal milestone timeline. A single thin rule runs across the slide; brand-filled dots mark each milestone. Year as a small brand-eyebrow above each dot, milestone title + short detail below. The current / "you are here" milestone can be marked with data-current — its year + title lift into brand colour and its dot picks up a soft brand-tint ring.

Composition rules: four to six milestones max. Years run left → right in chronological order, never grouped by significance. Mark exactly one milestone as data-current (or none, if the timeline ends in the future). Detail text capped at one sentence per milestone.

PPT translation: the rule is one horizontal rectangle spanning the full slide width (edge to edge, past the safe zone) behind the dot row. Dots are filled circles. Each column is a stack of plain text boxes — year, title, detail. The brand-tint ring around the current dot is two stacked circles (filled brand + outline brand-tint).

Speaker intro

Portrait + biography on a dark slide (.ppt-slide--dark). No slide-level headline or eyebrow — the speaker is the headline. Photo on the left (35% column) inside the shared .placeholder-slot--dark tile; bio block on the right opens with a brand eyebrow, runs into a big Poppins Bold name + brand-coloured role, and lands on a hairline-divided contact block at the bottom. Mix of surface (photo tile) + typography (bio) — the rare slide where the portrait justifies a tile container, and the dark canvas keeps the focus on the face.

Composition rules: exactly one speaker per slide. Portrait rendered as a 1:1 circle (the .placeholder-slot--dark mat follows the clip), keeps the focus on the face rather than the frame. Name is the only Poppins Bold element; the role line is Poppins SemiBold in the brand accent. Bio paragraph stays under four lines. Contact rows use small-caps labels in a 2-column key/value grid, no divider rule needed — the whitespace above already carries enough separation.

Avoid: two-speaker side-by-side compositions (give each speaker their own slide), long biographies (cut to the essentials), more than three contact rows.

Comparison · Before / After

Two-state comparison. Both sides are rounded surfaces; the left side stays neutral (superlight surface, muted eyebrow) and the right side is brand-tinted (the recommendation / answer / "after" state). Bullets use the fail variant on the left and the check variant on the right — the bullet primitive's status colours carry the framing.

Composition rules: left side = problem state (neutral surface, muted eyebrow, fail bullets), right side = answer state (brand-tinted surface, brand eyebrow, check bullets). Symmetric: same number of bullets, similar lengths, mirrored phrasing. The brand tint on the right is the visual cue that the right side is where the deck stands.

vs. Two-column content: two-column is for two peers; comparison is for two states (before/after, with/ without, problem/answer). If neither side is the "recommendation", use two-column and drop the accent surface.

Data table

Proper rows × columns table for feature matrices, spec sheets, and pricing comparisons. Header row uses the brand-eyebrow style (small caps, letter-spaced) with a 2px brand rule beneath; body rows are hairline-divided. First column carries Poppins SemiBold row labels, value cells stay neutral. A single column can be marked data-highlight so the header lifts into brand colour — useful for marking a recommended tier without resorting to a heavy column fill. Boolean cells use brand-coloured circle-checks, status-red circle-crosses, or muted dashes.

Composition rules: header row sits in the same brand-eyebrow vocabulary as Agenda day labels, Table topic labels, and Comparison eyebrows. The single data-highlight column header is the only colour cue on the headers — body cells stay neutral so the data reads cleanly. Use the brand circle-check, status-red circle-cross, or muted em-dash for boolean cells. Mix value cells (numbers, currency) and boolean cells in the same table — the column type doesn't have to be uniform.

PPT translation: a real PowerPoint table works — drop the brand-blue 2px line under the header row, set the header row text in brand-eyebrow style, and use a fixed-width first column. The body fill stays white (no banded rows), and cell separators are 1px brand-divider.

vs. Table with bullets: table-with-bullets is editorial (one topic per row, bullet list as the content) — this primitive is for true matrices where every row × column is a discrete cell. Pick the format that matches the data, not the prettier-looking option.

Technical spec sheet variant: the same primitive carries real value cells too — numbers with units, ranges, custom labels, mixed with booleans where they belong. Use this shape for hardware tiers, capacity sheets, SLA comparisons, or any table where the data is mostly figures rather than yes/no.

Mixing cell types: values, ranges, and booleans can sit in the same table. Keep the cell type consistent within a row (don't mix "100" and "✓" across one spec) but vary across rows freely — Data points are numeric, HA cluster is boolean, Support window is a custom label. The reader scans by row, so each row needs to be unambiguous on its own.

Typography: numbers use Figtree Light at the same body size as text cells. Use tabular-nums if the digits need to align across columns (uncomment the font-variant-numeric on tbody td in a real deck if you're tight on column width). Keep units attached to the value ("250 000", "< 80 ms", "24 × 7"), not as a separate column.

Row count: six to eight spec rows is the comfortable ceiling on a 16:9 slide. For more, split into two slides grouped by category (capacity / performance / security) rather than one over-stuffed table.

Feature comparison

Row-card variant of the data table for license plans, tier breakdowns, and feature × plan matrices that benefit from a bit more breathing room. Each row is a white surface card with rounded corners and a soft shadow; header cells sit above as separate superlight chips, not a connected header row. The first column carries a brand-coloured icon disk + a Poppins SemiBold label; remaining columns hold descriptions or values. Use when the data table feels too dense or when the rows benefit from an icon as a row anchor.

Composition rules. Header chips share the same vocabulary as agenda days and table topics — Poppins SemiBold, centred, superlight surface, slightly rounded. Row cards are white surfaces with rounded corners and a soft shadow (0 2px 6px rgba(10, 16, 29, 0.05)), no border. First column is left-aligned with icon + label, every other column is centred — the asymmetry guides the eye left-to-right by row, the way the data is meant to be read.

Row count. Five rows is the comfortable ceiling at the default 5-column layout. Six is possible if the descriptions stay short; seven is too many — split into two slides or fall back to the regular Data table primitive. Row-cards demand more vertical space than hairline rows; don't try to compress them.

Icons. One icon per row, pulled from the shared <symbol id="ppt-icon-*"> set (shield, scale, modular, layers, api, sdk). Brand colour, 24×24 (scales fluidly to slide size). Don't add per-row colour variation — the icon is a row anchor, not a status indicator.

vs. Data table. Data table is the dense matrix workhorse — pick it when you have many rows, short values, and need every pixel for data. Feature comparison is the editorial variant — pick it when descriptions are longer than two words, when rows benefit from an icon, or when the table is the centrepiece of the slide rather than a reference exhibit.

PPT translation. Each row card = one Rectangle Rounded with a soft drop shadow (Format Shape → Shadow → Outer · Offset Bottom 2pt · Blur 6pt · Transparency 95%). Header chips = five separate small Rectangle Rounded shapes in superlight fill, distributed horizontally above the cards. Icons = Insert → Icon (24px brand-blue). No connector lines, no banding — the shadow does all the visual separation.

Roadmap

Chevron-headed phase columns + full-width ongoing-activity ribbons. Each phase has a right-pointing chevron header (light superlight by default, brand-tinted with the --now modifier) carrying a large brand-coloured quarter label and a Poppins SemiBold title; the chevron's right-arrow tip cues the timeline direction. Below each header a bullet list of deliverables uses the brand circle-check icon. At the foot of the slide, optional brand-blue chevron ribbons span the full width to carry ongoing commitments that span every quarter — platform maintenance, adapter releases, partner enablement.

Composition rules. 5 columns is the default (.ppt-roadmap--4 / --6 modifiers are available for tighter or wider horizons). Exactly one phase carries the --now modifier — the brand tint is a singular "you are here" marker, not decoration. Two to three bullet items per phase is the comfortable ceiling; anything longer crowds the column and forces the slide into two lines per item.

Ongoing ribbons. Zero, one, or two ribbons max — three starts to fight the phase columns above. Use them for commitments that run across every quarter (platform maintenance, adapter releases) — not for a single quarter's deliverable. Each ribbon picks up the chevron shape so the eye reads "this is also a forward arrow, spanning the whole timeline".

Quarter labels. Pick one format per deck and stick to it — Q2.26, Q2 2026, or 2026 Q2 all work, mixing them looks accidental. The + suffix (Q4.26 +) marks an open-ended later-or-beyond bucket; use it sparingly, ideally only on the final column.

PPT translation. The header chevrons and ongoing ribbons map 1:1 onto the native PPT Arrow: Right shape (Insert → Shapes → Block Arrows) — in the web they're built as a rounded rectangle (left corners only) plus a triangular pseudo-element for the tip, which is why all chevrons share a fixed height regardless of title length. Each bullet item is a circle-check icon + a text box, same as in the Bulletpoints primitive. The bullet list is independent of the chevron above it — separate group of shapes in PPT, not a single grouped object.

vs. Timeline. Timeline is for historical milestones (we shipped X, then Y, then Z). Roadmap is for forward-looking phases organised by quarter. If the slide spans both past and future, use Timeline and mark the present with data-current on the relevant milestone.

Gallery

Image grid for site photos, references, product shots, or team snapshots. Default is a 3-up row; for tighter compositions use the .ppt-gallery--4 modifier. Each tile pairs a 4:3 photo (in the shared .placeholder-slot--superlight frame) with a short caption block: brand eyebrow, Poppins SemiBold title, optional Figtree Light detail.

Composition rules: all tiles share the same photo aspect ratio across the row — don't mix portrait and landscape on one slide. Caption rhythm is consistent across tiles: eyebrow (1 line) + title (1 line) + detail (1 line).

Count variants: default 3-up via .ppt-gallery; switch with data-gallery="2" for a more cinematic 2-up (photos automatically widen to 16:9) or .ppt-gallery--4 for a denser 4-up row. In 2-up, the larger photos earn the right to a slightly longer caption; in 4-up, trim every line to the minimum.

vs. Three key messages: Three key messages is for ideas (icon + headline + paragraph). Gallery is for places / things / people (photo + caption). The fact that they sit in a 3-column grid is incidental — the content type drives the choice.

Fullscreen image

Full-bleed image slide for section breaks, product hero moments, or location-anchored intros. Image fills the entire canvas; a soft dark gradient at the bottom lifts the overlay text out of any imagery. Eyebrow + headline sit bottom-left inside the safe-pad. No footer chrome — this is a "moment" slide that breaks the deck rhythm, not a content slide.

Composition rules: the image is the slide — choose photos with bottom space (sky, water, dark areas) so the overlay text reads cleanly. The gradient does the rest. Eyebrow + headline only; no body copy, no bullets, no logo chrome. The brand-coloured period on the headline remains the signature.

PPT translation: the image fills the slide background. The gradient is a single semi-transparent dark rectangle anchored to the bottom 65% (top-fade can be done with a gradient fill in PPT, or approximated with a stack of two rectangles). Eyebrow + headline are text boxes — no grouped frames needed.

Use sparingly: one or two fullscreen-image moments per deck, no more. Used too often, the format loses its punch and starts to feel decorative.

Diagram

Box-and-line primitive set for org charts, license mappings, sales flows, partner ecosystems, and any branching or many-to-many relationship. Reduces every diagram of this kind to four building blocks: boxes (five variants), groups (rounded containers with an eyebrow that hold multiple boxes), connectors (SVG lines, brand or neutral colour, dotted / solid / dashed, with a shared minimalist arrowhead), and labels (small muted text floating near a connector). Keep this vocabulary consistent across every diagram — whether it lands on the web, in a deck, in a document, or in a social card.

Five tile styles cover every diagram entity from primary anchor down to placeholder. Brand is the accent — one or two per diagram, used for the Advancis anchor or the active route. Neutral (default) and outline are the workhorses. Dotted flags an entity that's optional, on request, or planned for later — soft outline reads as available-but-not-active. Ghost is the lowest tier: legacy, deprecated, or out-of-scope items you still need to show without pulling the eye.

Limit per diagram. One brand tile (max two), plus any mix of neutral / outline / dotted / ghost in the supporting cast. More than two brand-filled tiles dilutes the emphasis — pick the single "now" entity and let the others stay quiet.

Two colours (brand · neutral) × three line styles (dotted · solid · dashed) × one shared minimalist arrowhead. Dotted is the default — round dots, ~2 CSS-pixel stroke, evenly spaced — quieter than a solid line and feels modern at slide- and screen-distance. Reach for solid when the connector is a hard contractual edge (Advancis → License Owner). Reach for dashed when the relationship is loose, future, or "see also" — even less commitment than dotted. Brand colour is reserved for the primary path the eye should follow; neutral handles everything else. Right-angle bends are fine (<polyline>); diagonals are fine too but keep them shallow. Avoid curves — diagram connectors don't curve.

Same connector at large scale, horizontal next to vertical. Both render the exact same elongated tip — no squashed-flat heads on long horizontals or pinched-tall ones on short verticals (the SVG container aspect-ratio is locked to its viewBox so user units map 1:1 in both axes). Note the small gap between the tip and the tile edge — the arrow points at the surface, not into it.

Group containers. .ppt-diagram-group wraps multiple boxes inside a larger rounded container with a centered eyebrow at the top. Use it when several boxes belong to the same conceptual bucket — "AOP Extension License", "AOP API License", "Onboarding & Evaluation". Position child boxes inside with absolute coordinates relative to the group's own box, same way as top-level boxes are positioned inside the diagram. Layer the group under connectors that cross into it — z-index handles this automatically.

Spacing & alignment. Always pin boxes to a shared baseline (top row at the same top, bottom row inside the group at the same top) — visual rhythm comes from the grid, not from manual fiddling. Use equal widths for boxes that play the same role in the diagram, and equal horizontal gaps between them. Vertical connectors look cleanest when they leave / land at the centre of the box's edge; route the return path on the opposite column rather than doubling back over the outgoing arrow.

Labels on connectors. .ppt-diagram-label is positioned absolutely with transform: translate(-50%, -50%), so the left / top coordinates point to the label's centre. Give it a white background so it sits cleanly on top of the line when it crosses one. Keep labels short (max two lines, no full sentences) — they describe what's flowing along the connector, not the connector itself.

Coordinate system. The diagram container locks to a 4:1 aspect-ratio and the SVG runs viewBox="0 0 400 100" with preserveAspectRatio="none". Matched aspects = 1 SVG x-unit and 1 SVG y-unit are the same number of CSS pixels, so arrow tips render identically on horizontal and vertical lines (a square viewBox would stretch user space unevenly and squash tips on horizontals). Boxes use left/top/width/height in % of the container; SVG coords map as x = left% × 4, y = top% — slight cognitive jump on x, worth it for proportional tips.

Export to PowerPoint. Every box becomes a Rectangle Rounded shape; every connector becomes a Connector with an arrow ending (Format Shape → Line → End Arrow + Dash Type → Round Dot for dotted). Group containers are larger rectangles with a transparent or 50% fill, sent to back, with a separate text box for the eyebrow. Stay on three corner radii max across the deck (small for boxes, medium for groups) — mixing five different radii looks accidental.

Avoid. Decorative gradients on boxes. Drop shadows on connectors. More than three brand-filled boxes in one diagram (loses its emphasis). Bidirectional arrows (←→) on the same connector — split into two if the flow genuinely runs both ways. Diagonal labels (rotated text always looks like a band-aid; restructure the layout instead).