The theme’s foundations - color scales, type, spacing, buttons, editorial roles - and the pattern library grouped by purpose. Insert any pattern from the editor’s + → Patterns panel and edit the placeholder copy. This is a reference page. Delete it before you launch.
Elements · Page starters & heroes · Content sections · Services & pricing · Social proof · Team & people · Portfolio & work · Calls to action · Contact & location · Blog & posts · Utility · Content widths
The building blocks every pattern is made from. Each item is labeled with the class or token you type to use it.
Role tokens, applied as has-{slug}-color for text or has-{slug}-background-color for a fill. Every value is adaptive - it follows the visitor’s light or dark setting.
Brand ramp - the accessible tonal scale derived from your brand color (primary-50 to primary-950). primary itself is the exact brand color you enter.
Neutral ramp - surfaces, text, and borders derive from this scale.
Semantic status colors - each has a full 50-950 ramp; the 500 is shown.
Font sizes, applied as has-{slug}-font-size. Each line is set at the size it names.
has-display-font-size
has-xxxl-font-size
has-xxl-font-size
has-xl-font-size
has-lead-font-size
has-l-font-size
has-base-font-size
has-m-font-size
has-s-font-size
has-xs-font-size
has-xxs-font-size
Font families, applied as has-{slug}-font-family.
has-headings-font-family
has-body-font-family
has-mono-font-family
Four emphasis tiers, strongest to quietest. Use one primary (Fill) per view and let the rest recede. All adapt to the color variation and to light/dark, and meet WCAG AA. The block toolbar labels these Fill / Soft / Outline / Subtle.
is-style-fill
Primary, the one main action
is-style-soft
Soft, secondary emphasis
is-style-outline
Bordered, quiet secondary
is-style-subtle
Ghost, lowest emphasis
The a element. Inline links use the link color with an underline.
A paragraph with an inline link and following text, so it can be seen in running copy.
Quiet, on-by-default brand touches for the editorial layer. Each carries the scheme hue through tokens, so it re-hues with the color variation and meets WCAG AA in light and dark. The block toolbar labels these Eyebrow / Badge, plus a Callout group style.
What we do
New
Note
A subtle brand-tinted callout band for a highlighted note or aside. Body text stays the neutral text token, gated to at least 4.5:1 on the tint in both modes.
Native form controls, styled at the element level (no class needed). A form plugin that ships its own styling takes over when present.
The spacing scale, applied through block spacing controls (emitted as var:preset|spacing|{slug}). Bars are drawn to scale.
blockwright/hero-centered
blockwright/hero-split
blockwright/hero-basic
blockwright/content-media
blockwright/about-intro
blockwright/steps-process
blockwright/section-feature-grid
blockwright/section-constrained
blockwright/subsection-constrained
blockwright/layout-stack
blockwright/layout-cluster
blockwright/services-grid
blockwright/pricing-table
blockwright/stats-band
blockwright/testimonials-grid
blockwright/testimonial
blockwright/logos-cloud
blockwright/team-grid
blockwright/profile-detail
blockwright/skills-grid
blockwright/project-grid
blockwright/case-study
blockwright/cta-centered
blockwright/cta-stripe
blockwright/contact-simple
blockwright/location-hours
blockwright/faq
blockwright/post-summary
blockwright/post-meta
blockwright/archive-feature-grid
blockwright/comments
blockwright/404
Any page can use one of three content widths, set from the editor’s Page → Template dropdown.
Standard, reading width
Wide
Full width, edge to edge