papatui.com — Design System

1. Visual Theme & Atmosphere

Papatui is an e-commerce brand with a distinctly organic, warm character — somewhere between a heritage outdoor brand and a modern sustainable goods shop. The palette is anchored by linen tones and earthy greens, with a terracotta-orange accent that gives the entire system life and warmth. The background is clean white with an off-white dark mode variant, but the brand identity lives in the neutral warm grays (#d6d2c4, #ccc7b5) and the deep forest green (#3e4827) used for headings and buttons. Typography uses Barlow in uppercase with tight letter-spacing for titles and buttons — assertive but not aggressive. SF Mono as the body typeface is an unusual choice for e-commerce, lending a crafted, slightly technical quality that differentiates the brand from generic Shopify stores. The overall feeling: artisanal quality, earthy confidence.

2. Color Palette & Roles

Brand neutrals (the base identity):

Text hierarchy:

Interactive:

Status / labels:

3. Typography Rules

• Titles & Buttons: Barlow — A condensed, rational sans-serif used in uppercase with letter-spacing for wayfinding. Weight 500. The uppercase transform on both titles and buttons creates a consistent retail cadence.
• Body: SF Mono — "SF Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace. Monospaced body text is unexpected in e-commerce but gives Papatui a craft-forward, maker-culture personality.
• Nav spacing: --font--nav-spacing: 36px — generous horizontal gap between navigation items.

Title border: --font--title-border: 1 with 3px size — a bottom border decoration on heading elements.

4. Component Stylings

• Primary buttons: Forest green #3e4827 fill, white text, uppercase Barlow, 1px letter-spacing. Hover uses --accent-dark or shade.
• Product labels: Pill-shaped badges in #d6d2c4 (brand), #e5e5e5 (new), #f2eb78 (custom highlight), #c00000 (discount), #f2f2f2 (sold out).
• Announcements bar: announcement__link__text and announcement__bg components — likely a top-of-page promotional strip.
• Drawers: --color--drawer-bg: #ffffff — slide-over panels (cart, filters) on clean white.
• Product cards: Transparent background (--color--product-bg: rgba(0,0,0,0)) — images bleed to page background. Drop shadow rgba(33,35,34,0.08) on hover.
• Okendo reviews: --oke-* tokens present — integration with the Okendo review platform, using brand button and font styles.

5. Layout Principles

• Mobile scale: --octane-mobile-scale: 1 — explicit mobile typography scaling token.
• Sticky header: --header-is-sticky variable — header locks to viewport top.
• Spacing: 20px, 30px, 36px, 48px values suggest an 8px base grid with comfortable retail-scale whitespace.
• Nav spacing: 36px gap between nav items — wide, airy navigation.
• Product grid: Standard Shopify-style responsive grid implied by the stack (product forms, drawers, announcement bars).

6. Depth & Elevation

• Drop shadow: rgba(33,35,34,0.08) — an 8% warm-tinted shadow. Softer than a pure black shadow, aligned with the brand’s warm color temperature.
• Background alpha: rgba(255,255,255,0.8) for the sticky header — frosted glass effect on scroll.
• No hard borders on primary surfaces — depth is communicated via shadow and background contrast alone.

7. Do’s and Don’ts

Do:

• Use forest green #3e4827 for all primary CTAs and headings — it’s the color of decision
• Use terracotta #db864e only for pricing, promotions, and genuine accent moments
• Apply Barlow in uppercase for all interactive labels and headings
• Use SF Mono for body copy — it’s the brand’s personality differentiator, keep it

Don’t:

• Don’t use #C00000 outside of sale/urgency contexts — it reads as alarm
• Don’t use #f2eb78 yellow for more than one label type per page
• Don’t mix Barlow (non-uppercase) with the headline style — the uppercase transform is non-negotiable
• Don’t replace SF Mono with a more conventional sans for body — that would erase the brand’s distinctiveness

8. Responsive Behavior

• --font--button-mobile-size: 12px — buttons reduce from 13px desktop to 12px mobile.
• --octane-mobile-scale: 1 — a scaling multiplier ready to be overridden for larger-display mobile optimization.
• Header becomes sticky on scroll (--header-is-sticky).
• Mega menu and nav spacing (36px) collapse on mobile — expect a hamburger pattern.
• Drawer components (cart, filters) are optimized for touch: full-height slide-overs with white canvas.

9. Agent Prompt Guide

Quick reference:

• Background: #ffffff | Body text: #212322
• Headings + buttons: #3e4827 (forest green)
• Accent: #db864e (terracotta)
• Brand neutral: #d6d2c4 (warm sand)
• Title font: Barlow, 500, uppercase
• Body font: SF Mono, 400

Prompt starters:

• “Artisanal e-commerce brand: white canvas, forest green #3e4827 headings and CTAs, terracotta #db864e accents, warm sand #d6d2c4 brand neutrals, Barlow uppercase titles, SF Mono body.”
• “Heritage outdoor/craft shop aesthetic: earthy greens and terracotta, monospace body type (SF Mono), uppercase Barlow for navigation and buttons, minimal shadows.”

Generated by Sparkbites — extracted from live CSS analysis