Skip to content
DesignMunkDesignMunk Submit a site

Podab

podab.com
Gentle, efficient drying cabinets that extend textile lifespan.
Ecommerce Technology Next.js Tailwind Homepage Degular neue-haas-unica
Share Visit site
podab.com DESKTOP · 1440
Podab

AI Breakdown

Design export

---
version: alpha
name: Podab
description: Gentle, efficient drying cabinets that extend textile lifespan.
colors:
  primary: "#1f190d"
  secondary: "#8e8c84"
  tertiary: "#fff26c"
  neutral: "#fffef6"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: degular-display
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1
  headline-md:
    fontFamily: degular-display
    fontSize: 53px
    fontWeight: 400
    lineHeight: 1.21
  headline-sm:
    fontFamily: neue-haas-unica
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: 0.056em
  headline-xs:
    fontFamily: neue-haas-unica
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.21
  body-md:
    fontFamily: neue-haas-unica
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.15em
rounded:
  sm: 8px
  md: 32px
spacing:
  xs: 6px
  sm: 16px
  md: 24px
  lg: 38px
  xl: 128px
components:
  button-primary:
    backgroundColor: "#c7c5bc"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 15px 8px
    height: 43px
  button-secondary:
    backgroundColor: "#c7c5bc"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 15px 8px
    height: 43px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 32px 38px
---

# Podab: Oversized Display Type Over Warm Industrial Photography

## Overview

Podab's interface aims for industrial confidence with Scandinavian restraint. Expect spacious sections, warm neutral backgrounds, and minimal chrome so product photography can lead. The tone is professional and precise, with quiet typographic hierarchy rather than heavy decoration. When a token doesn't exist, prefer clarity, wide margins, and neutral contrast over added color or effects.

## Colors

