palse.gr website design: fonts, colors and UI patterns

Overview

PALSE SNACKS presents a bold, playful digital presence built around the energy of its snack products. The design system relies on a single type family—Ely Rounded across four weights—to create a cohesive, friendly voice that carries from massive hero statements to subtle legal copy. The visual rhythm alternates between high-energy warm yellow sections and calm, spacious light-gray zones, creating a breathing cadence that keeps the brand feeling approachable rather than overwhelming.

The interface is intentionally simple: no complex navigation hierarchies, no dense information architecture. Instead, the site functions as a brand experience where large typography, floating food photography, and social proof collide. The rounded letterforms of Ely Rounded echo the curved shapes of the snack products themselves, creating a subtle visual metaphor that runs through every text element. Black and white provide the structural backbone, while a vibrant yellow injects moments of joy and appetite appeal.

Colors

The palette is restrained but high-impact, built on a foundation of near-black and warm off-white with a single dominant accent.

The color logic follows a simple pattern: light gray canvas for storytelling and product information, vibrant yellow for social and community moments, and black for grounding footer content. Text inverts cleanly—near-black on light gray, white on black or yellow. The yellow is warm and saturated, avoiding the clinical feel of pure orange while maintaining enough energy to signal fun and flavor. No gradients or shadows appear in the interface; color blocks sit flat against each other with crisp edges.

Typography

Every text element uses Ely Rounded, designed by Cory Maylett. The family spans Light (300), Medium (500), Bold (700), and Heavy (900) weights, all sharing the same rounded, geometric construction. Verify licensing for these families before production use.

The type scale is built on a 2px relative unit, with sizes snapping to whole multiples: 16px (1rem), 22px (1.375rem), 28px (1.75rem), 38px (2.375rem), 50px (3.125rem), 90px (5.625rem), and 220px (13.75rem) for the largest display moments. Line heights are tight, especially for display sizes where the rounded forms need to sit close together to feel like cohesive blocks. The 220px size appears in hero contexts where the brand name or campaign hashtag dominates the viewport.

Layout

The layout is spacious and editorial, favoring generous margins over dense grids. Content sections use a consistent horizontal padding of 80px (5rem), creating a framed effect that keeps the eye centered. Vertical rhythm alternates between tight, content-packed areas and expansive breathing room—sections often carry 50px (3.125rem) to 250px (15.625rem) of vertical padding depending on their narrative role.

The header floats cleanly at the top with 20px (1.25rem) vertical padding and 80px horizontal padding, maintaining the same width constraints as the main content. A home icon and hamburger menu anchor the corners, with the brand's playful house-shaped logo mark appearing in the top left.

Main content areas follow an asymmetric two-column logic when imagery and text pair together: lifestyle photography occupies roughly half the width while Greek body copy sits in the remaining space with comfortable margins. The social media section breaks this pattern entirely, becoming a full-bleed yellow canvas where Instagram images scatter in an organic, non-grid arrangement around centered text.

The footer compresses the layout into a tighter information architecture: logo and tagline stacked above navigation columns, with a newsletter signup occupying its own visual zone. Padding here expands to 250px (15.625rem) vertically, giving the footer substantial weight and a sense of finality.

Visual language

The visual personality is unapologetically playful and snack-centric. Floating food photography—individual vegetable chips, mushroom crisps, colorful product packages—appears throughout as decorative elements, often with small curved line illustrations suggesting motion or aroma. These elements break the rectangular rigor of the layout, creating moments of organic surprise.

Photography style leans lifestyle and social: young people in casual outdoor settings, genuine laughter, product packages held naturally rather than staged. The Instagram grid section reinforces this by pulling real social content into the brand experience, complete with platform-native framing and casual composition.

The rounded aesthetic extends beyond typography into UI elements. Buttons are fully pill-shaped with 30px (1.875rem) radius. Circular elements appear as decorative dots or image masks. Even the logo mark incorporates rounded terminals and a house silhouette that feels friendly rather than architectural.

Color blocking replaces subtlety: a section is either yellow, gray, black, or white. No semi-transparent overlays, no subtle gradients, no drop shadows. This flatness keeps the design feeling contemporary and confident, letting the photography and typography carry all the emotional weight.

Components

Header

• Anatomy: Fixed-position bar with home icon (left), hamburger menu (right), and minimal vertical height
• Surface: Transparent over content, or light background when scrolled
• Typography: Navigation links use {typography.navigation} in white on dark backgrounds
• Spacing: 20px vertical padding, 80px horizontal padding
• Composition: Flex row, space-between alignment, maximum two interactive elements visible

Hero statement

• Anatomy: Massive display text, occasionally paired with floating food illustrations
• Typography: {typography.hero-display} in near-black on light gray, or white on yellow/black
• Spacing: Generous vertical padding, often 50px to 300px depending on context
• Composition: Centered or left-aligned, frequently breaking across two lines for rhythmic impact

Content section (image + text)

