byebyebad-com
Playful, buoyant, and tactile personal care ecommerce. Saturated chartreuse and warm cream backgrounds are animated by iridescent 3D soap bubbles, oversized pill-shaped CTA buttons, and friendly lowercase typography.
Visit siteRated
6.6/ 10
From 16 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.
- AI scorejudged
- 8.4
- Systemmeasured
- 4.1
- Distinctionmeasured
- 7.9
- on the grid
- 34%
- vertical rhythm
- 13%
- type on a scale
- 58%
- contrast passing AA
- 60%
- unlike the library
- 0.27
- model craft
- 7.4/10
- model deviation
- 5.3/10
Colour
Background#f5f0e7
Text#244233
Accent#ff4a00
Surface#d8fea2
Muted#56724e
Typefaces
- Display
- tobias
- Body
- oracle
- Mono
- —
- Source
- self_hosted
- Scale
- 15 · 16 · 21 · 22 · 23 · 24
Layout
- Grid
- —
- Container
- —
- Spacing base
- 5px
- Radius
- 20px · 999px
Capture
- Category
- ecommerce
- Sections
- 16
- Captured
- 2026-08-30
- Rhythm
- cyan → lime x3 → periwinkle x2 → split → cream → lime → cream x4 → sand → cream → olive
Type rules
- display headings rendered in lowercase with tight line-height
- body text set at 46 characters per line with 0.02em tracking
Colour rules
- broad color blocking alternates chartreuse and cream across sections
- vibrant orange is reserved for marquee icons, interactive pills, and review borders
Voice rules
- display copy uses all-lowercase conversational greetings
- pair playful 'bye bye bad' phrasing with 'hello good' framing
Holds it together
- use pill-shaped buttons with rounded outlines or solid fills for every call to action
- alternate bold chartreuse, periwinkle, and warm cream full-bleed section backgrounds
- insert repeating marquee tickers between content sections with waving hand glyphs
Contrast
text on background9.7:1 AAA
muted text on background4.7:1 AA
text on surface9.8:1 AAA
accent on background3.0:1 fail
background on accent3.0:1 fail
Type, measured
- Body
- 15px / 1.2
- Measure
- 46 characters
- Display
- 120px / 1.08
- Tracking
- 0em display
- Scale ratio
- 1.68
Voice
- Tone
- playful, conversational
- Sentences
- short
- Person
- second
- Vocabulary
- plain
- Calls to action
- shop, view, subscribe, learn
Built with
- Builder
- —
- Framework
- —
- Motion
- three
- WebGL
- —
- Nav
- top_bar, 5 items
- Length
- 11.9 screens
Sections in page order
3 marked strong · 16- 00
hero
Iridescent soap bubbles float dynamically around a 3D product render set against a bright turquoise and lime backdrop.
- Mood
- playful + dreamy
- Layout
- 1 col · centered · airy
- 01
statement
Bright lime green statement section pairing elegant serif body copy with a playful, bold marquee ticker below.
- Mood
- playful + warm
- Layout
- 1 col · stacked · balanced
- 02
showcase
Vibrant chartreuse product showcase featuring three tactile handwash bottles framed by bright blue sky photography and subtle pill price tags.
- Mood
- playful + bold
- Layout
- 3 col · grid · balanced
- 03
cta
Hyper-minimal, vibrant chartreuse field containing a single expansive oval button inviting the user to shop.
- Mood
- playful + quiet
- Layout
- 1 col · centered · airy
- 04
announcement
A rhythmic, pastel periwinkle ticker ribbon interspersing cheerful benefit copy with whimsical graphic icons.
- Mood
- playful + bold
- Layout
- 16 col · full bleed · dense
- 05
statement
A vibrant periwinkle and cyan typographic statement featuring playful inline glyphs paired with a rounded ingredient CTA button.
- Mood
- playful + bold
- Layout
- 16 col · stacked · airy
- 06
showcase
StrongVibrant two-tone split showcase contrasting sky blue and hot pink with pastel lime typography and floating product.
- Mood
- playful + bold
- Layout
- 1 col · split · airy
- 07
showcase
StrongWarm, playful ingredient showcase featuring bright orange modular floral and pill shapes scattered across a soothing cream canvas.
- Mood
- playful + warm
- Layout
- 2 col · split · airy
- 08
cta
Joyful full-bleed lifestyle banner featuring expressive photography framed by all-lowercase lime green typography and a matching pill button.
- Mood
- playful + warm
- Layout
- 16 col · full bleed · airy
- 09
cta
Soft cream newsletter CTA section featuring friendly lowercase blue typography with an underlined link and an outlined pill button.
- Mood
- quiet + warm
- Layout
- 12 col · centered · airy
- 10
showcase
Vibrant, sun-drenched beauty showcase pairing saturated split-screen product photography with an energetic lower marquee ticker.
- Mood
- playful + bold
- Layout
- 1 col · stacked · balanced
- 11
testimonial
Warm, neatly gridded customer reviews framed by delicate orange borders and bold monochrome typography on soft cream.
- Mood
- warm + editorial
- Layout
- 3 col · grid · balanced
- 12
cta
Ultra-minimalist, quiet call-to-action featuring a single outlined pill button centered against a wide, warm cream canvas.
- Mood
- quiet + warm
- Layout
- 3 col · centered · airy
- 13
feature
Tactile, warm product feature pairing soft sand tones and cyan typography with clean studio photography above a bold graphic marquee.
- Mood
- warm + playful
- Layout
- 2 col · split · balanced
- 14
gallery
A cheerful social feed gallery strip floating above an expansive cream space anchored by a punchy orange pill button.
- Mood
- playful + warm
- Layout
- 8 col · stacked · airy
- 15
footer
StrongAn earthy, all-lowercase olive green footer with airy multi-column spacing and subtle illustrative brand badges.
- Mood
- warm + playful
- Layout
- 4 col · grid · airy
