Skip to content
DesignMunkDesignMunk Submit a site

Kindred of Ireland

kindredofireland.com
Handmade to order in Ireland
Ecommerce Shopify Homepage Folio freight-big
Share Visit site
kindredofireland.com DESKTOP · 1440
Kindred of Ireland

AI Breakdown

Design export

---
version: alpha
name: Kindred of Ireland
description: Handmade to order in Ireland
colors:
  primary: "#000000"
  secondary: "#55555a"
  neutral: "#fbf8f5"
  brand-nero: "#232427"
  brand-explosive-grey: "#c4c4c5"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: freight-big-pro
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1
  headline-md:
    fontFamily: freight-big-pro
    fontSize: 27px
    fontWeight: 300
    lineHeight: 1.19
  headline-sm:
    fontFamily: freight-big-pro
    fontSize: 23px
    fontWeight: 300
    lineHeight: 1.39
  headline-xs:
    fontFamily: freight-big-pro
    fontSize: 19px
    fontWeight: 300
    lineHeight: 1.11
  body-md:
    fontFamily: Folio Std
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.5
rounded:
  sm: 8px
spacing:
  xs: 2px
  sm: 10px
  md: 20px
  lg: 58px
  xl: 74px
components:
  button-primary:
    textColor: "#ffffff"
    rounded: 0px
    padding: 7px 0px
    height: 28px
  button-secondary:
    textColor: "#ffffff"
    rounded: 0px
    padding: 7px 0px
    height: 28px
  button-link:
    textColor: "#ffffff"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Kindred of Ireland: Overhead Tennis Hero and Italic Manifesto

## Overview

Modern-heritage fashion presented with an editorial sensibility. The UI is spacious, tone-down, and text-led so photography carries the mood. Prioritise calm pacing, high readability, and subtle ornament (italics, small caps) over graphic effects. Audience: considered fashion buyers seeking craftsmanship and made-to-order pieces.

## Colors

