Landing pages

Landing bounds its content to the shared landing width and separates sections. Product pages own their headings, links, and composition. This centered example uses palette="neutral" for its action and size="compact" for its heading.

Centered compact hero

A centered, compact introduction with actions below it.

Explore surface controls

Official product mark

Default hero

Existing start alignment and display size remain the defaults.

Band content keeps the same inline edges as the bounded hero above it.

Muted sections share the same content edges.

Contrast sections share the same content edges.

Tinted sections share the same content edges.

eyebrowStyle="brand" uses the shared responsive product-name scale and a 32px icon. Labels keep the compact default. Custom hero compositions can use the helia-hero__brand class on their identity row; --helia-hero-brand-ink sets its foreground when outside a shared contrast surface.

The eyebrowIcon URL replaces the decorative accent dot with a product mark. The eyebrow text supplies its accessible name.

Surface controls

Switch the outer page between light and dark. The ink card retains readable text, links, actions, and keyboard focus in either theme.

Ink surface

A complete dark surface

Body text and a prose link use this surface’s foreground.

A nested ink card has a visible boundary.

Primary action

Secondary action

Ghost action

Window transcript

The optional frame="window" keeps transcript and commands-only copy behavior. The dots are decorative; the title belongs to the product using the terminal.

Build a model

        $
        tool build model
      
        
        Inspect the generated files before integrating them.
      

$ tool build model Inspect the generated files before integrating them.

Inspect results

        $
        tool inspect results
      

$ tool inspect results

Contrast band controls

Keep control surfaces readable

A dark band supplies its own text, card and button colors in either page theme. Compare surface choices.

A nested card remains readable.

Read the surface examples

A nested ink card has a visible boundary.

Primary action

Secondary action

Neutral product hero

Build with clear choices

v1.0

Neutral emphasis leaves semantic success and terminal colors unchanged.

Get started

Explore examples

Section-sized quickstart with fixed terminal tone

size="section" keeps supporting content on the section heading scale. The media slot lets a window terminal retain its own frame.

heliaAOT · Ahead-of-time compiler

Keep the command readable

Read the setup guide before running the command.

Build

        $
        tool build model
      

$ tool build model