Ritual — Skeptic Science DTC

Supplements sold to skeptics: white canvas, deep cobalt ink, vivid yellow product world, transparent capsules shot like lab specimens, and traceability told as a story.

Source capture · 2026-09-05Open full image ↗

CommerceContent & mediaCreative tools

Design notes

Mood

Rigorous but warm. 'For Skeptics, By Skeptics' — every claim wants a citation, yet the brand still smiles. Science as the sales pitch, proof as the aesthetic.

Colors

Clean white canvas, deep cobalt/indigo ink for all text and buttons (#142B6F feel), and one vivid brand yellow (#FFD600) doing heavy lifting: capsule backdrops, category card panels, star ratings, sticker graphics. Warm amber photography moments as contrast. No other hues.

Type

A modern sans in cobalt for headlines and UI, spiked with an italic serif for wit and emphasis ('Hotter Savings', 'By Skeptics', 'delicious.'). Sentence-case headlines at medium scale; small underlined text links; airy body copy. The serif italic is a seasoning, never the base.

Layout

Classic DTC modules elevated: half-photo half-panel hero, product card rail with Add buttons and strikethrough pricing, a hairline-ruled benefit icon strip (line icons + two-line labels), alternating image/story sections for traceability, category photo cards on yellow, centered pull-quote testimonial, portrait grid with name/credential captions, and a glowing centered manifesto CTA.

Motion

Gentle and assured: soft fade-ups, product cards that lift on hover, a slow rotating or settling capsule video moment. Small video-play chips on imagery hint at motion content. Nothing gimmicky — trust is the animation budget.

Texture

Flat white and cobalt UI against lush photographic texture: glassy capsule macro, backlit amber glow, botanical close-ups. Line icons stay hairline-thin. No gradients in the UI itself.

Imagery

Product truth-telling photography: transparent capsules and bottles shot macro on vivid yellow backgrounds so the beadlets show; warm amber backlit bottle stills; macro crop/leaf shots for the traceability story; studio portraits of founders and scientists on neutral grey. Pexels for macro botanical and portrait bases; kie-ai Seedream for the yellow-background capsule shots. Transparency is literal — always show what's inside.

Don't

No vague wellness pastels, no lifestyle-only imagery hiding the product, no unsupported-claim energy, no more than the two brand hues plus photography. Never crowd the whitespace — proof needs air.

Make it your own

Turn this reference into a useful brief for your project. Copy it into the AI tool you already use.

Your project

Use withAny AI toolCodexClaudeCursorChatGPTGeminiv0 / LovableI want toBuild a screenAudit my UIWrite a design brief

Tech stackUse the existing project stackReact / Next.jsAstroVue / NuxtSvelte / SvelteKitHTML / CSS / JavaScriptSwiftUIFlutter

Add constraints

What should the tool respect?

Preview & edit prompt

Prompt text# My project [Describe the product, audience, and screen you want to improve] Stack: Use the existing project stack Task: Implement the interface and verify the result in the existing project. ## Tool guidance (Any AI tool) Use available project tools to inspect, implement, and test. State any unavailable capabilities. # Design reference: Ritual — Skeptic Science DTC Source: https://ritual.com Swipefile reference: https://swipefile.design/ref/ritual-science-dtc/ Captured: 2026-09-05. This is a dated reference, not a claim about the current live product. Capture scope: a page excerpt. Do not infer unseen sections or interactions. ## Objective Adapt the visual principles below to my project. Use my own content and identity. Do not reproduce logos, proprietary copy, or brand assets. ## Reference notes - mood: Rigorous but warm. 'For Skeptics, By Skeptics' — every claim wants a citation, yet the brand still smiles. Science as the sales pitch, proof as the aesthetic. - colors: Clean white canvas, deep cobalt/indigo ink for all text and buttons (#142B6F feel), and one vivid brand yellow (#FFD600) doing heavy lifting: capsule backdrops, category card panels, star ratings, sticker graphics. Warm amber photography moments as contrast. No other hues. - typography: A modern sans in cobalt for headlines and UI, spiked with an italic serif for wit and emphasis ('Hotter Savings', 'By Skeptics', 'delicious.'). Sentence-case headlines at medium scale; small underlined text links; airy body copy. The serif italic is a seasoning, never the base. - layout: Classic DTC modules elevated: half-photo half-panel hero, product card rail with Add buttons and strikethrough pricing, a hairline-ruled benefit icon strip (line icons + two-line labels), alternating image/story sections for traceability, category photo cards on yellow, centered pull-quote testimonial, portrait grid with name/credential captions, and a glowing centered manifesto CTA. - motion: Gentle and assured: soft fade-ups, product cards that lift on hover, a slow rotating or settling capsule video moment. Small video-play chips on imagery hint at motion content. Nothing gimmicky — trust is the animation budget. - texture: Flat white and cobalt UI against lush photographic texture: glassy capsule macro, backlit amber glow, botanical close-ups. Line icons stay hairline-thin. No gradients in the UI itself. - dont: No vague wellness pastels, no lifestyle-only imagery hiding the product, no unsupported-claim energy, no more than the two brand hues plus photography. Never crowd the whitespace — proof needs air. ## Acceptance criteria - Existing project conventions, design tokens, working functionality, and unrelated changes are preserved. - Two or three reference principles clearly support the user's task; conflicts are resolved in favor of usability and the existing product. - Reusable components and semantic HTML express the interface. Available licensed assets are used; important UI text is never rendered as a bitmap. - Every visible control has a defined behavior. Loading, empty, error, success, disabled, and long-content states are specified where relevant. Demo data is clearly labeled. - Navigation and content adapt at 375px, 768px, and 1440px without horizontal page overflow. Keyboard use, visible focus, labeled inputs, at least 44px touch targets, readable contrast, and reduced motion are supported. - Verification distinguishes rendered behavior from proposals and identifies anything still requiring a backend or external service. ## Quality bar Clear hierarchy, consistent spacing, restrained surfaces, and purposeful motion. Avoid decorative gradients, excessive cards, placeholder buttons, and invented metrics unless the project calls for them. Do not claim a feature is connected or tested without evidence.

Copy promptDownload .md

Assembled in your browser. No API key or AI request needed. Changing the fields refreshes the preview.