Skip to content
SloplessTry the picker

Hero library · interactive

Interactive terminal

hero.interactive-terminal: any design can use this hero. It suits the styles below; pairing it with another style makes the picker warn about a clash.

Rule
Copy in 1–5 (mono eyebrow, headline, subhead, CTA, install line); a tall terminal window in 6–12 on surfaceAlt: a ruled title bar with the path, 4–7 mono prompt/output rows that type themselves, and a block cursor in the accent.
Slots
eyebrow, headline, subhead, cta, meta, caption, items[4..7]
Grid
copy 1-5 · terminal 6-12
Notes
Lines type in once on load (20–35 ms per character), then the prompt accepts a few real commands (help, install, docs, pricing) that print short answers or navigate. Reduced motion: render all lines at once. The terminal is an aria-live="polite" region; the copy column alone must make sense without it.

Do

  • Draw a tall terminal window in 6–12: surfaceAlt fill, border, a ruled title bar with the path, then 4–7 mono rows at body size and a block cursor in the accent.
  • Each row: a bold prompt or marker, then the command or its output.
  • Type the rows in once on load, then accept 3–5 real commands (help, install, docs, pricing).
  • Put the real install command as a mono meta line under the CTA so it can be copied without the terminal.

Don't

  • Don't make the terminal the only place information lives.
  • Don't loop the typing or fake errors.
  • Don't use neon green on black unless the style's palette is exactly that.

Phone width

  • Copy first, then the terminal at full width with each row kept on one line (marker and command side by side, wrapping only inside the command); disable input on touch (static lines).

Live, in 3 styles it suits

In Terminal Mono

hero.interactive-terminal · hero

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Booking projects from June 2026

Corvid Robotics — identity

2 weeks

Discovery sprint

1 day

Positioning workshop

8 weeks

Identity design

10 weeks

Website

4 weeks

Launch support

Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Booking projects from June 2026

Corvid Robotics — identity

2 weeks

Discovery sprint

1 day

Positioning workshop

8 weeks

Identity design

10 weeks

Website

4 weeks

Launch support

Phone, 390 px

In Bento Tech

hero.interactive-terminal · hero

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Booking projects from June 2026

Corvid Robotics — identity

2 weeks

Discovery sprint

1 day

Positioning workshop

8 weeks

Identity design

10 weeks

Website

4 weeks

Launch support

Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Booking projects from June 2026

Corvid Robotics — identity

2 weeks

Discovery sprint

1 day

Positioning workshop

8 weeks

Identity design

10 weeks

Website

4 weeks

Launch support

Phone, 390 px

In Neo-grotesk Minimal

hero.interactive-terminal · hero

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Booking projects from June 2026

Corvid Robotics — identity

2 weeks

Discovery sprint

1 day

Positioning workshop

8 weeks

Identity design

10 weeks

Website

4 weeks

Launch support

Desktop

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project

Booking projects from June 2026

Corvid Robotics — identity

2 weeks

Discovery sprint

1 day

Positioning workshop

8 weeks

Identity design

10 weeks

Website

4 weeks

Launch support

Phone, 390 px