Services
Core service presentation surfaces. A homepage overview that lets buyers identify fit at a glance, and a process timeline that grounds delivery in tangible stages.
Homepage Services
P Purpose
Primary services section for the homepage. Full-width horizontal layout — each pillar gets a row with info pinned left and service items in a clean list to the right. Designed for mid-market buyers scanning for "do they do what I need?"
W When to Use
- Homepage or broad overview pages as the primary "what we do" section
- Between hero + client logos and case studies / testimonials
- Not for individual service pages — use SVC-E2E-01 there for delivery process detail
L Layout Behaviour
2-column grid: 280px (sticky info left) + 1fr (scrolling service list right). Collapses to 1 column at 900px. Pillars separated by border-top. Sticky column at top: var(--sp-24). Service list items: 32px number | name + desc | arrow rows with dividers. Hover: number red, content slides right 6px, arrow 4px.
I Required Inputs
- overline — mono label, e.g. "What we do"
- headline — supports HTML for line breaks
- desc — 1–2 sentence overview, max-width 600px
- pillars[] — min 2; each: label, name, description, ctaLabel, ctaHref, items (5 per pillar with number, name, desc)
! Do Not
- Use icons on pillars — typographic hierarchy only, no decorative elements
- Box or card the service list — open items with dividers only
- Use on individual service pages — this is a high-level overview component
- Put more than 5 items per pillar — list breaks rhythm
- Use more than 3 pillars on a single page
V Variants
None — single layout. Pillar content is customized via props per page.
F Typical Page Flow
- After: Hero statement, client logos
- Before: Case studies, testimonials, or CTA ending
- Homepage: Hero → Logos → Services → Case Studies → CTA
Strategy through engineering.
One partner, end to end.
Two practices, unified by the TriStorm methodology. We take mid-market companies from agentic readiness to production-grade AI systems.
Consulting
Map where you are, design where you're going, and restructure how your organization works with agents.
Explore consultingEngineering
Design, build, and ship production-grade agent systems — from single agents to multi-agent networks.
Explore engineeringEnd-to-End Process
P Purpose
Explains the full delivery process for a specific service, from discovery to production. Maps to TriStorm's three phases — Storm → Structure → Scale — expanded into 5 concrete stages. Buyers understand how the engagement works and what tangible deliverables they receive at each step.
W When to Use
- Individual service pages where the buyer needs to understand delivery mechanics
- Any page where "how does an engagement work?" is a key objection to close
- Not for the homepage — use SVC-HOME-01 for the high-level overview
L Layout Behaviour
Background: var(--v-snow). Centered header (overline, headline, subline). 5-column card grid with phase band above. Phase color coding: discover = blue, design = purple, deliver = red. Each card: white bg, 1px border, 3px colored bottom border. Collapses to 2-col at 1000px, 1-col at 600px.
I Required Inputs
- overline — mono label, e.g. "Methodology"
- headline — supports HTML for line breaks
- subline — 1–2 sentence process summary
- steps[] — exactly 5 steps; each: number ("01"–"05"), title, deliverables (2–4 strings), phase ("discover" | "design" | "deliver")
! Do Not
- Invent step names that don't reflect actual delivery — steps must match reality
- Skip deliverables — tangible outputs are what justify each step to buyers
- Use on the homepage — use SVC-HOME-01 for the overview
- Change phase assignments without updating the phase band color accordingly
- Use fewer than 2 or more than 4 deliverables per step
V Variants
- Standard (Astro) — phase band, 5-step card grid, snow background. Shown below
- Extended (HTML source) — adds phase-step hover coupling via CSS
:has(), method tag top-right, and dark footer strip with CTA. Adapt for specific service pages
F Typical Page Flow
- After: Hero, problem statement, or capabilities section
- Before: Case studies, FAQ, or CTA ending
- Central anchor on service-detail pages — owns the "how we work" space
TriStorm — our end-to-end process
Every engagement runs through these five steps. No surprises, no scope creep.
- Workflow audit
- Automation candidates ranked
- Scope brief
- Architecture proposal
- Eval criteria
- Fixed-price quote
- Working prototype
- Eval suite
- Integration tests
- Production rollout
- Operator training
- Runbook
- 30-day monitoring
- Iteration cycle 1
- Handoff