The Agento design system

Colours

• BrandbrandGradient end, links
• Brand 2brand-2Gradient start
• Brand softbrand-softTints, chips
• InkinkHeadings
• Ink 2ink-2Strong body
• MutedmutedBody text
• SubtlesubtleLabels, meta
• LinelineBorders
• Line 2line-2Inner dividers
• CanvascanvasPage background
• SurfacesurfaceCards
• Surface 2surface-2Insets
• Successaccent-greenStatus: done
• Purpleaccent-purpleGlows
• Orangeaccent-orangeAccents
• Brand gradientfrom-brand-2 to-brandNever a solid brand fill

Typography

• Display · Instrument SerifHand off the busywork
• Heading · Instrument SerifAgents that work inside your tools
• Title · Geist 600Approvals that scale
• Body · Geist 400Agents research, decide, and act inside the apps your team already uses.
• Label · Geist 600, uppercaseSection label

Shadows and radii

• shadow-card
• shadow-float

• rounded-xl · tiles
• rounded-2xl · inner cards
• rounded-3xl · cards
• rounded-4xl · panels

Buttons

Form fields

Chips and badges

• New
• Improved
• Needs approval
• Blocked
• Neutral

Icons

• bot
• workflow
• chart
• search
• mail
• calendar
• database
• shield
• user-lock
• flash
• target
• headset
• coins
• code
• layers
• book
• globe
• key
• lock
• eye
• plug
• sparkles
• check
• arrow-right

Sections 114

Every section in src/components/sections, with its description and the pages that use it. The list is generated at build time.

• AboutHero

  About page hero: the mission as a very large serif statement over a soft glow, a short intro, and a row of quick facts.

  Used on/about

• AboutStory

  Company story as a growth chart: one panel, a column per year split by hairlines.

  Used on/about

• AboutTeam

  Team grid: portrait (soft zoom on hover), name, role, and profile links.

  Used on/about

• AboutValues

  Values: four columns between hairlines, each with a numbered label, an icon, a title, and a short line. No cards.

  Used on/about

• AccessMatrix

  Split layout: heading and points on the left; a permissions matrix (agents × scopes) on the right.

  Used on/security

• AffiliateCalculator

  Earnings calculator.

  Used on/affiliates

• AffiliateHero

  Affiliate hero: headline, text, points, and the join button on the left; the commission rate as a large gradient figure on a card on the right.

  Used on/affiliates

• AffiliateSteps

  How the affiliate program works: three numbered steps joined by a hairline.

  Used on/affiliates

• ApiAuth

  Authentication and limits: the three security points on the left; the rate-limit table and a link to the full reference on the right.

  Used on/api

• ApiFeatures

  API features: a 3×2 grid between hairlines, each with an icon, title, line, and the code it maps to.

  Used on/api/home-2

• ApiQuickstart

  API quickstart: heading, tabbed code (cURL, JavaScript, Python), and the official SDKs as cards with their install command.

  Used on/api

• AuthorHero

  Author archive header: breadcrumbs, the author's photo, name, role, bio, profile links, and post count.

  Used on/blog/author/[author]

• BeforeAfter

  Before and after: each row sets the same job without Agento against the benefit with Agento.

  Used on/product/[slug]/solutions/[slug]

• BenefitsGrid

  Three (or more) benefits in columns separated by hairlines, under a section heading. No card framing.

  Used on/security

• BlogIndex

  Blog index and category archives: category tabs (links), the featured post on page one, the post grid, and pagination.

  Used on/blog/blog/author/[author]/blog/category/[category]/blog/tag/[tag]

• CapabilityList

  Split layout: a left-aligned heading on the left (sticky on desktop), a two-column list of capabilities on the right.

  Used on/product/[slug]

• CareersBenefits

  Why work here: benefit cards in a three-column grid.

  Used on/careers

• CareersPhotos

  Culture photos as a bento: the first photo large, two squares beside it, and a wide one below them. Two columns on phones.

  Used on/careers

• CareersRoles

  Open roles grouped by team, each a row linking to its post.

  Used on/careers

