Heading
Semantic level (h1–h6) and visual size are independent props, so visual hierarchy never breaks the document outline.
A serif heading.
<Heading level={2} visual="display-md">A serif heading.</Heading> Component inventory
The system, composable from primitives.
Every pattern below is built from a small set of accessibility-first primitives. One <Card> handles every card variant on the site; one <Field> wires every label, hint, and error.
Foundations
Tokens that drive the system.
Colors, typography, and spacing — the constrained set that keeps every component predictable.
Color palette
cream
#FFFDF9
peach
#FFE8D6
lemon
#FDE68A
coral
#E8573D
sunset
#FF8E53
plum
#6C4AB6
navy
#2D2B55
charcoal
#2E2E30
sage
#7BB47A
sky
#5DADE2
Typography
font-display · Fraunces
A serif with personality.
font-heading · Space Grotesk
UI labels, buttons, captions.
font-body · DM Sans
Body copy and lead paragraphs sit here. Comfortable line length, relaxed leading.
font-logo · Style Script
Joshua Briley
font-mono · JetBrains Mono
const inventory = await build();
Atoms
The smallest reusable pieces.
Every primitive enforces accessibility through its API: required labels, semantic defaults, decoupled visual sizing.
Text
Body / lead paragraph primitive with size, tone, and weight controls.
Lead paragraphs sit here, comfortable and unhurried.
<Text size="xl" tone="muted">Lead paragraphs sit here.</Text>Logo
Variant prop swaps wordmark / monogram / lockup. The monogram is decorative; the wordmark carries the accessible name.
jb joshuaBriley jb joshuaBriley
<Logo variant="lockup" href="/" />Button
Renders <button> by default; renders <a> when href is supplied. Variants: primary, secondary (on dark), ghost.
<Button variant="primary" iconRight="ph:arrow-right">Take the scorecard</Button>Button (secondary)
Secondary variant is designed for navy surfaces.
<Button variant="secondary" href="/contact/">Book a call</Button>Link
Inline (default), arrow, nav (auto-detects active page), or unstyled.
<Link href="/services/" variant="arrow">How audits help</Link>Badge / sticker
Tone-constrained pill for eyebrows and category tags. Pass `sticker` for the dashed-border variant.
Component library New Shipped Eyebrow
<Badge tone="plum" icon="ph:package-duotone">Component library</Badge>Avatar
Initials avatar with three preset gradients. Initials are decorative; the full name is exposed via aria-label.
<Avatar initials="JB" name="Joshua Briley" gradient="coralSunset" />Icon
Decorative by default (aria-hidden). Pass `label` to expose meaningful icons to assistive tech.
<Icon name="ph:check-circle-duotone" size={24} class="text-sage" /> Decorative
Personality, not noise.
Every decorative element auto-marks itself aria-hidden so assistive tech ignores it.
Blob
Floating organic shape. Tones, sizes, and animations are constrained to safe defaults.
<Blob tone="lemon" size="lg" animate="float" />Wavy underline
Inline emphasis on a key word in headings.
Designs that actually ship.
<WavyUnderline>actually ship</WavyUnderline>Squiggle divider
Hand-drawn coral divider between sections.
<SquiggleDivider />Tape & pin
Used inside cards for a tactile, scrapbook feel.
<Card variant="polaroid"><Pin slot="corner" />…</Card> Cards
One Card primitive. Every card variant.
Variants supply the chrome (paper, polaroid, sticky, reveal, outline). Slots and atoms supply the content. We never write a TestimonialCard or ServiceCard component.
Service card
Numbered chrome via <CardNumber>.
- Coverage map
- Token plan
“Josh transformed our scattered components into a system the whole team trusts.”
“Best engagement we've had with a consultant in years.”
— Priya N., VP Engineering
VMSpark consolidation
New
Quarterly retainer
Steady support for teams who want a hand on the rudder.
Patterns
Compositions used across pages.
Hero, SectionHeader, FAQ, CardGrid, CTABanner — every page composes from this small set.
FAQ
Native <details> + <summary>. Zero JS, fully keyboard-accessible, animates on toggle via CSS.
What does an audit actually deliver?
A coverage map of your components, a token consolidation plan, and a prioritized punch list.
How long does engagement usually run?
Audits are typically 2–3 weeks; library work runs 6–12 weeks depending on scope.
Do you work with our existing stack?
Yes — Astro, Next, Remix, plain HTML, and design tools like Figma. The system is the system.
Forms
Accessibility wired in by default.
<Field> auto-generates ids and connects label, hint, error, aria-describedby, aria-invalid, and aria-required. You can't create a mislabeled input through this API.
Field examples
I'll only use this to reply.
A few sentences is plenty.
The phone number looks invalid.
ChoiceGroup
Fieldset + legend with radio pills.
FormAlert (success)
role="status", focusable for AT announcement.
Thanks — your message is on its way.
I'll reply within one business day, usually sooner.
FormAlert (error)
role="alert", red coral surface.
We couldn't send your message.
Please check the highlighted fields.