Peprion Studio Drop

Launch-ready art direction, sourced from the manifest.

Blend curated photography with token-driven typography and spacing. The worker keeps imagery fresh, so this hero is always on-brand.

Signal

Shipping banner + bottle lineup refreshed nightly from brand.peprion.com

Every hero block you deploy can source imagery straight from the manifest, ensuring campaigns stay synced across Astro, Shopify, and Worker-powered experiences.

This layout pairs your launch copy with art-directed photography while keeping the same typography, spacing, and radii exported by the Peprion kit.

View manifest Download banner pack

Manifest asset · 300ppi

Why teams adopt the kit

Consistency, traceability, and zero-regret integrations.

Each capability below is powered by the same tokens that drive Peprion web, retail, and edge tools—so every deliverable feels like it came from one studio.

Verified & Versioned

Every asset, token, and component is published through the Peprion brand-kit pipeline. You always know which version you are using, traceable from source to deployment, immutable by design.

Learn more

Unified Components

Each Astro component is built on a shared token system: spacing, color, and typography stay consistent everywhere. Developers move faster, designers get pixel-perfect fidelity, and everything just fits.

Learn more

Open Integration

Import Peprion design tokens, fonts, and components into any stack: Astro, React, or plain HTML. Our npm package and CDN endpoints make brand consistency frictionless across every platform.

Learn more

About Peprion

We keep every surface on-message and on-brand.

Peprion Brand Kit is the connective tissue between product, marketing, and retail. Our worker-managed manifest streams fresh creative to Astro sites, Shopify drops, and Cloudflare consoles without re-exporting files.

Our mission

Give every team a shared design language they can trust. Every token and asset in the manifest is provenance-tracked, versioned, and immediately consumable through npm packages or the asset worker.

We orchestrate nightly syncs from design source to runtime, so when a launch hits commerce or a new fulfillment tool rolls out, the visuals already feel like Peprion.

The numbers

Tokens & assets synced: 1.4K
Stacks powered: 12
Monthly launches on-brand: 38
Latency from design to prod: 4 hrs

Component library

Brand kit demo playground

Explore a handful of primitives from the package. Each one inherits the same typography, radii, and tokens exported by @peprion/brand-kit.

Action styles

Buttons

Primary, secondary, and ghost states all share the same spacing scale and focus treatment.

Messaging

Alerts

Tone-aware alerts keep typography and spacing aligned with the system.

Informational alert using shared styles.

Data display

Table

Structured content inherits zebra striping, typography, and tokens from the shared preset.

Users

A list of all the users in your account including their name, title, email and role.

Name	Title	Email	Role	Actions
Lindsay Walton Title Front-end Developer Email lindsay.walton@example.com	Front-end Developer	lindsay.walton@example.com	Member	Edit
Courtney Henry Title Designer Email courtney.henry@example.com	Designer	courtney.henry@example.com	Admin	Edit
Tom Cook Title Director of Product Email tom.cook@example.com	Director of Product	tom.cook@example.com	Member	Edit
Whitney Francis Title Copywriter Email whitney.francis@example.com	Copywriter	whitney.francis@example.com	Admin	Edit
Leonard Krasner Title Senior Designer Email leonard.krasner@example.com	Senior Designer	leonard.krasner@example.com	Owner	Edit
Floyd Miles Title Principal Designer Email floyd.miles@example.com	Principal Designer	floyd.miles@example.com	Member	Edit

Support

FAQ

Accordions reuse the same radii, transitions, and text styles for predictable motion.

Frequently asked questions

Answers to the things people ask about the most.

What's the best thing about Switzerland?: I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
How do you make holy water?: You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam aut tempora vitae odio inventore fuga aliquam nostrum quod porro.
What do you call someone with no body and no nose?: Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa, voluptas ipsa quia excepturi, quibusdam natus sapiente tempore labore voluptatem.
Why do you never see elephants hiding in trees?: Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.
Why can't you hear a pterodactyl go to the bathroom?: Because the pee is silent. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quas voluptatibus ex culpa ipsum, aspernatur blanditiis fugiat ullam magnam suscipit.
Why did the invisible man turn down the job offer?: He couldn't see himself doing it. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet perspiciatis officiis corrupti tenetur. Temporibus ut voluptatibus.