• Anatomy: Large lifestyle photograph (left or top), body copy block (right or below), floating food illustrations as decorative accents
• Surface: {colors.canvas} background
• Typography: Body text uses {typography.body} in {colors.ink}; occasional {typography.body-large} for emphasis
• Spacing: 80px horizontal padding, 50px vertical padding; images may bleed to edges
• Composition: Asymmetric two-column on desktop, likely stacking on smaller viewports

Social media collage

• Anatomy: Full-bleed yellow background with scattered Instagram photographs, centered headline, social platform links, campaign hashtag
• Surface: {colors.action} background
• Typography: "Join us!" uses {typography.section-display} in {colors.ink}; hashtag uses {typography.hero-display} in {colors.surface}
• Spacing: Photographs float with irregular margins; text blocks center with comfortable breathing room
• Composition: Organic, non-grid scatter of square images; text anchors the visual center

Newsletter signup

• Anatomy: Heading, descriptive paragraph, pill-shaped CTA button with arrow indicator
• Surface: Light gray or yellow background depending on section placement
• Typography: Heading uses {typography.section-display}; body uses {typography.body}; button uses {typography.label}
• Shape: Button is fully pill-shaped with {rounded.pill}
• Spacing: 20px top margin on button; generous padding around the entire module

Footer

• Anatomy: Logo with tagline, primary navigation row, secondary navigation row, copyright, legal links
• Surface: {colors.surface-inverse} background with {colors.ink} text
• Typography: Navigation uses {typography.body}; headings use {typography.section-display}; legal uses {typography.legal-copy}
• Spacing: 250px vertical padding, 80px horizontal padding; 15px top margins on stacked elements
• Composition: Left-aligned logo block, right-aligned content columns; generous vertical space between groupings

Pill button

• Anatomy: Text label with optional arrow icon, fully rounded rectangle
• Variants:
• Default: white background, black border, black text
• Inverse: transparent background, white border, white text (for dark/yellow sections)
• Accent: transparent background, colored border for secondary actions
• Shape: {rounded.pill} border radius
• Spacing: 15px vertical padding, 20px left padding, 50-55px right padding (extra room for arrow)
• Typography: {typography.label}

Responsive behavior

The design appears optimized for desktop viewing with substantial horizontal padding and large display typography. At narrower viewports, the asymmetric two-column layouts should stack vertically, with lifestyle photographs becoming full-width above their accompanying text blocks. The 80px horizontal padding should reduce proportionally, likely to 40px or 20px on tablet and mobile.

The massive hero display sizes—90px and 220px—will need aggressive scaling down, potentially to 48px or 56px on mobile to maintain readability without excessive line breaks. The social media collage's scattered image arrangement should collapse into a more structured grid or horizontal scroll to prevent visual chaos at small sizes.

Navigation, currently exposed as a hamburger menu, likely expands to a full-screen or slide-out panel on interaction. The footer should stack its columns vertically on narrow screens, with the newsletter signup moving above the navigation links to maintain conversion priority.

Practical implementation guidance

### Preserve - The single-font-family discipline; Ely Rounded at every weight carries the entire brand voice - The bold color blocking—flat yellow, flat gray, flat black without gradients or transparency - The generous horizontal padding (80px) that frames content like an editorial spread - The floating food photography with motion-line accents; these are signature brand moments - The tight line heights on display type, especially the 1.0 ratio on hero sizes

### Avoid - Introducing additional font families; the rounded personality depends on consistency - Adding drop shadows or elevation effects; the flat aesthetic is intentional - Making buttons fully rectangular; the pill shape is a core brand marker - Using the yellow as a text color; it functions exclusively as a background or accent - Overcrowding the social media section; the scattered, organic arrangement is key

### Recommended build order 1. Establish the type scale with Ely Rounded loaded at all four weights 2. Implement the color tokens, especially the yellow-to-gray-to-black section rhythm 3. Build the header with home icon and hamburger menu 4. Create the pill button component with its three variants 5. Develop the content section pattern (image + text + floating illustrations) 6. Implement the social media collage with scattered image positioning 7. Build the expansive footer with newsletter integration 8. Add the massive hero statement component for homepage impact

### Accessibility - Ensure the yellow background (#F6A800) with black text meets WCAG contrast requirements; the combination should be verified as it may be close to the 4.5:1 boundary for body text - Provide focus indicators for the hamburger menu and all pill buttons; the rounded shapes should maintain visible focus rings - Add aria-labels to the icon-only home and menu controls - Consider reducing motion for the floating food illustrations if they are animated; respect prefers-reduced-motion - Ensure the 220px display text scales down appropriately for users with zoom enabled; test at 200% browser zoom

Scope note

This guide covers the Greek homepage and its primary sections: hero, product story, social media collage, and footer. Interior pages, mobile breakpoints, and interactive states such as menu expansion, hover effects, and form validation are not represented in the supplied material. The English-language variant and the "Feel the Palse" subpage were not available for detailed analysis. Measurements reflect the exact values from the desktop interface.

More website design guides

Browse website design guides by pattern and website.