• CaseStudies

  Customer stories: one featured story (quote, photo, and a before → after time line) beside two smaller cards that each lead with a single result. Every card links to its full story page. Stories come from the `customers` content collection; the first by `order` is featured. Cards fade up once as they scroll in.

  Used on/

• ChangelogTeaser

  The latest changelog releases as rows: date, version, title, and tags, each linking to its entry.

  Used on/home-2

• ChangelogTimeline

  Changelog timeline, newest first, grouped by month.

  Used on/changelog

• Clients

  Client logos in two slow marquee rows (the first half of the list on top, the rest below), fading at the edges.

  Used on/

• ComingSoon

  Coming soon: section label, serif headline, a live countdown to `launch` (tiles), and an email capture with a success line.

  Used on/coming-soon

• ComparisonTable

  Plan comparison: grouped rows, one column per plan.

  Used on/pricing

• ContactOffices

  Office locations as three columns between hairlines: city in serif, country, address, and hours.

  Used on/contact

• ContactSection

  Contact form in a card, with direct contact options (sales, support, press) beside it. Demo submits go to /thank-you.

  Used on/contact

• Cta

  Final call to action: the one brand-gradient panel on the page. Layered light from the top, a fading dot texture, and social proof under the buttons.

  Used on//home-2

• CtaBanner

  Closing banner for inner pages.

  Used on/about/affiliates/api/careers/contact/customers/customers/[slug]/enterprise/help/integrations/integrations/[slug]/pricing/product/product/[slug]/security/showcase/solutions/solutions/[slug]/templates/templates/[slug]/use-cases/use-cases/[slug]

• CustomerFeatured

  The featured customer story on /customers.

  Used on/customers/solutions

• CustomerGrid

  Grid of customer story cards.

  Used on/customers/customers/[slug]

• DataTable

  A simple three-column table under a section heading (e.g. sub-processors). Hairline rows, no card.

  Used on/security

• DeveloperSection

  For developers: text and three points on the left; a dark code panel with tabs on the right.

  Used on/product

• DevHero

  Developer hero (dark pages).

  Used on/api/home-2

• DocsArticle

  A docs page.

  Used on/docs

• DocsLinks

  Docs quick links: the first docs pages as cards (section, title, description), with a link to all docs.

  Used on/home-2

• ElementsGuide

  Style guide.

  Used on/elements

• EnterpriseDeployment

  Deployment options: three cards; the featured one (e.g. VPC) is raised with a gradient ring and a badge.

  Used on/enterprise

• EnterpriseGovernance

  Governance controls: a 3×2 grid between hairlines (no cards), each with an icon, title, text, and small tags.

  Used on/enterprise

• EnterpriseHero

  Enterprise hero: pitch, three proof points, and client logos on the left; the "talk to sales" form card on the right.

  Used on/enterprise

• EnterpriseSupport

  Support and SLA tiers: a comparison table (rows × tiers) with the featured tier highlighted. Scrolls sideways on phones.

  Used on/enterprise

• Faq

  FAQ: a split layout. The heading and a support block (team photos, status, actions) stay pinned on the left (desktop) while the questions scroll on the right. The open question lifts into a soft card and the straight inset hairlines around it (drawn with ::after) fade away. Native <details>, so it works without JavaScript; open/close is animated where the browser supports animating ::details-content (see global.css).

  Used on/

• FaqGrid

  Questions and answers laid out in two columns, all visible (no accordion). For inner pages.

  Used on/affiliates/contact/enterprise/pricing/request-access/security/solutions/[slug]

• FeatureGrid

  The product features as a platform map.

  Used on/product/[slug]

• FeatureRows

  Scroll-driven feature tour. Desktop: the steps scroll in the left column while a sticky stage on the right swaps scenes. A rail runs exactly from the first dot to the last and fills as you scroll; each dot activates (with a small pop) the moment the fill reaches it, and that step becomes current. Phones: no sticky stage; each step shows its own scene inline. State lives in `data-current` / `data-reached` attributes and CSS variables, set by the script below.

  Used on/

• GettingStarted

  Time to value: four numbered steps across a hairline grid, each with how long it takes .

  Used on/product

• GovernanceCallout

  Governed by default.

  Used on/product

