CURATED · OPEN · FREE

Sometimesalways Com Au

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

ConsumerCurationWarmEditorialProduct

↓ Download design system (27 MB)Open in OpenDesign

Visit: https://sometimesalways.com.au

📦 Browse pack contents →

Identity DNA

boutiquenatural winecurationplayfulwarm

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

Color

#EBA900Accent

#000000Ink

#333333Ink soft

#FFE9C7BG

#555555Muted

rgba(0,0,0,0.1)Line

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

Typography

didone-serif · grotesque-sans

display50px · 400
h140px · 400
body20px · 400
caption12px · 400

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.

Spacing

4px

8px

16px

20px

24px

32px

48px

64px

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

Surfaces

sm · 4px

md · 20px

lg · 40px

pill · 100px

1px solid black or #333333

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)

Layout

1280container

12columns

20pxgutter

768 / 1024breakpoints

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

Motion & Interaction

200msmicro

300mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Opacity and transform transitions for hover states on buttons and links. · Smooth color transitions on interactive elements.

Subtle opacity change or color shift on links and buttons. · Immediate response with smooth transition.

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.

Voice & Don'ts

Tone Friendly, approachable, and slightly playful.
Headlines Direct, casual, and sometimes uses playful arrows (→) instead of dashes.
CTAs Clear and action-oriented, often using uppercase text.

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.
Avoid: Overly formal or stiff language
Avoid: Dense, unreadable text blocks
Avoid: Stiff, corporate design patterns

Inside the pack — real screenshots

Sometimesalways Com Au — 桌面首屏（hero） — 桌面首屏（hero）

Sometimesalways Com Au — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko