the point
Foundation
Colors
Semantic
--color-bg
--color-bg-secondary
--color-surface
--color-border
--color-primary
--color-primary-subtle
Text
--color-text
--color-text-secondary
--color-text-muted
States
--bp-success
--bp-warning
--bp-error
Blueprint blue scale
100
200
300
400
500
600
700
800
900
Foundation
Live Brand Theming

Setting --color-primary on :root cascades to every derived token — hover tints, subtle fills, glow rings — and repaints every component that references them. Pick a color below to see the cascade live.

Presets
--color-primary
#3B82F6
Derived tokens — all computed from the single primary value
--color-primary
--color-primary-hover
--color-primary-subtle
--color-primary-glow
Components — each one reads the same four tokens
Buttons
Badges
Primary Outline Subtle
Chips
Input focus ring
Stat
4,821 active users +12%
Progress
68%
Chart
Pre-built moods — full page palettes (background/surface/border/text/grid), not just one token

The custom picker above only sets --color-primary. A mood file goes further — it reskins the whole page for both dark and light theme, with every token's lightness kept identical to the base so contrast ratios stay validated. Sage, Mist, and Clay use a deliberately lighter background instead.

Foundation
Typography
Headings
h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

h5
The quick brown fox
h6
The quick brown fox
Body & utility text

Large body — The quick brown fox jumps over the lazy dog.

Base body — The quick brown fox jumps over the lazy dog.

Small body — The quick brown fox jumps over the lazy dog.

XS / meta — The quick brown fox jumps over the lazy dog.

Monospace
Monospace body — REF: AX-2.4.1 · BUILD: STABLE Mono label — STEP 1 OF 4 · ALL SYSTEMS OPERATIONAL inline code snippet
Text colors
bp-text-body bp-text-secondary bp-text-muted bp-text-primary bp-text-success bp-text-warning bp-text-error
Gradient text

Gradient heading text

Typography Voices
bp-text-label — functional / mono / caps Material · Founded 1923 · Oslo, Norway
bp-text-editorial — serif italic / long-form

The record began not with a composition but a question — what does restraint sound like when it has nothing left to prove?

bp-text-identity — bold display / tight tracking

VOLTA.

Code block
const result = await fetch('/api/data')
const json = await result.json()
console.log(json)
Components
Buttons
Variants
Sizes
Icon buttons
With icon + label
States
Components
Badges
Default Secondary Success Warning Error Outline
With icon
Operational Degraded Outage Verified
Components
Chips / Tags
Variants
Primary Outline Secondary In stock Low stock Discontinued
Chip group — wrapping row
Spicy Gluten-free Seasonal Available Vegetarian Limited run
Components
Tooltip
CSS-only — shows via :hover/:focus-within
Helpful tooltip text Focus me (tab to it) Any focusable element works as the trigger
Components
Alerts
Information
This is an informational alert with a title and supporting text.
Success
Your changes have been saved successfully.
Warning
Your subscription expires in 3 days. Renew to avoid interruption.
Error
Something went wrong. Please try again or contact support.
Components
Accordion
Native <details>/<summary> — no JS for open/close
What is The Point?
A CSS design system with a blueprint aesthetic — works in React, Rails, Electron, and plain HTML.
Does it need a build step?
No — plain CSS files you link directly. The optional Stimulus controllers are the only JS, and only for components that genuinely need it.
Why do these three share a name attribute?
A shared name="" on sibling <details> elements makes only one open at a time — native browser behavior, not CSS.
Components
Tabs
CSS-only via radio inputs + :has() — no JS
Overview panel content — switching tabs never touches JS.
Activity panel content.
Settings panel content.
Components
Cards
Basic card
Card title
Supporting description or metadata
Card body content goes here. This can be any content — text, data, components.
Hoverable cards
Hover me
Lifts and glows on hover.
Hover me
Border becomes primary color.
Hover me
Shadow deepens on hover.
Media card — image flush to top edge
Media card example
Media card title
Image flush to top edge, no padding above.
View
4:3 media card
4:3 ratio
Landscape photo format.
Square media card
1:1 square
Product or avatar format.
Feature cards

Monitoring

Real-time metrics across all your services with zero configuration.

Security

End-to-end encryption and role-based access controls built in.

Performance

Predictive scaling keeps your systems fast before the spike hits.

Components
Media

Aspect-ratio-locked wrapper. The container defines the frame shape; the inner element fills it via object-fit: cover.

Landscape ratios
21:9 cinematic
bp-media-21-9
16:9
bp-media-16-9
4:3
bp-media-4-3
Square and portrait ratios
1:1
bp-media-1-1
3:4
bp-media-3-4
2:3
bp-media-2-3
Components
Forms

Helper text below the input.

This field is required.

Components
Input Compose

Grow-in-place textarea + send button. Used for chat inputs, comment boxes, compose-and-send patterns. The action button starts disabled until the user types.

Components
Drawer
Requires JS — slides in from any edge, backdrop-click, Escape, scroll lock, full focus trap

Each button opens its own drawer instance — a drawer's side is fixed at markup time, never swapped at runtime on a shared instance (swapping leaves a stale leftover transform behind and animates on the wrong axis).

Drawer — right

Try tabbing through this drawer — focus is trapped inside it while open.

Drawer — left

Try tabbing through this drawer — focus is trapped inside it while open.

Drawer — top

Try tabbing through this drawer — focus is trapped inside it while open.

Drawer — bottom

Try tabbing through this drawer — focus is trapped inside it while open.

Components
Hero
Eyebrow label

Hero title with a gradient word

Supporting subtitle text that describes the product or service in a sentence or two.

Primary CTA Secondary CTA
Section header
Section label

Section heading text

Optional supporting subtitle that provides context for the section below.

Components
Pricing Cards
Starter
$0 / mo

For individuals getting started.

  • 3 projects
  • Community support
  • Advanced features
Get started free
Most popular
Pro
$49 / mo

For growing teams that need more.

  • Unlimited projects
  • Priority support
  • Advanced features
Start free trial
Enterprise
Custom

For large organizations with custom needs.

  • Everything in Pro
  • SSO & audit logs
  • SLA & dedicated support
Talk to sales
Components
Stats
Uptime ↑ 0.01%
99.98%
Better than last month
Revenue +12%
$84k
↑ $9k from last month
Errors +3
17
↑ 3 from last week
Users Stable
2,841
No change this week
Components
Steps

Numbered process steps with large background numerals. Use data-step to set the numeral content.

Step 01
Connect your source

Paste your API key or authorize the integration. Takes under a minute.

Step 02
Configure alerts

Set thresholds, notification channels, and escalation windows.

Step 03
Ship with confidence

Your first alert fires in real time. Every deploy after this one is covered.

4-column variant
Step 01
Install

One line in your Gemfile or package.json.

Step 02
Import

Two link tags in your layout. That's the full setup.

Step 03
Brand

Set --color-primary. Everything derives from that one value.

Step 04
Ship

Pages look intentional from the first commit.

Components
Fact List

Label-left / value-right rows with hairline separators. For credentials, specs, film credits, structured key-value data that shouldn't feel like a table.

Default
Founded
2009, Oslo
Staff
12 people
Specialty
Heritage restoration, adaptive reuse
Certifications
ISO 9001, BREEAM Outstanding
Compact (bp-fact-list-sm)
Version
2.4.1
License
MIT
Dependencies
None
Wide label (bp-fact-list-wide-label)
Primary material
Tamba kurodaizu black soybeans
Water source
Fushimi underground aquifer
Production method
Ishiusu stone grinding, kinugoshi silk strain
Components
Table
Name Status Role Joined
SW
Sarah Wu
sarah@company.com
 Active Admin Jan 2024
MR
Marcus Reid
marcus@company.com
 Active Member Mar 2024
AK
Amara Kone
amara@company.com
 Invited Member Pending
Sortable & selectable — click a header to sort, select rows to reveal the action bar
Name ▲ Role Joined ▲
Components
Pagination
Pure styling contract — no JS. Current-page state is app-driven
Components
Avatars
Sizes
SM
MD
LG
XL
Group / stack
SW
MR
AK
+8
Components
Testimonial

"This design system cut our UI build time in half. Every page feels consistent without us having to think about it."

JD
Jamie Dawson
CTO · Beacon

"The blueprint aesthetic is unlike anything else. Our product looks technical and intentional right out of the box."

SR
Sofia Reyes
Designer · Flint

"We dropped it into our Rails app, added five lines of brand CSS, and it looked like we'd hired a designer. Genuinely impressive."

TN
Tom Nguyen
Founder · Drafted
Components
Dividers
Text divider
or continue with
Plain divider
Dotted connector
Components
Skeleton Loading
Grid-unit sizes (snap to 40px blueprint grid)
1u = 40px 2u = 80px 3u = 120px 4u = 160px 6u = 240px
bp-skeleton-card — zero layout shift card placeholder
Components
Empty State
No JS — a plain content block
⊘
No results found

Try adjusting your filters, or clear them to see everything.

Components
Progress & Spinner
CSS-only — respects reduced-motion via --motion-scale
Layout
Splits, Spread & Section Dark
Asymmetric splits
2fr (40%)
3fr (60%)
1fr (33%)
2fr (67%) — sidebar + content
1fr (25%)
3fr (75%) — narrow label + wide body
Gatefold spread (bp-spread-3) — 28:44:28
Left flank
28%
credits / meta
Center
44%
narrative axis
Right flank
28%
catalog / callouts
bp-section-dark — inverted contrast band
Dark band

Text and card tokens invert automatically

No extra overrides needed — bp-card, buttons, and text all respond to the dark context. Use for contrast between light sections.

Blueprint
Decorative Utilities
bp-bracket — corner bracket decoration
Bracket card
Corners accent with primary color brackets.
Any element
bp-mono-label — coordinate / reference style
REF: AX-2.4.1 BUILD: STABLE STEP 1 OF 4 ALL SYSTEMS OPERATIONAL
bp-annotation — side-note with left border

This is an annotation. Use it for side notes, technical references, or supporting context that sits alongside main content.

bp-text-gradient — primary gradient text

Gradient heading

Gradient sub-heading

Gradient inline
bp-dashed-connector — dashed horizontal rule
Blueprint
Motion
bp-animate — bounce transitions on a container

Rescopes transition tokens to the bounce curve for all children. Hover the elements below.

Bouncy card
Hover for bounce.
bp-animate-draw — border drawn clockwise on scroll entry

Draws the element border top→right→bottom→left via animation-timeline: view(). Scroll the card into view to see it draw. Works with bp-bracket.

Draw on scroll
Border animates in when element enters the viewport.
Draw + bracket
Both effects combine cleanly.
Draw on scroll
Falls back to page-load animation in older browsers.
data-bp-motion="draw" — page-level draw animation
Add data-bp-motion="draw" to the <html> element alongside data-bp-theme. A primary-colored line sweeps left-to-right across the top of the page, then nav, hero, and sections fade up in sequence — like a draftsman sketching layout before filling it in. Automatically disabled when prefers-reduced-motion is set.
Utilities
Interactive Helpers
bp-hover-lift
Hover me

Lifts on hover.

bp-hover-glow
Hover me

Glows on hover.

Shadow scale

shadow-none

shadow-sm

shadow-md

shadow-lg

shadow-glow

Border radius scale
none sm md lg xl 2xl full
Composed Patterns
Components in Context

Real interfaces are compositions, not single components. These patterns show how sidebar, nav, avatars, badges, compose, alerts, and forms work together as a unified shell — each piece responding to the same tokens.

Chat interface — sidebar + message feed + input compose
Today
RE
Robert Evans
Claude Sonnet 4.6
RE
Could the service API also be open source? That's a nice play on the community side.
AI
Yes — and that decision changes the entire community dynamic. The thing that remains exclusively yours is the one thing that can't be self-hosted: other people's data. The collective performance index only exists in the hosted service, because it requires other users.
RE
Write a spec for the signal service. Highly detailed and concise.
AI

Claude can make mistakes. Check important info.

Settings page — split nav + form + alert
Settings
Profile Account Security Notifications Billing
Team
Members Permissions

Profile

This is how others see you on the platform.

Changes saved
Your profile has been updated successfully.

Verified

Admin dashboard — sidebar + stats + chart + orders table
Fieldwork
JD
Jamie Dawson
Admin
Dashboard
May 2026 · All stores
Last 30 days
Revenue
$48,291
↑ 12%
Orders
1,204
↑ 8%
Customers
892
↑ 3%
Avg Order
$40.11
↓ 2%
Revenue May 1 – 31
Recent orders
Order Customer Status Amount Date
#1204
SR
Sofia Reyes
Fulfilled $128.40 May 10
#1203
TN
Tom Nguyen
Processing $64.00 May 10
#1202
AK
Amara Kone
Unfulfilled $245.00 May 9
#1201
MR
Marcus Reid
Fulfilled $88.50 May 9
Lead generation — editorial left + email capture right · no scroll
Fieldnote · Now in public beta

Collect feedback that
actually changes
your product.

In-app surveys. Session context.
AI-synthesized digests — without the noise.

fieldnote.io
Get early access

Start building with
real feedback.

Join 600+ teams who know what to build next.

No credit card · Free for 14 days · Cancel anytime

Instant deploy — one script tag
Privacy-first · GDPR ready
Works with any stack
Mezcal brand — cinematic hero + craft story + product facts
Humo Vivo
Destilados Proceso Terroir
Oaxaca · Artesanal · Espadín

Smoke. Earth. Time.

Discover the range ↓
The process

In the hills above Miahuatlán, a single family distillery has worked the same hillside for four generations. The agave plants here take twelve years to reach maturity.

Each piña is roasted underground for five days in an earthen pit lined with river stones. The smoke doesn't just flavor — it marks the specific place the plant grew.

Espadín · 2023
Agave Espadín (A. angustifolia)
Village San Luis del Río
ABV 48%
Still Clay pot (olla)
Bottles 816 total
Maestro Faustino Cruz Aguilar