---
name: Sometimesalways Com Au
description: "This site is worth including as a prime example of a warm, playful, and curated e-commerce design that avoids the cold, clinical look of many modern online stores."
version: alpha

colors:
  background: "#FFE9C7"
  primary: "#000000"
  secondary: "#333333"
  tertiary: "#EBA900"
  neutral: "#555555"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 50px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0"
  h1:
    fontFamily: grotesque-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 20px
  lg: 40px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A boutique online bottle shop for interesting drinks with a warm, playful, and curated aesthetic.

*A friendly local bottle shop with a curated, editorial aesthetic.*

## Colors

Warm, earthy background with high-contrast black typography and a vibrant orange accent for interactive elements.

- **Background (`#FFE9C7`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#EBA900`)** — uses `accent` token
- **Muted (`#555555`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** grotesque-sans
- **Mono:** grotesque-sans

- Use SunsetSerial-Light for the main display logo and serif accents.
- Use Founders Grotesk for all body text, navigation, and UI elements.
- Apply bold weight sparingly, mainly for emphasis within sentences.

## Layout

Full-width promotional banner, hero section with rounded corners, followed by a responsive grid for product listings.

*Rhythm:* Generous padding (20px) on interactive elements and consistent gaps (20px) in grid layouts.

## Elevation & Depth

- 0px 2px 0px 0px rgba(0, 0, 0, 0.035)
- 0px 5px 40px 0px rgba(0, 0, 0, 0.16)
- 0px 8px 24px 0px rgba(0, 0, 0, 0.16)
- Borders: 1px solid black or #333333

## Shapes

- `sm`: 4px
- `md`: 20px
- `lg`: 40px
- `pill`: 100px

## Components

- **button:** Pill-shaped buttons with generous padding, often with a thin 1px border.
- **card:** Image-forward cards with large rounded corners (20px or 40px) and minimal text below.
- **chip:** Small pill-shaped tags (e.g., 'Progressive', 'Traditional') with a 1px border.
- **input:** Simple text inputs or search fields with minimal styling.
- **hero:** Large, rounded-corner image container with the brand name overlaid in a serif font.

## Do's and Don'ts

**Don't:**
- Don't use a cold, clinical white background — screenshot shows a warm peach background.
- Don't use a strictly minimalist, sparse layout — screenshot shows a dense, image-rich editorial layout.
- Don't use sharp, 0px border-radius on cards — screenshot shows large 20px or 40px rounded corners.
- Don't use rigid, stiff fonts — screenshot shows a mix of a playful serif and a clean grotesque sans.
- Don't use a high-contrast dark mode — screenshot uses a warm, light palette.
- Don't use complex, multi-color gradients — screenshot relies on solid warm colors and photography.

---

## System Prompt (paste into AI agent)

```
This is a boutique online bottle shop for interesting drinks. The design DNA is warm, playful, and editorial, centered around a soft peach background (#FFE9C7) and crisp black typography. It uses a combination of a playful serif (SunsetSerial) for the logo and display text, and a clean grotesque sans (Founders Grotesk) for all body copy and UI elements. A vibrant orange (#EBA900) serves as the primary accent. Critical don'ts: Don't use cold, clinical white backgrounds; instead, use warm, earthy tones. Don't use sharp corners; screenshots show large 20px or 40px rounded corners on all cards and images. Don't use rigid, corporate layouts; the design is image-forward and editorial. The layout is responsive, featuring full-width promotional banners and a grid-based product display. Interactive elements have generous padding and subtle transitions.
```