Brand system · v0.4

The system behind carbn.sh.

Every token, every primitive, every motion curve that shipped the surface. Use this page as the source of truth when extending any carbn-branded artefact.

01Foundations
02Elements
03Motion
04Iconography
05Patterns
06Voice

01 · Foundations

Surface, type, space.

Three systems carry the load: a monochromatic void palette, a single type family in two voices, and a strict 4-pixel spacing grid. Everything else composes from these.

Logo

clearspace: 50% of mark height on all sides

Mark · square96px

Default product mark. Scales from 16px to any size; SVG-based.

carbn.sh

Mark + wordmarklockup

Primary horizontal lockup. Nav, footer, OG images.

Scale waterfall16 → 64

Mark stays legible at 16px. Below that, use a square dot.

Colors · the void theme

15 tokens · no accent hue

void#000000

Root background. Pure black.

void-1#0A0A0A

Elevated base for rare contrast.

glass-12%

Whisper surface.

glass-23%

Standard card surface.

glass-35%

Elevated card surface.

glass-48%

Hover / active state.

line-16%

Whisper border — default card outline.

line-210%

Standard border — delineated surfaces.

line-316%

Emphasis border — hover, focus.

fg98%

Text primary · headings, display.

fg-272%

Text secondary · body, ambient.

fg-348%

Text tertiary · labels, captions.

fg-428%

Text quaternary · disabled, footnotes.

signal-live#4ADE80

Live / ready indicator.

signal-focus40%

Keyboard focus ring.

Typography · Inter + JetBrains Mono

Display + Variable + Mono · three families, one voice

display-xl96px · 96px600 · -0.04emdisplay

Inspect.

display-lg72px · 76px600 · -0.035emdisplay

Extract the component.

display-md56px · 60px600 · -0.03emdisplay

The deep dive.

heading-lg40px · 48px600 · -0.025emdisplay

Headless Traversal Engine

heading-md28px · 36px600 · -0.02emdisplay

Clean Code Inspector

heading-sm20px · 28px500 · -0.015emdisplay

Map every element

body-lg18px · 28px400 · -0.011emsans

A headless traversal engine for the open web. Maps, componentizes, and ships production-ready blocks.

body-md15px · 24px400 · -0.011emsans

Crawl, classify, and resolve any surface into a labelled primitive tree. Deterministic selectors.

body-sm13px · 20px400 · -0.005emsans

Press Esc to dismiss any modal or the Playground preview.

mono-md14px · 22px400 · 0mono

$ npx carbn add hero-linear

mono-sm12px · 18px500 · 0mono

traversal · 4 primitives resolved

eyebrow12px · 16px500 · 0.12emmono

THE CAPABILITY SURFACE

Spacing · 4-unit baseline

All spacing is a multiple of 4

4px

space-4

8px

space-8

12px

space-12

16px

space-16

24px

space-24

32px

space-32

48px

space-48

64px

space-64

96px

space-96

128px

space-128

192px

space-192

Radius

4 tokens · increments of 4

radius-sm6px

Pills, chips, inline code

radius-md10px

Buttons, inputs, inline blocks

radius-lg14px

Bento cards, primary surfaces

radius-xl20px

Hero canvas, large surfaces

Grid

12 / 8 / 4 columns · 24 / 20 / 16 gutter

Desktop12 col · 24px gutter

Max-width 1280px · Padding 32px

Tablet8 col · 20px gutter

Padding 24px

Mobile4 col · 16px gutter

Padding 20px

<div className="mx-auto max-w-[1280px] px-5 sm:px-8">
  <div className="grid grid-cols-4 gap-4 md:grid-cols-8 md:gap-5 lg:grid-cols-12 lg:gap-6">
    {/* 12-col layout on lg, 8-col on md, 4-col on default */}
  </div>
</div>

page-padding

Responsive page padding — mobile / tablet / desktop

20 · 24 · 32

max-width

Primary container maximum

1280px

baseline

All spacing aligns to a 4-pixel grid

4px

02 · Elements

Composable primitives.

Buttons, pills, tiles, chips — the atomic interaction surface. Every element here carries the glass treatment and inherits the typographic scale.

Buttons

height 36 / 40 / 44 · radius 10

Open the Playground

Button · primaryh-11

Strong CTA. glass-4 fill + line-3 border + glass-hi elevation.

Button · secondaryh-11

