milopet-com
Warm, accessible, and grounded in emotional pet storytelling. Crisp translucent feature cards and breakdown tables sit directly over candid, documentary-style pet photography. The rhythmic shift between energetic lime green, clean white, and deep forest green creates high trust and approachability.
Visit siteColour
Background#ffffff
Text#032e1c
Accent#1fcb60
Surface#e9f9d7
Muted#042f1c
Typefaces
- Display
- Radio Canada Big
- Body
- Radio Canada Big
- Mono
- —
- Source
- Scale
- 12 · 14 · 16 · 20 · 24 · 30
Layout
- Grid
- —
- Container
- —
- Spacing base
- 8px
- Radius
- 12px · 24px
Capture
- Category
- other
- Sections
- 19
- Captured
- 2026-08-30
- Rhythm
- pale green → electric lime → white → pale green → white → dark forest x3 → electric lime → white x2 → dark forest x3 → electric lime x2 → dark forest → white x2
Type rules
- display headlines set in sentence case with tight tracking at -0.036em
- body text set in Radio Canada Big at 16px with line-height 1.63
- structural corner tags and stamps rendered in compact uppercase stacks
Colour rules
- deep forest green (#032e1c) serves as the primary dark theme and main text color
- electric lime (#b4ea7a) is used for full-width announcement banners and secondary accents
- bright emerald (#1fcb60) is reserved for interactive buttons and pill indicators
Voice rules
- frame complex pet insurance terms into plain everyday spanish
- support every pricing assertion with breakdown receipts
- pair practical benefits with an urgent action CTA button
Holds it together
- place glassmorphic white pricing and feature cards directly over full-bleed lifestyle photography
- alternate between deep forest green blocks and vibrant light green transition banners
- pair interactive checkmarks and step numbers in emerald green circles
- anchor all primary call-to-action buttons with diagonal arrow pill badges
Contrast
text on background14.9:1 AAA
muted text on background14.7:1 AAA
text on surface13.5:1 AAA
accent on background2.1:1 fail
background on accent2.1:1 fail
Type, measured
- Body
- 16px / 1.63
- Measure
- 189 characters
- Display
- 56px / 1.07
- Tracking
- -0.036em display
- Scale ratio
- 1.37
Voice
- Tone
- approachable, transparent, empathetic, reassuring
- Sentences
- medium
- Person
- second
- Vocabulary
- plain
- Calls to action
- calcula, consigue, empieza
Built with
- Builder
- framer
- Framework
- —
- Motion
- —
- WebGL
- —
- Nav
- top_bar, 7 items
- Length
- 15.4 screens
Sections in page order
19- 00
hero
Warm and inviting hero framing a lifestyle pet scene behind a centered translucent feature card.
- Mood
- warm + playful
- Layout
- 1 col · centered · balanced
- 01
statement
Vibrant lime-green statement section with high-contrast, left-aligned sans-serif text delivering a confident brand message.
- Mood
- bold + playful
- Layout
- 1 col · asymmetric · airy
- 02
comparison
An intimate, warm photographic scene overlaid with a crisp comparison card demonstrating veterinary cost savings.
- Mood
- warm
- Layout
- 1 col · centered · balanced
- 03
video
A friendly and lighthearted explainer section featuring a centered video card framed in soft lime green tones.
- Mood
- playful + warm
- Layout
- 1 col · stacked · airy
- 04
feature grid
Friendly three-step onboarding guide using pastel green cards, pet photography, and UI previews to explain claims.
- Mood
- playful + warm
- Layout
- 3 col · grid · balanced
- 05
statement
A stark deep green statement strip displaying bold sans-serif Spanish copy with high typographic clarity.
- Mood
- bold + clinical
- Layout
- 1 col · full bleed · airy
- 06
feature
A warm candid pet photograph serves as a full-bleed backdrop for a modular white insurance coverage checklist with a bright green CTA.
- Mood
- warm + playful
- Layout
- 16 col · asymmetric · dense
- 07
feature
Deep forest green feature section with minimal typography, horizontal rule dividers, and a floating call-to-action bar.
- Mood
- quiet + clinical
- Layout
- 2 col · grid · balanced
- 08
statement
Crisp lime green statement strip introducing social proof with bold, high-contrast dark green typography.
- Mood
- playful + bold
- Layout
- 1 col · full bleed · airy
- 09
testimonial
Clean, light green review cards arranged neatly above a high-contrast Trustpilot endorsement bar and action button.
- Mood
- warm + clinical
- Layout
- 3 col · stacked · balanced
- 10
faq
A clean and orderly FAQ accordion list anchored by bright green numbered badges.
- Mood
- quiet + warm
- Layout
- 1 col · stacked · balanced
- 11
statement
Heartwarming photographic story section set inside a car, using dark atmospheric framing and clean typography to highlight dog adoption partnerships.
- Mood
- warm + editorial
- Layout
- 1 col · full bleed · balanced
- 12
feature
Deep forest green manifesto section with refined two-column editorial typography and rhythmic divider rules.
- Mood
- editorial + quiet
- Layout
- 2 col · split · airy
- 13
cta
An inviting outdoor pet photo anchored by a centered framed overlay card with clear call-to-action messaging.
- Mood
- warm + playful
- Layout
- 3 col · centered · airy
- 14
statement
Vibrant lime-green statement banner with bold, left-aligned dark green typography and generous breathing room.
- Mood
- bold + playful
- Layout
- 1 col · full bleed · airy
- 15
cta
Vibrant lime-green contact panel organizing communication channels into clean horizontal rows with understated modernist typography.
- Mood
- bold + playful
- Layout
- 3 col · stacked · balanced
- 16
cta
Warm, full-bleed partnership CTA featuring an energetic close-up dog photo with clean white typography and a bright green action button.
- Mood
- warm + playful
- Layout
- 12 col · full bleed · balanced
- 17
showcase
Clean, warm blog showcase featuring soft green article cards, pet photography, and understated rounded tags.
- Mood
- warm + playful
- Layout
- 3 col · grid · balanced
- 18
footer
A functional, stark white closing section combining trusted partner logos with fine-print regulatory compliance and social links.
- Mood
- clinical + quiet
- Layout
- 1 col · stacked · balanced
