This page is a living reference for design tokens and component primitives used in the Harri theme. It is noindexed and intended for developer / designer use only. Panels are grouped in the sidebar: Foundations, Primitives, Content blocks, Layout & composition, Section blocks, and Heroes.
Foundations
--color-bg-page --color-bg-surface --color-text --color-text-muted --color-border --color-link --color-bg-cta --color-text-on-cta --color-accent-a --color-accent-b --color-eyebrow --font-size-xs --font-size-sm --font-size-base --font-size-md --font-size-lg --font-size-xl --font-size-2xl --font-size-3xl --font-size-4xl --font-weight-regular --font-weight-medium --font-weight-semibold --font-weight-bold --font-weight-black --space-1 --space-2 --space-3 --space-4 --space-5 --space-6 --space-8 --space-10 --space-12 --space-16 --space-20 --space-24 --radius-sm --radius-md --radius-lg --radius-xl --radius-pill --radius-round --shadow-sm--shadow-md--shadow-lg--shadow-glow-cta-soft--shadow-glow-cta--shadow-glow-cta-peakRendered as non-navigating <button> elements for demo purposes. Visual variants × size variants matrix.
The .btn__icon wrapper scales to 1em (the button's font-size). The base .btn gap provides icon-to-label spacing automatically.
A pure motion modifier — a subtle breathing scale, no fill or glow change. Composes onto any variant. Add it deliberately (currently only the header CTA = .btn--gradient .btn--pulse). Suppressed by prefers-reduced-motion.
Eyebrow label — .eyebrow
Eyebrow muted — .eyebrow.eyebrow--muted
Demo samples are rendered on non-heading elements (<p>, <div>) so they do not create stray heading-level nodes in the document outline.
Display heading — .h-display
Section heading — .h-section
Eyebrow above display
Display with eyebrow
Eyebrow above section
Section with eyebrow
Visible outlines are added by the .sg-container-demo class in styleguide.css — they are not part of the component.
Each variant is shown as a labelled block so padding and background differences are visible. The .sg-section-demo class adds an identifying outline.
.section — base vertical padding (--space-24)
.section.section--first — reduced padding-block-start (--space-12)
.section.section--tight — tight padding-block (--space-12)
Placeholder image is a self-contained SVG data-URI (no external request). In production the src is supplied by ACF and rendered via wp_get_attachment_image().
Primitives
Atomic status/label pill rendered through the real badge.css component. Renders in natural case (unlike the uppercase inline .badge emphasis chips). Tones, an optional leading dot, an optional inline icon, the framed-icon "app chip" variant, alignment and vertical spacing are all shown.
Atomic decorative visual marker rendered through the real glyph.css component. Two modes: an icon inside a gradient rounded tile with glow, or a single large gradient TEXT letter. Both share a per-accent gradient (teal / coral / blue / purple). The whole marker is aria-hidden (decorative).
Standalone teal-checkmark list block rendered through the real check-list.css component (the same shared primitive text_content uses). Two layouts: the default vertical stack and the compact horizontal inline variant.
Atomic static conversation transcript rendered through the real chat.css component — a dark rounded panel of alternating bubbles: Salli on the left (in) and the user on the right (out, teal gradient). JS-free; distinct from the interactive salli_chat widget.
Hi! I noticed Saturday dinner is short two servers. Want me to fill it?
Yes please — keep it within budget.
Done. I offered the shifts to two available servers and stayed 3% under your labour target.
Perfect, thanks Salli.
Standalone separator block — a subtle centered teal-gradient hairline dropped between blocks (add where needed / remove to hide). Two widths.
Contained
Full width
Stats block rendered through the real stats.css component. Two style variants shown. Headline uses <p> (NOT <h2>) to preserve the page's single-h1 outline. Count-up animation runs in the guide (intentional). Gradient on .stat__num comes entirely from the reused .text-accent-gradient utility.
By the numbers
Trusted by hospitality teams worldwide
Platform performance
Numbers that speak for themselves
Content blocks
Text Content block (eyebrow + headline + rich body + CTA buttons, no media) rendered through the real text-content.css component. Headline uses <p> (NOT <h2>) to preserve the page's single-h1 outline — .h-section provides the visual treatment.
Scheduling
Build smarter schedules, faster
Harri's AI-powered scheduling engine takes the guesswork out of labour management — optimising shifts against demand forecasts, compliance rules, and team availability in minutes, not hours.
Flip Card block (a single CSS-3D card contrasting "the old way" front face with "the Harri way" back face) rendered through the real flip-card.css component. Hover or tap flips the card; both faces are always in the DOM for screen readers.
The old way Managers spend hours every week juggling spreadsheets, availability, and last-minute call-outs.
See the Harri waySalli builds a compliant, demand-matched schedule in seconds — managers just review and publish.
The old way Great applicants go cold while roles sit in an inbox waiting for a callback.
See the Harri waySalli screens, ranks, and calls applicants automatically — the best candidates are booked before lunch.
Compare Table block (a generic comparison of columns across grouped feature rows) rendered through the real compare-table.css component. Column accents cycle by position; the "popular" column is highlighted by a non-empty badge; the table scrolls horizontally rather than stacking on narrow screens.
| Compare plans Everything scales with your operation | Base Everything to get started Choose Base | Most Popular Core For growing teams Choose Core | Perform Advanced automation Choose Perform | Enterprise Custom scale Contact sales |
|---|---|---|---|---|
| Hiring | ||||
| Job board posting 50+ boards | Included | Included | Included | Included |
| AI screening calls Salli calls and screens applicants automatically, then ranks the best fits. | Not included | Included | Included | Not included |
| Scheduling | ||||
| Auto-scheduling | Not included | Not included | Included | Included |
| Compliance guardrails | Not included | Included | Included | Included |
Image Card block (one atomic photo card with a coloured gradient frame, optional overlay bar, title, subtitle, and tag) rendered through the real image-card.css component. The container block grids multiple cards on real pages; here they stack.
Cut scheduling time by 80% across 38 sites
Fine diningWhole card is one keyboard / pointer target
Form block (atomic lead capture) rendered through the real form-block.css and hubspot-form.css components. The native field sets render the HubSpot form partial live; submission is inert until HubSpot Settings are configured in wp-admin. The HubSpot-by-reference mode renders only its integration hook.
Editors supply a HubSpot form GUID; the block stores it and renders only the hook element below. The HubSpot renderer attaches on integration — nothing is fetched or rendered until then.
HubSpot form 1a2b3c4d-5e6f-7a8b-9c0d-1e2f3a4b5c6d — renders once HubSpot is connected.
Layout & composition
Layout primitive that arranges a curated set of child blocks into a grid; renders through the real container.css component, with hand-placed Text Content child tiles showing three of its column layouts.
Hire
Source faster
Post, screen, and schedule interviews from one connected pipeline.
Manage
Schedule smarter
Build compliant rotas against demand in minutes, not hours.
Comply
Stay protected
Flag and resolve labour-rule violations before they publish.
Meet the agents
One AI teammate for every shift
This lead tile spans the full width; the two tiles below share a row.
Salli
Answers, instantly
Conversational scheduling and coverage for your team.
Carri
Hires, handled
Screens applicants and books interviews automatically.
Add-ons
Extend your bundle
Hero tile spans the full row above the uneven pair below.
Wider column (1.55fr)
Salli for Hiring
The wider spotlight column carries the primary add-on.
Narrower column (1fr)
LMS
The narrower column carries the secondary add-on.
Two-column composition wrapper; renders through the real panel.css component, showing the split and single grid modes plus the glass, subtle-surface, and accent variants. Text Content children are hand-placed in place of harri_render_panel_blocks().
Workforce Management
Everything in one place
Scheduling, time, and compliance under a single roof.
Built for hospitality
Made for the pace
Right column of the 50/50 split composition.
Single column
One full-width bubble
When only one side has content the grid collapses to a single full-width column inside the same glass surface.
Subtle
Quiet neutral surface
Hairline border, light frost, no gradient or glow.
Platform pillars
Reads as one system
The same split layout on the calmer surface variant.
Engage 360
Purple accent tint
The accent recolours the border, background, and eyebrow.
Campaigns
One unlocked bundle
Right column of the accented split composition.
WAI-ARIA tab set built by the reusable tabs partial; renders through the real tabs.css component and is live (JS-wired) in the guide, showing the folder, underline, and pills style variants.
Talent Acquisition
Hire the right people, faster
Sourcing, screening, and onboarding in one connected pipeline.
Workforce Management
Run every shift on time
Scheduling, time and attendance, and compliance in one platform.
Engage 360
Keep teams connected
Campaigns, rewards, and recognition that lift retention.
Talent Acquisition
Hire the right people, faster
Sourcing, screening, and onboarding in one connected pipeline.
Workforce Management
Run every shift on time
Scheduling, time and attendance, and compliance in one platform.
Engage 360
Keep teams connected
Campaigns, rewards, and recognition that lift retention.
Talent Acquisition
Hire the right people, faster
Sourcing, screening, and onboarding in one connected pipeline.
Workforce Management
Run every shift on time
Scheduling, time and attendance, and compliance in one platform.
Engage 360
Keep teams connected
Campaigns, rewards, and recognition that lift retention.
Section blocks
Social-proof marquee block rendered through the real logo-bar.css component. Text-name fallback logos — no images required. The marquee animates in the guide (intentional). Duplicate set is aria-hidden per item; reduced-motion collapses to a static centred row.
Feature Stack block rendered through the real feature-stack.css component. Three placeholder cards shown (text-only, dashed-placeholder visuals). The sticky pin/stack needs real scroll length to demonstrate; within this panel the cards render as a stacked list. The rotating accent backgrounds (teal, blue, purple) cycle through the first three nth-child positions.
Platform Features
Everything your team needs, in one place
Harri brings scheduling, hiring, and compliance together in a single platform built for the pace of hospitality.
Feature 01
Build optimised schedules against demand forecasts, compliance rules, and team availability — in minutes, not hours.
SchedulingFeature 02
Post to 100+ job boards, screen applicants automatically, and onboard digitally — without leaving Harri.
HiringFeature 03
Stay ahead of labour law changes with automated compliance checks, audit trails, and real-time alerts.
ComplianceSingle centered customer quote block rendered through the real testimonial.css component. Initials-avatar fallback shown (author "Claire Andrew" → "CA"). The <em> accent in the quote exercises .text-accent-gradient on blockquote content. Quote-mark gradient comes from the reused .text-accent-gradient utility — not redefined in testimonial.css.
What our customers say
Real results for real teams
Harri has completely transformed how we manage our front-of-house team. Scheduling used to take hours — now it takes minutes.
Case Studies carousel block rendered through the real case-studies.css component. Three hardcoded sample cards shown — illustrative only (no live query; real block pulls hand-picked case_study posts via the ACF items field). Rotating gradient backgrounds cycle through the first three nth-child positions. The prev/next controls are functional (case-studies.js wires them to the scroll track). Section headline uses <p> (NOT <h2>) to preserve the page's single-h1 outline.
Customer Stories
See how hospitality teams thrive with Harri
Agent Explorer block (Salli "How she does it") rendered through the real agent-explorer.css component. Header, 3 value-prop columns, and the accessible tabbed explorer -- 5 canned mini "screens" (Sales / Labor / Team / Warnings / Ask) switched by a staggered chip pile. Tab interaction is live -- click a chip or use arrow keys (all 4 directions -- the chip pile is staggered/vertical).
How she does it
Sales snapshots, labor metrics, and schedule health -- surfaced instantly, without leaving Harri.
Salli doesn't just report -- it messages team members, triggers schedule fixes, and runs tasks for you.
Salli remembers your preferences, adapts to the page you're on, and picks up where you left off.
Maya R. · 4m ago
Picked up the Friday closing shift 🎉
Devin J. · 22m ago
Confirmed availability for next week.
Salli · just now
Sent the updated schedule to all 14 staff.
One shift posted inside the 14-day notice window.
Shift Maya's hours to Devin — 0 violations.
You're on the Schedule page. Try one of these:
Whether you're reviewing sales data and want to message your top performer, or checking schedule warnings and need to update time records -- Salli coordinates its specialized agents internally and returns one clean response.
A standalone interactive operator tool (Operator Toolkit): six range inputs drive a live "estimated annual savings" figure with a breakdown and a today-vs-Harri comparison bar. The server renders the initial result so it is meaningful without JS; roi-calculator.js recomputes on input (count-up animation, reduced-motion safe). This catalog entry is the real block markup, so it is fully interactive here. NOTE: the "Average hourly wage" input is displayed for context but does not feed the formula (matching the prototype).
Estimated annual savings with Harri
$20,489
recovered every year across turnover and admin
Annual people cost: today vs. with Harri
A standalone interactive operator tool (Operator Toolkit): a searchable state combobox drives a panel of labor-rule cards (predictive scheduling, minimum wage, overtime, meal/rest breaks, other) + a "scheduling complexity" meter, built from inc/compliance-data.php. This catalog entry uses a small three-state subset so it is fully interactive here. LEGAL GATE: the block renders a visible amber banner while data_status is "sample" — the dataset is unvetted prototype data and must not go on a public page until Legal signs off.
Sample data — internal preview. Directional prototype data pending legal review; not legal advice.
Choose a state above to see its requirements.
Requirements on record
Scheduling complexity
—
Educational summary only; not legal advice. Confirm current requirements with your state labor agency or counsel.
Heroes
Three Hero block variants: with-media CTA buttons, centered simple CTA buttons, and the email-capture form mode.
Workforce Management
The smarter way to manage hospitality
Harri unifies scheduling, hiring, and compliance in a single platform built for hospitality teams.
Now available in the UK
Hospitality HR, simplified
From hiring to payroll, Harri keeps your team connected and compliant — wherever they work.
Rendered when the editor selects "Email capture form" in the Action mode toggle. The JS scroll-and-prefill behaviour is inactive here (no .hs-form target on this page) — the form renders correctly as static HTML.
Workforce Management
The smarter way to manage hospitality
Harri unifies scheduling, hiring, and compliance in a single platform built for hospitality teams.
Hero Cinematic block rendered through the real hero-cinematic.css component, shown in its static final-framed state (no scroll track here -- see the note above). On the live page it scales down toward scale_to and the frame fades in as the visitor scrolls through an extra viewport of scroll track; the video never stops. No video/frame image uploaded yet -- placeholder background + placeholder frame chrome shown.
AGENTIC AI One-Click Schedule
Salli reads demand, availability, and compliance, then builds the optimal schedule in one click. You just approve.
