No overnight pivots, no chasing trends. Just one small room of designers shipping work we still stand behind years later. These are the markers that shaped how we think.
Auralis started as a side practice between two type nerds who kept rejecting good briefs for the right ones. The first wordmark we drew is still framed above the printer.
We stripped color from our own identity and never looked back. Constraint became the house style: structure first, contrast second, decoration almost never.
A publishing client signed for a year and we hired three. We learned to write process down, to argue in the open, and to protect the slow hours that make sharp work.
Our practice shifted from screens to scaffolding. We began handing clients living design systems, not flat comps, and watched our work outlast the projects that birthed it.
Eleven people, no growth targets, a waitlist we are comfortable with. The plan for the next decade looks a lot like the last one: fewer clients, deeper work.
About section with a header and a vertical timeline of milestones on a left rail, each marked by a year, title, and description.
About section with a header above a vertical timeline of milestones on a left rail, each entry marked by a year, a title, and a description, closing with a CTA button below the full timeline.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://ui.beste.co/r/about62?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/about62?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/about62.tsx, the badge7 component it uses for the eyebrow label, the button12 component it uses for the closing CTA, and its dependencies.
The installed file exports about62Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { About62, about62Demo } from "@/components/beste/block/about62";
export default function Page() {
return <About62 {...about62Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { About62 } from "@/components/beste/block/about62";
export default function Page() {
return (
<About62
badge={{ label: "The road so far" }}
heading="A decade of quiet, <strong>deliberate work.</strong>"
description="No overnight pivots, no chasing trends. Just one small room of designers."
button={{ label: "Read the full studio story", href: "/story" }}
milestones={[
{ year: "2014", title: "Two desks and a borrowed kettle", description: "Auralis started as a side practice between two type nerds." },
{ year: "2019", title: "First retainer, first real team", description: "A publishing client signed for a year and we hired three." },
{ year: "2025", title: "Small on purpose, still", description: "Eleven people, no growth targets, a waitlist we are comfortable with." },
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string } | – | Eyebrow text rendered in a Badge7 |
heading | string | – | Section heading; supports inline HTML (<strong>) |
description | string | – | Supporting paragraph under the heading |
button | ActionButton | – | Closing CTA rendered as a Button12 below the timeline |
milestones | About62Milestone[] | [] | Ordered timeline entries |
className | string | – | Extra classes for the outer <section> |
type ActionButton = { label: string; href: string };
type About62Milestone = { year: string; title: string; description: string };<ol>/<li> list (not <div>s), fitting for chronologically ordered milestones, with a left rail (border-l) and a small dot marker (absolute -left-[5px]) per entry rather than a numbered badge.last:pb-0) so the rail doesn't trail empty space after the final entry.button is rendered below the entire timeline, not inline with the header, and uses Button12 with no tone override (its default styling), unlike about60's outline-tone CTA.max-w-5xl) throughout; there is no alternating left/right timeline arrangement.about3
Two-column layout with company stats on the left and a vertical timeline of milestones on the right. Ideal for company history and growth stories.
about17
Vertical list of awards and accolades with icons, titles, organizations, and years. Ideal for press and credibility sections.
about13
Asymmetric layout with company story and image on the left, and a vertical list of company details on the right. Great for press and investor pages.
about59
Centered parenthetical eyebrow and a large statement heading, followed by a three-up row of icon pillars pairing a circular icon with a title and one-line description.