- **primary (#000000):** Core text and strong UI accents.
- **secondary (#55555a):** Subdued copy, captions, and secondary metadata.
- **neutral (#fbf8f5):** Linen-cream page background and section panels.
- **brand-nero (#232427):** Deep accents, overlays, and dark fills when white text is needed.
- **brand-explosive-grey (#c4c4c5):** Hairline rules, dividers, and subtle borders.
- **surface ({colors.neutral}):** Default card and section surface.
- **on-surface ({colors.primary}):** Text color on surfaces and cards.

## Typography

- Headlines use Freight Big Pro (light weights with frequent italics) across four levels: lg 32/300/1.0, md 27/300/1.19, sm 23/300/1.39, xs 19/300/1.11. Role: editorial statements, product intros, and manifesto lines.
- Body copy uses Folio Std at 16/300/1.5 for product descriptions, navigation, and utility UI.
- Availability: both Freight Big Pro and Folio Std are custom/licensed (Adobe Fonts/self-hosted), not Google. Recommended substitutes:
  - For Freight Big Pro: Playfair Display, Cormorant Garamond, or Libre Baskerville (all Google) to approximate high-contrast editorial serifs.
  - For Folio Std: Inter, IBM Plex Sans (Google), or system Arial for a neutral neo-grotesque.
- Use italics selectively for emphasis in headlines and manifesto copy; keep body text roman for legibility.

## Layout

Spacing steps are asymmetric: xs 2px for micro trims, sm 10px and md 20px for default gutters and element gaps, lg 58px and xl 74px for generous section breathing room. Build sections on a simple multi-column grid with wide outer margins; default vertical rhythm stacks on 20px increments, with lg/xl used to separate hero, manifesto, and product blocks. Keep line lengths moderate to support the light serif.

## Elevation & Depth

No shadows are used across the system. Hierarchy is expressed through scale, whitespace, and tonal shifts from neutral (#fbf8f5) to image backgrounds. Apply brand-explosive-grey (#c4c4c5) hairlines for dividers and inputs when separation is needed; avoid heavy borders.

## Shapes

Buttons are hard-edged (0px radius) to feel tailored and precise. Content containers and UI cards use a single soft radius of 8px to cushion imagery and notes without feeling bubbly. Use one shape language per element—don't mix rounded and square in the same control.

## Components

Buttons
- Primary: 28px height, text color #ffffff, 0px radius, padding 7px 0. Use on dark fills (e.g., #000000 or #232427) for clear contrast.
- Secondary: Same dimensions as primary; use for secondary CTAs next to a primary.
- Link: Text-only action with #ffffff when over imagery; reserve for low-emphasis actions.

Card
- Background #fbf8f5, text #000000, 8px radius, 16px inner padding. Use for content snippets and product summaries.

### Masthead Navigation
- Horizontal bar over imagery. Labels in Folio Std 16px/1.5 using #ffffff when over photos, switching to #000000 on neutral surfaces. Spacing: sm (10px) between items.

### Hero Billboard
- Full-bleed image/video with left-aligned copy. Headline set in Freight Big Pro headline-lg (32px/300), supporting line in Folio Std body-md (16px). Two CTAs using button-primary and button-secondary placed on a single row with md (20px) gap.

### Manifesto Block
- Section on #fbf8f5 with a small overline in Folio Std body-md, followed by multi-line headline in Freight Big Pro headline-md (27px) with selective italics. Outer spacing: lg (58px) top and bottom.

### Category Links Row
- Four quick-access links (e.g., Shirts, Dresses). Body-md text, gaps at sm (10px). Use secondary (#55555a) for default state and primary (#000000) on hover.

### Product Tile
- Container as Card (8px radius, 16px padding). Title in headline-xs (19px); price in body-md (16px). Quick-add uses button-primary (28px tall) with white text.

### Cart Drawer (Quick-Add Recommendations)
- Panel surface #fbf8f5 with brand-explosive-grey (#c4c4c5) dividers. Line items arranged on a 20px grid; action buttons keep 0px radius and 28px height.

### Country & Currency Selector
- Modal list on neutral surface with body-md entries and 20px row height multiples. Use #c4c4c5 rules between groups; active row switches to primary text.

### Search Panel
- Full-width overlay using #fbf8f5. Popular searches in body-md with sm (10px) chips; results list separated by #c4c4c5 hairlines.

## Do's and Don'ts

- Do keep copy short and let photography dominate; rely on lg (58px) and xl (74px) section spacing for pace.
- Do use italics sparingly in Freight Big Pro for emphasis; avoid italic body text.
- Do use #c4c4c5 borders for separation instead of shadows.
- Don't round buttons—keep the 0px radius; reserve the 8px radius for cards and media.
- Don't mix too many text colors; use primary (#000000) for body, secondary (#55555a) for subdued notes, and white only over dark fills or imagery.
- Don't oversize buttons; maintain the 28px height for a tailored look across the site.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #fbf8f5
- Border: #c4c4c5
- Accent/Dark: #232427

1) Hero billboard over photography
- Section background: image. Set headline in Freight Big Pro 32px, weight 300, line-height 1.0. Supporting line in Folio Std 16px/1.5. Place two CTAs: 28px height, 0px radius, white text (#ffffff) on dark fill (#000000), 20px gap. Outer padding top/bottom: 74px; sides: 20px.

2) Manifesto section on neutral stock
- Container: #fbf8f5 with 58px top/bottom padding. Overline in Folio Std 16px/1.5 using #55555a. Main copy in Freight Big Pro 27px, weight 300, line-height 1.19 with selective italics. Add a thin #c4c4c5 top border.

3) Three-up product grid with quick-add
- Page background #fbf8f5. Grid gap 20px. Each card: background #fbf8f5, 16px padding, 8px radius. Title in Freight Big Pro 19px; price in Folio Std 16px. Include an Add to Bag button 28px tall, 0px radius, white text on #232427.

4) Minimal masthead navigation
- Bar sits over content. Links set in Folio Std 16px/1.5. Use #ffffff when over photos; switch to #000000 on scroll over #fbf8f5. Space items by 10px; add #c4c4c5 divider only when needed.

## Similar Brands

- Sézane — editorial serif over warm neutrals; more decorative UI and larger CTAs than Kindred.
- COS — minimal layouts with restrained palettes; COS leans harsher sans-serif throughout.
- Reformation — fashion-first photography with simple grids; brighter color accents and bolder CTA sizing.
- The Row — luxurious understatement, cream backdrops, delicate type; far fewer on-page prompts than Kindred.

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