Navigation
& heroes.
Headers, mega menus, breadcrumbs, and hero variants. Every nav exposes a primary CTA on the right.
- 03
- Header variants
- 01
- Mega menu
- 05
- Hero variants
- 01
- Breadcrumb
Header — desktop
AstryLogo size=md · left anchor
Primary links · center · hidden on mobile
Button · right anchor · always visible
Header — minimal
Used for long-form pages, blog posts, and documentation. No nav links — the only affordance is the wordmark and a back action.
Header — sticky · transparent → solid
Transparent at top. Solid bg fades in at 80 px. Backdrop-blur active throughout.
Hero-first marketing pages where the header should float above the gradient.
Mega menu
4-col grid: foundations, builders, resources, featured CTA.
mouseEnter on the nav item. mouseleave on the panel closes it.
bg-brand-soft icon tiles. Hover flips to solid brand bg.
Header — mobile
Burger triggers full-height drawer. Wordmark centered. Single CTA right.
Breadcrumb
Slash character. Each intermediate item is an anchor. Last item is plain text, heavier weight.
Product pages, docs, and any deeply nested content tree. Floats above the page title.
Hero — split with image
Embedded intelligence where work happens.
Astry embeds AI systems inside enterprise operations. We audit. We build. We ship.
50/50 grid on lg. Headline col stacks first on mobile.
4:3 aspect. AngleCorners at all four corners. bg-subtler wash.
Primary + ghost pair. Ghost carries rightIcon arrow.
Hero — centered, no image
A two-week diagnostic that turns operations into a build plan.
Fixed price. Written deliverables. Embedded engineers walk through your tools and write the spec for what's worth automating.
All elements center-aligned. Max-width constraint on headline and body.
Inline brand name strip below CTAs. No logos — pure typography.
Hero — full-bleed gradient
Operations Copilot is live.
An always-on agent that lives inside Slack, your CRM, and your inbox. Reads context, drafts replies, books meetings.
Reserved for product launches. Very loud — one per site max.
variant="inverse" (white bg / brand text). variant="inverse-ghost" for secondary.
White text at 100% and 80% opacity. No brand-blue period — period is white.
Hero — full-bleed brand blue
Operations Copilot is live.
An always-on agent that lives inside Slack, your CRM, and your inbox.
Solid bg-brand. All text is white or white/80. No shadows.
Astry mark at 200px. Positioned right, aligned to bottom of copy.
Hero — with stat strip
Operational uplift you can measure in months, not years.
- 3.4×
- Throughput uplift
- 62%
- Avg cost reduction
- 1.4s
- P95 latency
3-col grid separated by hairline dividers. Numbers in text-brand.
Outcomes or case-study pages. No CTA — the data does the work.