- **primary (#1f190d):** Deep umber used for headlines and core text on light surfaces.
- **secondary (#8e8c84):** Soft nickel gray for borders, icons, and muted metadata.
- **tertiary (#fff26c):** Signal yellow accent for attention cues and high-priority highlights.
- **neutral (#fffef6):** Linen-tinted background and card surface.
- **surface ({colors.neutral}):** Alias of neutral for page backgrounds and panels.
- **on-surface ({colors.primary}):** Alias of primary for text and icons on light surfaces.

## Typography

- Degular Display (headline-lg/md): proprietary (self-hosted). Use for large headlines at 80px (lh 1) and 53px (lh 1.21). Substitutes when Degular is unavailable: Manrope, Sora, or Plus Jakarta Sans.
- Neue Haas Unica (headline-sm/xs, body-md): proprietary (self-hosted). Use for subheads at 36px (ls 0.056em, lh 1.19) and 24px (lh 1.21), and for body at 16px (lh 1.5, ls 0.15em). Substitutes: Inter, IBM Plex Sans, or Source Sans 3.
- Keep headings sentence-case, generous line-height on display copy against photography, and use tracked body for short blurbs and labels.

## Layout

Spacing is generous and sectional: xl 128px separates major bands, lg 38px spaces content groups, md 24px is the default intra-component gap, sm 16px handles dense clusters, and xs 6px is for icon or chip gaps. Use a responsive, multi-column grid (e.g., 12-col) with wide gutters so imagery and 80px headlines don't collide. Limit headline measure to keep 80px text readable over photography and reserve xl spacing above/below hero and lead sections.

## Elevation & Depth

Depth is minimal. The only measured shadow is a soft sm layer (rgba(0,0,0,0.1) 0px 20px 25px -5px, plus a smaller blur) for floating elements like sticky bars or overlays. Most hierarchy comes from warm/neutral surfaces, crisp typography, and whitespace. When separation is needed, prefer secondary (#8e8c84) hairlines over heavier shadows.

## Shapes

Two radii define the language: sm 8px for cards, inputs, and images; md 32px for CTAs and chips forming distinct pills. Use square corners for inline links and dividers. Pills signal interactivity and priority; rectangles indicate content containers.

## Components

Buttons
- Primary/Secondary: background #c7c5bc with text in #1f190d, 32px radius, 43px height, 15px×8px padding. Reserve Primary for main flows; Secondary for adjacent or repeated actions.
- Link: text-only, #1f190d, no radius; use for low-emphasis navigation.

Card
- Background #fffef6, text #1f190d, 8px radius, 32px×38px padding. Use for product summaries, features, and contact blocks.

### Announcement Bar
Top strip for events or notices. Body-md at 16px; surface #fffef6 with primary text and optional sm shadow for stickiness.

### Hero Masthead
Full-bleed photography with headline-lg at 80px (Degular Display), single or double line. CTA group uses button tokens; keep at least lg 38px clearance from image edges.

### Category Row
Row of quick links (e.g., Drying cabinets, Tumble dryers). Set in headline-xs or body-md with md 32px pill radius when treated as chips; border or text in secondary.

### Product Card Grid
Cards use the card token. Title in headline-xs (24px), capacity/meta in body-md. Include Compare and Quote actions using button-secondary or link styles.

### Stat Banner (64%)
Oversized numeric callout using headline-md or headline-lg depending on space; supporting copy in body-md. Use tertiary accent sparingly for emphasis.

### Industry Tiles
Five-up grid linking to vertical solutions. Headline-xs for labels; use md 32px pill links for "Explore industry". Maintain lg 38px gaps between tiles.

### Feature List with Icons
Bulleted list of capabilities. Headline-sm (36px) for the section title, body-md for items; 6–16px gaps between icon and text, md 24px between items.

### Lead Forms (Meeting, Catalogue, Newsletter)
Form fields in 8px radius rectangles on neutral surfaces. Labels body-md; primary submit button at 43px height. Use secondary for privacy notes and helper text.

## Do's and Don'ts

- Do keep major sections separated by exactly 128px to maintain the airy, industrial rhythm.
- Do use 32px-radius pills for primary actions; reserve 8px rectangles for content and forms.
- Do use secondary (#8e8c84) for hairline dividers instead of heavy borders or shadows.
- Don't add new accent colors; rely on tertiary (#fff26c) for high-emphasis highlights only.
- Don't overtrack long paragraphs; the 0.15em letter-spacing is best for short blurbs and labels.
- Don't place 80px headlines over busy areas of photos; ensure a calm background or shorten the line.

## Agent Prompt Guide

Quick reference — text/background/border/accent
- Text: #1f190d (on-surface)
- Background: #fffef6 (surface)
- Border: #8e8c84 (secondary)
- Accent: #fff26c (tertiary)

1) Build the hero
- Background: full-bleed image.
- H1: "Professional drying & laundry solutions", 80px/1, font-family: 'Degular Display', Manrope, sans-serif; color: #1f190d if on a light photo or place on a #fffef6 panel.
- CTAs: Primary button — bg #c7c5bc, text #1f190d, radius 32px, height 43px, padding 15px 8px; Secondary button same styling. Spacing between CTAs: md 24px; section padding: xl 128px top/bottom.

2) Product card grid
- Card: bg #fffef6, text #1f190d, radius 8px, padding 32px 38px.
- Title: 24px/1.21 'Neue Haas Unica', Inter, sans-serif.
- Meta/body: 16px/1.5, letter-spacing 0.15em.
- Grid gap: lg 38px.

3) Industry tiles with pill links
- Tile labels: 24px 'Neue Haas Unica'.
- Action pill: outline 1px #8e8c84, text #1f190d, radius 32px, height 43px, padding 15px 8px.
- Section spacing: xl 128px; tile gap: lg 38px.

4) Feature list
- Section title: 53px/1.21 'Degular Display'.
- Items: 16px/1.5 'Neue Haas Unica', icon gap xs 6px, item gap sm 16px.
- Optional accent bullet or icon tint: #fff26c.

5) Lead form + submit
- Inputs: 8px radius rectangles on #fffef6 with 1px border #8e8c84.
- Labels/help: 16px/1.5.
- Submit: Primary button spec — bg #c7c5bc, text #1f190d, radius 32px, height 43px.
- Container padding: lg 38px; section top/bottom: xl 128px.

## Similar Brands

- Electrolux Professional — industrial appliances with restrained palettes; Podab is warmer and uses larger display type.
- Miele Professional — clean product grids and minimal chrome; Podab leans more on photography and pill CTAs.
- Gaggenau — bold full-bleed imagery and quiet typography; Podab is less luxury, more utilitarian.
- Bosch Home — neutral surfaces and pragmatic layouts; Podab uses a stronger yellow accent and larger headlines.

More like this

Browse Ecommerce →
wizcommerce.com
WizCommerce AI
WizCommerce
Built for Wholesale. Powered by AI.
Homepage · 2 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 3 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 4 days ago
auntfannies.com
Aunt Fannie’s Ecommerce
Aunt Fannie’s
Cleaning differently: no harsh chemicals, plant-based, pet-friendly goodness
Homepage · 4 days ago