Supporting action. glass-2 + line-2. Optional kbd tile.

Start 14-day Trial→

Button · emphasish-11

Inverse fill. Pricing tier highlight, final CTA.

Button · compacth-9

Nav CTAs. radius-8 for tighter horizontal rhythm.

Button · ghost / linkh-9

Low-emphasis nav, footer, inline links.

Button · iconsize-9

Square icon buttons. Close, navigate, copy.

// Primary
<a className="inline-flex h-11 items-center gap-2 rounded-[10px]
              border border-[var(--color-line-3)] bg-[var(--color-glass-4)]
              px-5 text-[14px] font-medium text-[var(--color-fg)]
              transition-colors hover:bg-[rgba(255,255,255,0.12)]
              carbn-glass-hi">
  Open the Playground <ArrowRight />
</a>

Pills · announcements

height 28 · 32 · radius-full

MCP-readyv0.4 shipping

Announcement pill · liveh-8

Hero header. Live dot + split label + meta.

Production-ready. Today.

Pill · eyebrowh-7

Section eyebrow. Final CTA, quiet declarations.

MOST DEPLOYED

Ribbon · badgeh-[22]

Emphasis tier on pricing. radius-sm not full.

Keyboard tiles

h-[22] min-w-[22] · mono-sm

C/Esc↵⌘+K⇧+/

.carbn-kbdmin-w-[22]

Embedded keyboard hint. Inset shadow + top highlight for tactile edge.

Cards

radius-lg · carbn-glass / carbn-glass-hi

.carbn-glass

glass · defaultline-1 · glass-2

Standard card surface. 1px inset highlight on the top edge.

.carbn-glass-hi

glass · elevatedline-2 · glass-3

Emphasized card. Inset highlight + halo + soft drop shadow.

spotlight · hover me

SpotlightCard±3° tilt · 520px spot

Cursor-follow radial gradient + parallax tilt. Used on bento + pricing.

Badges

inline status + tag chips

mcp/write_componentmcp/list_componentsNEWAll systems operational

Chipsh-[22] ~ h-7

Endpoint chips, tags, status. Mono-sm labels. Optional leading dot.

Focus ring

2px · signal-focus · 2px offset · WCAG 2.2 AA

focus-visibleoutline 2px

Applied globally inside .carbn-root. 2px offset. rgb(255/40%).

03 · Motion

Spring physics, not duration curves.

One easing curve, three motion classes, one noise grain. Every interaction respects prefers-reduced-motion and disables translation while preserving opacity.

Easing

[0.16, 1, 0.3, 1] · expo-out

cubic-bezier(0.16, 1, 0.3, 1)

Fast departure, settling approach. Used everywhere except scroll links.

// Standard ease
transition: { duration: 0.55, ease: [0.16, 1, 0.3, 1] }

// Spring (hover tilt, drag)
useSpring(value, { stiffness: 180, damping: 20 })

// Scroll-linked
useScroll({ target, offset: ["start start", "end end"] })

Three motion classes cover everything: a single ease curve for opacity & translation, a spring for cursor-following physics, and scroll-linked transforms bound directly to scrollYProgress.

Fade up

y: 14 → 0 · 550ms

fade-up token

FadeUpy: 14 · 550ms

Default section-entry transition. Triggered by IntersectionObserver.

Content starts at y: 14, opacity: 1 and lifts to its final position. Opacity holds at 1 so SSR snapshots render.

Spotlight + tilt

520px radial · ±3° rotation · spring 180/20

Move your cursorSpotlight only

Move your cursorTilt + spotlight

Move your cursorLarge spot · 720

Pulse

2s ease-in-out · signal-live

signal-live

neutral pulse

.carbn-pulse2s · 0.5 → 1

Ambient heartbeat for live status. Halts under reduced-motion.

A 2-second opacity + scale pulse applied to live indicators. Pair with a halo-blur layer at 24% opacity for the full effect.

Scan line

hero canvas extraction sweep

Scan2.5s loop

Hero canvas extraction signal. Applied once, then blocks fly out.

Typed command

65ms per glyph · blinking caret

~ carbn

TypedCommand65ms / char

Character-by-character rendering. Caret blinks at 1.1s step-end.

Marquee

60s infinite linear · pause on hover

.carbn-marquee-track60s linear

Duplicated track for seamless loop. Soft mask on entry / exit.

Noise grain

fixed · 2.8% · mix-blend overlay

Grainthe tactile signature

.carbn-grainSVG feTurbulence

2.8% opacity overlay across the full viewport, above backgrounds, below interactive.

04 · Iconography

Monochromatic marks, inherited colour.

All icons and brand marks render in currentColor so they inherit text tokens. One visual register across UI icons, brand logos, and status glyphs.

UI icons

16px · 1.5 stroke · rounded linecap

arrow-right22px

Forward, next, submit

arrow-up-right22px

check22px

chevron-right22px

plus22px

close22px

copy22px

terminal22px

search22px

Inspect, search, filter

link22px

github22px

command22px

Brand logos · ecosystem marquee

16 marks · rendered via currentColor

React

Vue

Svelte

Solid

Astro

Next.js

Remix

Tailwind

HTML5

CSS3

Framer Motion

GSAP

Qwik

Preact

Vite

TypeScript

05 · Patterns

The composite anatomies.

Every section on the marketing surface assembles from the same primitives. Here are the six canonical compositions with their structural callouts.

Hero · capture to code

100vh minus nav · centered composition

MCP-ready

Inspect the architecture.

A headless traversal engine for the open web.

Open the Playground →Install CLI C

01
Announcement pill
Live dot + token split. Always clickable, opens docs anchor.
02
Display headline
Two lines. display-xl. Per-line fade-up with 80ms stagger.
03
Subhead
body-lg · max-width 520 · fg-2.
04
CTA cluster
Primary button + secondary with kbd hint. 12px gap.
05
Hero canvas
Looped extraction choreography. 9s cadence with 2s pause.

Bento card · capability tile

copy column + visual column · spotlight + tilt

01 · ENGINE

Headless Traversal Engine

Crawl, classify, resolve. Deterministic selectors.

01
Eyebrow
mono-sm · format '## · LABEL'. Always uppercase with 0.14em tracking.
02
Title
heading-md. Single line preferred.
03
Body
body-md · fg-2 · max-width 380 · single sentence.
04
Visual region
Card-local animation. Always bounded by overflow-hidden and rounded-lg.

Workflow · sticky scroll

200–280vh scroll parent · sticky viewport 520

Phase 0202 / 04

Map every element

A hybrid renderer resolves the layout.

01
Phase eyebrow
Mono eyebrow + hair rule + counter. Crossfades with 4px blur.
02
Active title
display-md. Only the active phase renders at full opacity.
03
Body copy
body-md. max-width 460. Fades with the title.
04
Progress rail
Horizontal 1px track that fills left-to-right with scrollYProgress.
05
Phase dots
4 buttons, clickable. Active dot glows and scales to 110%.
06
Canvas
520px tall. Four states crossfade. Phase 2 is scroll-linked.

Testimonial card · drag carousel

420×240 · cursor-grab · snap on release

@miyako · Staff Eng · Linear

The traversal output matched our component tree, not a screenshot.

Miyako ItoLinear

01
Handle + role
mono-sm · fg-3 · format '@handle · role · company'
02
Quote glyph
Decorative, tr corner. Inherits fg-4.
03
Quote body
body-lg · fg · max 3 lines. Stays above 85-char width.
04
Attribution
Avatar initials + name + company. body-sm.

Pricing tier · three-column composition

320 wide · radius-lg · emphasized tier = line-3

MOST DEPLOYED

TEAM

Technical teams

$24/ user / month

Unlimited extractions
Private library
Shared namespace
Priority engine queue

Start 14-day Trial →

01
Tier name
Eyebrow (mono-sm uppercase) + audience description.
02
Price
display-lg · suffix in body-sm fg-3.
03
Entitlements
Vertical list · tick glyph · 8 rows max.
04
Emphasis ribbon
Floats above the middle tier · radius-sm · mono-sm uppercase.
05
CTA
Full-width button, h-11. Emphasis tier uses fg-solid fill.

Final CTA · ghost wordmark closer

720 tall · cropped wordmark + centered invocation

Production-ready. Today.

Extract your first component.

$ npx carbn addCopy

Read the documentation →

01
Ghost wordmark
Cropped at top. Opacity 0.14. Soft mask on bottom edge.
02
Eyebrow pill
'Production-ready. Today.' · h-7 · line-2 border.
03
Heading
heading-lg. Single declarative sentence.
04
Command block
60px tall · mono-md · inline copy button. Clipboard feedback 1.4s.
05
Secondary link
Ghost link. Dotted underline offset 6px.

06 · Voice

Authoritative. Technical. Precise.

Claims are assertions, not suggestions. The reader is a practitioner; jargon is welcomed where it narrows meaning. Every sentence carries a specific commitment.

Banned vocabulary

never ship · not in copy, docs, or UI

Easy
Implies condescension. The audience is expert.
Simple
Same as Easy. Says nothing specific.
Clone
Misrepresents the product; risks legal misreading.
Hack
Undermines production-ready positioning.
Magic
Opacity is the opposite of the product's thesis.
Seamless
Has become a null word through overuse.
Powerful
Asserts without evidence.

Preferred vocabulary

favour these · narrow meaning wins

InspectorArchitectureExtractionComponentizeModularProduction-ReadyTraversalTranspileSurfacePrimitiveDeterministicAgent-NativeFramework-AgnosticIdempotentSelector-stableToken-metered

Copy pairs

same surface · different intent

Hero subheadbad / good

bad

The easy way to magically clone beautiful websites with powerful AI in seconds.

good

A headless traversal engine for the open web. carbn.sh maps, componentizes, and ships production-ready blocks to your codebase — or your agent.

Feature descriptionbad / good

bad

Seamlessly and simply capture any website with one click.

good

Deterministic traversal. One command resolves a URL into a typed primitive tree.

CTAbad / good

bad

Get started easily

good

Open the Playground

Button labelbad / good

bad

Powerful AI analysis

good

Inspect · analyze

Sentence economy

fewer words · narrower meaning

12max

Headlinewords

24max

Subheadwords

3max

Paragraphsentences

4max

Button labelwords

<div className="mx-auto max-w-[1280px] px-5 sm:px-8"> <div className="grid grid-cols-4 gap-4 md:grid-cols-8 md:gap-5 lg:grid-cols-12 lg:gap-6"> {/* 12-col layout on lg, 8-col on md, 4-col on default */} </div> </div>

// Primary <a className="inline-flex h-11 items-center gap-2 rounded-[10px] border border-[var(--color-line-3)] bg-[var(--color-glass-4)] px-5 text-[14px] font-medium text-[var(--color-fg)] transition-colors hover:bg-[rgba(255,255,255,0.12)] carbn-glass-hi"> Open the Playground <ArrowRight /> </a>

// Standard ease transition: { duration: 0.55, ease: [0.16, 1, 0.3, 1] } // Spring (hover tilt, drag) useSpring(value, { stiffness: 180, damping: 20 }) // Scroll-linked useScroll({ target, offset: ["start start", "end end"] })

The system behind carbn.sh.

Logo

Colors · the void theme

Typography · Inter + JetBrains Mono

Spacing · 4-unit baseline

Radius

Grid

Buttons

Pills · announcements

Keyboard tiles

Cards

Badges

Focus ring

Easing

Fade up

Spotlight + tilt

Pulse

Scan line

Typed command

Marquee

Noise grain

UI icons

Brand logos · ecosystem marquee

Hero · capture to code

Inspect the architecture.02

Bento card · capability tile

Headless Traversal Engine02

Workflow · sticky scroll

Map every element02

Testimonial card · drag carousel

Pricing tier · three-column composition

Final CTA · ghost wordmark closer

Extract your first component.03

Banned vocabulary

Preferred vocabulary

Copy pairs

Sentence economy

The system behind carbn.sh.

Logo

Colors · the void theme

Typography · Inter + JetBrains Mono

Spacing · 4-unit baseline

Radius

Grid

Buttons

Pills · announcements

Keyboard tiles

Cards

Badges

Focus ring

Easing

Fade up

Spotlight + tilt

Pulse

Scan line

Typed command

Marquee

Noise grain

UI icons

Brand logos · ecosystem marquee

Hero · capture to code

Inspect the architecture.02

Bento card · capability tile

Headless Traversal Engine02

Workflow · sticky scroll

Map every element02

Testimonial card · drag carousel

Pricing tier · three-column composition

Final CTA · ghost wordmark closer

Extract your first component.03

Banned vocabulary

Preferred vocabulary

Copy pairs

Sentence economy

Inspect the architecture.

Headless Traversal Engine

Map every element

Extract your first component.

Inspect the architecture.

Headless Traversal Engine

Map every element

Extract your first component.