# Sometimesalways Com Au · Design system migration spec

> Source: https://sometimesalways.com.au  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

The design system for Sometimes Always takes its cues from a friendly local bottle shop: a place where curation is personal, the atmosphere is warm, and every label tells a story. It translates that tactile, editorial feeling into a digital framework built on earthy tones, generous forms, and a focus on product as protagonist.

**One-liner:** A boutique online bottle shop for interesting drinks with a warm, playful, and curated aesthetic.
**Keywords:** boutique · natural wine · curation · playful · warm
**Analogy:** A friendly local bottle shop with a curated, editorial aesthetic.

## 2. Color

The palette is built on a foundation of warmth. A soft peach background provides a gentle, organic field against which crisp black typography and vibrant orange accents command attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFE9C7` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#555555` | placeholder |
| `--accent` | `#EBA900` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

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

The principle is clear: warmth creates welcome, and contrast creates clarity.

## 3. Typography

The typographic voice pairs the personality of a serif with the utility of a sans. SunsetSerial-Light provides editorial character for display moments, while Founders Grotesk delivers clean readability for all functional text.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 50px | 1.2 | 400 | 0 | Hero logo and main display headings |
| h1 | 40px | 1.2 | 400 | 0 | Section headlines |
| body | 20px | 1.5 | 400 | 0 | Main body copy and product descriptions |
| caption | 12px | 1.4 | 400 | 0 | Small text and metadata |

**Type rules:**
- 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.

## 4. Spacing

A consistent, generous rhythm of 20px grounds the layout, providing ample breathing room for interactive elements and grid gaps.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 48 / 64 px
- **Rhythm:** Generous padding (20px) on interactive elements and consistent gaps (20px) in grid layouts.

## 5. Surfaces

Depth is achieved not through heavy shadows but through a nuanced layering of soft, diffuse blurs. Borders are used sparingly and are always a crisp, solid black to define edges.

- **Radius:** sm 4px · md 20px · lg 40px · pill 100px
- **Shadows:**
  - 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

## 6. Layout

The structural skeleton begins with a full-width promotional banner, leading to a hero section with its signature rounded corners. Below, a responsive grid takes over, presenting product listings as the core content.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 20px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is restrained and purposeful, serving feedback rather than spectacle. Simple opacity and transform transitions on hover states provide a sense of responsive, tactile interaction.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Opacity and transform transitions for hover states on buttons and links.
  - Smooth color transitions on interactive elements.

- **Hover:** Subtle opacity change or color shift on links and buttons.
- **Click:** Immediate response with smooth transition.
- **Transition:** 0.2s to 0.3s transitions on most interactive elements.
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is friendly, approachable, and slightly playful, mirroring the warmth of the visual system. Headlines are direct and casual, sometimes using playful arrows instead of dashes.

- **Tone:** Friendly, approachable, and slightly playful.
- **Headline style:** Direct, casual, and sometimes uses playful arrows (→) instead of dashes.
- **CTA style:** Clear and action-oriented, often using uppercase text.
- **Avoid:** Overly formal or stiff language / Dense, unreadable text blocks / Stiff, corporate design patterns

### Don'ts
- ❌ 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.

The system deliberately avoids the clinical, the corporate, and the cold, opting instead for a density that feels curated and alive.

## System Prompt (paste into AI tool)

```
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.
```