Andes Path Style Guide
A single system of classes and tokens for the site. Every size, colour and spacing value comes from Webflow variables — nothing is hard-coded in px.
Headings
Six levels. The class sets the appearance, the tag sets the semantics. On mobile the sizes switch via the Mobile mode of the Typography collection.
64 / 36px
48 / 24px
40 / 22px
32 / 20px
24 / 18px
18 / 16px
Text sizes
Seven sizes instead of two dozen. The default body size is text-size-medium.
Weights and styles
Colours
The text-color-* and background-color-* classes are bound to the Andes Brand collection. Hard-coded hex values in classes are not allowed.
Spacing
Two classes: direction plus size — for example margin-bottom margin-medium. On mobile the larger steps scale down automatically.
Page structure
Every section follows the same pattern. No max-width or padding on custom classes.
padding-global
container-large
padding-section-large
[name]_component
Buttons
One base class with is- variants. This replaces ten near-identical button definitions found across the site.
Eyebrows, tags and dividers
The small monospace labels used above almost every section heading, plus pill tags and rules.
Cards
A single card component covers the capability, work, culture and layer cards that were each built separately before.
Training data that compounds, and models you can ship safely to a real fleet.
Read more →Systems integration, fleet management and the operator experience behind it.
Read more →OTA updates, CI/CD, logs and replay — the backbone that keeps releases safe.
Read more →Pods own the outcome, not the ticket queue.
We work in your timezone and in your repo.
Every engagement ends in something running.
Form elements
The site had no input styling at all — fields fell back to Webflow defaults. These classes cover the contact and lead-gen forms.
Quotes, stats and media
Testimonials, metrics and image frames — each previously rebuilt per page.
They took the least-proven part of our roadmap and turned it into something we now run in production every day.
Rich text
Used for blog posts, case studies and the privacy page. One wrapper class styles every nested tag, so CMS content never needs classes of its own.
Why the off-robot stack matters
Most robotics teams solve the hard control problem first and leave everything above it for later. That later usually arrives as a deadline.
- Fleet data that survives a hardware revision
- Operator tooling people actually open
- Release pipelines that fail loudly, not silently
The robot is maybe a third of the problem. The rest is software nobody demos.
Read more in the SRE playbook.
Accordion and tabs
The FAQ accordion from the playbook page and the category tabs from the blog, rebuilt as reusable components.
Usually within two weeks. The Pathfinding Sprint exists so neither side commits to a long engagement before the shape of the work is clear.
Tab panel content sits here. The active state is a single is-active combo on the link.
Navigation, team and footer
Site chrome and the remaining repeated blocks: the header, the team roster, the client logo strip and the footer.
Section patterns
Repeating page structures: the photo hero, numbered steps, list rows, meta lines and video frames.
The same stack, pointed at yours
Five industries where we ship production-grade off-robot software.
Two to four weeks to find the real shape of the problem.
A senior pod joins your team and starts shipping.
We run and maintain what we built, on your SLAs.
Naming rules
What every new class on the site has to comply with.