• HelpArticle

  A help article.

  Used on/help/[slug]

• HelpHero

  Help center hero: big serif question, a large search pill (opens the search palette over every article), and popular quick links.

  Used on/help

• HelpTopics

  Help topics as tiles (icon, name, line, article count, and the first articles), then popular articles as a list.

  Used on/help

• Hero

  Home hero: the serif headline and actions over the dotted field, with the live agent demo (prompt, current task, workflow, and activity feed).

  Used on/

• HowItWorks

  How it works: three steps (describe, connect, execute), each with its own small product visual, joined by the brand mark.

  Used on/

• IntegrationHero

  Integration hero.

  Used on/integrations/[slug]

• IntegrationRelated

  Related integrations under an app page: a heading and up to four app cards.

  Used on/integrations/[slug]

• Integrations

  Integrations, laid out on the page itself (no framing box): heading on top, then app cards on both sides joined to the Agento hub by lines in each app's colour (drawn by the script below from the live layout), sparkle dots behind the hub, and a footer with the stat, category chips that filter the apps, and a link to the directory. Phones and tablets: hub, cards in a grid, footer; no lines.

  Used on//home-2

• IntegrationsDirectory

  Integrations directory.

  Used on/integrations

• IntegrationSetup

  Setup and permissions side by side.

  Used on/integrations/[slug]

• IntegrationUses

  What you can automate with an app: numbered cards, each with a title and a line of detail.

  Used on/integrations/[slug]

• JobPost

  A job post.

  Used on/careers/[slug]

• LegalDocument

  One legal document.

  Used on/legal/[slug]

• LegalList

  Legal hub: every legal document as a row between hairlines, with its summary, last-updated date, and an arrow.

  Used on/legal

• Maintenance

  Maintenance: section label, serif headline, a card with the expected return time and the upgrade's progress steps, then status and support links.

  Used on/maintenance

• Metrics

  Chart geometry in percentages.

  Used on/

• Newsletter

  Newsletter sign-up (blog, changelog).

  Used on/blog/blog/[slug]/blog/author/[author]/blog/category/[category]/blog/tag/[tag]/changelog/resources/status

• NotFound

  404: a large faint "404" fading into the dotted field, the serif headline, two actions, and popular pages.

  Used on/404/500

• OnboardingFlow

  Onboarding as one card with steps: role → team size → tools → first template → done.

  Used on/onboarding

• PartnerApply

  Partner application: pitch and points on the left, the application form (with a success state) on the right.

  Used on/partners

• PartnerDirectory

  Partner directory: program chips (with counts) above partner cards with logo, program, region, and a line.

  Used on/partners

• PartnerTiers

  Partner programs: three cards; the featured one is raised with a gradient border and a badge.

  Used on/partners

• PlatformDiagram

  The platform as a left-to-right flow.

  Used on/product

• PostBody

  Blog post body.

  Used on/blog/[slug]

• PostHeader

  Blog post header: breadcrumbs (blog → category), the h1, the summary, author, date, reading time, and the cover.

  Used on/blog/[slug]

• PostRelated

  Related posts under a blog post: a heading and up to three post cards.

  Used on/blog/[slug]

• Pricing

  Pricing: three plan cards in a row. The featured plan sits in a brand-gradient frame with a "Most popular" strip on top and a soft brand wash inside; the others align with its inner card. A segmented toggle (and the "pay yearly" link under each price) switches billing; the script updates every price.

  Used on//pricing

• PricingUsage

  Usage and add-ons.

  Used on/pricing

• QuoteBand

  One customer quote, large and centred, with the author's photo and company.

  Used on/enterprise/product/product/[slug]/request-access/solutions/[slug]/templates/[slug]/use-cases/[slug]

• RequestAccess

  Request access, the whole page above the fold.

  Used on/request-access

• RequestSteps

  What happens after a request: numbered steps laid out on the page (no box), each with when it happens.

  Used on/request-access

• ResourceCards

  Two side-by-side action cards (e.g. request a report, report a vulnerability).

  Used on/security

• ResourceHub

  Resources hub.

  Used on/resources

