Rigor
Evidence before instinct
We pressure-test every creative bet against real signal. Gut feeling opens the door, but the data decides who walks through it.
We pressure-test every creative bet against real signal. Gut feeling opens the door, but the data decides who walks through it.
From the first scribble to the shipped frame, the same studio carries the work. No handoffs that bleed intent or lose the thread.
Systems, tokens, and documentation travel with the deliverable. Your team should never need ours to keep the work alive.
The strongest version is usually the one with the most cut away. We chase restraint long after the brief says we can stop.
No jargon walls, no theater. We name the trade-offs out loud and let the working prototype settle the argument.
Every surface answers to one logic. We design the rules, not just the artifacts, so the next thousand assets draw themselves.
Studio values laid out with oversized ghost numerals, titles, descriptions and keywords.
Operating-principles section with a split header (large heading left, vertical divider, eyebrow badge right) above a two-column list of values, each marked with an oversized ghost numeral, a keyword, a title, and a description.
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/agency12?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/agency12?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/agency12.tsx, the badge6 component it uses for the eyebrow label, and its dependencies.
The installed file exports agency12Demo alongside the block: the exact props behind the preview above. Spread it to get a working values section in one line.
import { Agency12, agency12Demo } from "@/components/beste/block/agency12";
export default function AboutPage() {
return <Agency12 {...agency12Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { Agency12 } from "@/components/beste/block/agency12";
export default function AboutPage() {
return (
<Agency12
label="Operating Principles"
heading="The principles that hold every engagement together."
values={[
{
keyword: "Rigor",
title: "Evidence before instinct",
description: "We pressure-test every creative bet against real signal.",
},
{
keyword: "Restraint",
title: "Edit until it hurts",
description: "The strongest version is usually the one with the most cut away.",
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
label | string | – | Eyebrow label rendered via Badge6, right-aligned in the header |
heading | string | – | Large section heading, left-aligned in the header |
values | ValueItem[] | [] | Value entries rendered in the numbered grid |
className | string | – | Extra classes for the outer <section> |
type ValueItem = { title: string; description: string; keyword: string };md:grid-cols-[1fr_auto_1fr] grid with a hairline vertical divider (w-px bg-border) between the heading and the label column; the divider is hidden below md.01, 02, ...) is generated from its array index with String(index + 1).padStart(2, "0"), not from a field on the data, so reordering values renumbers automatically.select-none and starts at text-muted-foreground/30; hovering the value's article (via the group/agency12 class) brightens it to text-primary/40 as a subtle interactive cue.keyword renders above title as a small bold uppercase label in text-primary, functioning as a category tag distinct from the title itself.md:grid-cols-2; it does not adapt column count to values.length, so an odd number of entries leaves the last row with one item.