Design System
Eulogize Memorials component library and design tokens. Every component shown in its base state for reference, QA, and onboarding.
Color Tokens
Core brand colors defined as Webflow variables. Used consistently across all pages and components.
Typography
PP Eiko for headings, Rethink Sans for body. Five heading levels plus body text variants.
Heading One Sample
Heading Two Sample
Heading Three Sample
Heading Four Sample
Heading Five Sample
This is the default body text style used across the site. Rethink Sans at 18px with 150% line height provides excellent readability for memorial content. The dark purple color ensures warmth and legibility on the pampas background.
Subtitle text centered with a constrained width. Used below section headings to provide additional context.
Buttons
10 button components covering filled, outlined, arrow, and circular variants. All use Rethink Sans at 18px with 200ms transitions.
Headers
7 header variants for different page contexts: default, professional, partner, and error pages.
ID: 3f0cec65... · 43 instances · Default nav with logo, links, CTA. Contains collection lists.
ID: e21028fa... · 1 instance · Legacy header variant. Contains collection lists.
ID: fcc6a541... · 0 instances · Professional pages header. Contains collection lists.
ID: 160b4dd5... · 4 instances · Updated professional header. Contains collection lists.
ID: 0169eb9a... · 1 instance · Leaf Cremation partner header. Contains collection lists.
ID: 150b8e7d... · 1 instance · Generic partner header. Contains collection lists.
ID: 52420ea2... · 1 instance · 404 page header. Contains collection lists.
Panels & CTAs
6 section-level panel components for CTAs, demos, contact forms, and backgrounds. Collection-list-heavy components shown as references.
ID: 01fb0696... · 30 instances · Primary "Start your memorial" CTA panel. Dark purple background with centered heading and button.
ID: dc001b86... · 5 instances · B2B demo booking panel for professional pages. Dark background with form integration.
ID: 53d14603... · 14 instances · Free-start messaging section. Dark background with headline, subtext, and CTA button.
ID: 2d571e8b... · 0 instances · Start via client/partner flow panel. Unused but available.
ID: ac167455... · 3 instances · Contact form and info section with form fields and messaging.
ID: dc0214ce... · 11 instances · Background image browser/selector component for template customization.
Testimonials
3 testimonial slider components for D2C, B2B professional, and Leaf Cremation partner contexts.
ID: 11e48dd9... · 6 instances · D2C testimonial slider with quote, stars, and attribution. Carousel with prev/next navigation.
ID: b463eb2d... · 1 instance · B2B professional testimonials. Styled for funeral home director quotes with business context.
ID: c705d040... · 2 instances · Leaf Cremation partner-specific testimonials. Co-branded styling.
Layout Components
5 structural layout components for page heroes, how-it-works sections, feature cards, and content splits.
ID: 92ea5bf8... · 0 instances · Standard page hero with H1, subtitle paragraph, and single CTA button. No props.
ID: dc695e77... · 0 instances · How-it-works section with numbered steps, titles, and descriptions. No props.
ID: e432882c... · 0 instances · Hero layout with side image taking 2/3 width. No props.
ID: 9b112e32... · 3 instances · Blog/feature card grid. 5 props: tag, date, name, summary, link text.
ID: 7604a2cf... · 4 instances · Text-left, image-right split layout. No props.
Navigation & Effects
Footer, carousel navigation, FAQ accordion, scroll effects, sliders, and product composites.
ID: 39730f43... · 49 instances · Site footer with nav links, social icons, legal. Most-used component on the site.
IDs: e19eceab... / 72483611... · 28 instances each · Circular arrow buttons for carousel/slider navigation. 50px radius.
ID: 98979ff6... · 2 instances · FAQ accordion with expandable Q&A items. 1 prop: video filter.
ID: 7d25e44c... · 3 instances · Horizontal scroll card deck with snap points. Used for product showcases.
ID: 470b64c0... · 1 instance · Template theme carousel showing available design themes.
ID: 18f1f136... · 0 instances · Product bundle display component. Currently unused.
IDs: 892af8ea... / 1bab86f7... · 4+2 instances · Scroll-triggered fade effects for images.
ID: 2588fe8f... · 7 instances · Inline get-in-touch section or form block.
Spacing & Radius
Standard spacing, border radius, and transition patterns used across all components.
Cards/images/containers: 20px (--radius-base) · Buttons: 4px · Circular elements: 50px/50% · Pricing cards: 20px
Standard: 60px top/bottom · Large: 100px top/bottom · Hero: 120px top/bottom · Side padding: 16px consistent
Primary: 1360px max-width · Large: 1280px (80rem) · Small: 1000px (75%) · All centered with auto margins
Standard: transition: all 200ms ease · Applied to all interactive elements (buttons, links, hover states)
Hero split: 1fr 1fr (16px gap) · Pricing: 1fr 1fr 1fr (32px gap) · Feature benefits: 1fr 1fr flex wrap (24px gap) · Products: flex row (18px gap)
Components Needed
10 new components identified in the CRO variant gap analysis. These need to be built to implement the optimized page designs as editable Webflow pages.
6-product grid card with icon, title, description, price, and arrow CTA. For homepage and cross-sell sections.
Pricing tier card with feature list, CTA button, and "best value" badge. For pricing page redesign.
Numbered step card with title and description. 3-step horizontal layout for product and landing pages.
Inline icon strip with check marks and labels (e.g. "Free to start", "No credit card", "Download instantly").
Centered blockquote with star rating and attribution. Lighter weight than full testimonial slider.
Alternating text/image layout with benefit bullet points. For product detail pages.
Horizontal card row linking to related products. For bottom of product pages to reduce exit rate.
Subtle single-line bar linking to professional pages. Keeps B2B separate from D2C content.
Feature matrix with check/dash per pricing tier. For pricing page to clarify plan differences.
Updated card with category tag, read time, and excerpt. For blog listing page redesign.