• RunTimeline

  One task, shown through the work it produces.

  Used on/product

• Security

  Security: the one dark band on the page, composed around the product itself. A centred heading, then the live audit log as the centrepiece (filter tabs, rows that slide in from the top, a stats strip), and the controls in a hairline-separated row beneath it.

  Used on/

• ShowcaseCore

  Showcase core features: a grid of icon tiles with a label under each, set directly on the page.

  Used on/showcase

• ShowcaseDemos

  Showcase home demos.

  Used on/showcase

• ShowcaseHero

  Showcase hero: an editorial split (headline left, pitch and stats right), then the first home demo in front of two inner pages.

  Used on/showcase

• ShowcasePages

  Showcase inner pages: a framed stage on the soft surface holding a grid of page thumbnails, each with its group and title.

  Used on/showcase

• ShowcaseSupport

  Showcase support: support and documentation side by side, split by a hairline.

  Used on/showcase

• ShowcaseWhy

  Showcase "Why Agento": a bento of four cards, each with a product visual above its title.

  Used on/showcase

• SitemapIndex

  HTML sitemap: a jump bar of groups, then each group as a heading (icon, name, page count) over a multi-column link list.

  Used on/sitemap

• SolutionAgents

  Ready-made agents for a team.

  Used on/solutions/[slug]/templates/[slug]

• SolutionIndustries

  Solutions by industry.

  Used on/solutions

• SolutionScene

  Hero visual for a solution page.

  Used on/solutions/[slug]

• SolutionSizes

  Solutions by company size: plain rows between hairlines, each linking to its page (Enterprise to /enterprise).

  Used on/solutions

• SolutionStats

  Three headline results for a team, as large serif numbers between hairlines. No box: it reads as a band.

  Used on/about/solutions/[slug]/use-cases/[slug]

• SolutionTeams

  Solutions by team.

  Used on/solutions

• SolutionWorkflow

  One workflow, step by step, laid out on the page: nodes on a rail (horizontal on desktop, vertical on phones).

  Used on/solutions/[slug]

• StartupHero

  Startup home (Home 3).

  Used on/home-3

• StatusBoard

  Status page body.

  Used on/status

• StoryBody

  The full customer story: a sticky facts sidebar (industry, size, headquarters, team, connected apps) beside the Markdown body.

  Used on/customers/[slug]

• StoryCompare

  The same week of work before and with Agento, from a customer story's `before` / `after` task lists.

  Used on/customers/[slug]

• TemplateFlow

  The template's run as a vertical flow inside a framed stage: trigger → read → agent → (approval) → result.

  Used on/templates/[slug]

• TemplateGallery

  Templates gallery: a search field and team chips above a grid of template cards.

  Used on/templates

• TemplateHero

  Template hero: breadcrumbs, the agent's icon tile, name and description, chips for when it runs and who uses it, and actions.

  Used on/templates/[slug]

• TemplateIO

  Inputs, outputs, and the tools a template needs: two columns between hairlines, then the app tiles (linked to their integration pages).

  Used on/templates/[slug]

• ThankYou

  Confirmation after a form: a check mark, the h1 and message, three next steps, and a link home.

  Used on/thank-you

• TrustBadges

  Compliance certifications as small audit certificates in one panel, split by hairlines.

  Used on/enterprise/security

• UseCaseGrid

  Use cases grid with team filter chips (a small script hides cards that don't match).

  Used on/use-cases

• UseCaseProblem

  The problem a use case solves, shown as the work it creates today.

  Used on/use-cases/[slug]

• UseCaseRelated

  More use cases: a heading and three use-case cards.

  Used on/use-cases/[slug]

• UseCaseRun

  One agent run, step by step, in a framed stage.

  Used on/use-cases/[slug]

• UseCases

  Source icons stacked in the research tile's footer.

  Used on/

• UseCaseTemplate

  The template behind a use case: pitch on the left, the template card on the right (links to its page).

  Used on/use-cases/[slug]

• Waitlist

  Waitlist: centred hero with an email pill and social proof.

  Used on/waitlist

• WaitlistComing

  What's coming with the waitlisted product: three numbered cards.

  Used on/waitlist