CURATED · OPEN · FREE

Dae

Warm, desert-inspired haircare that is playful and inviting.

beautyhaircare

↓ Download design system (46 MB)Open in OpenDesign

Visit: https://daehair.com

📦 Browse pack contents →

Identity DNA

warmplayfulnaturaldesertinviting

A sunny desert road trip with your best hair products

Color

#E92C5BAccent

#BE6A14Ink

#6A6C77Ink soft

#FFFDF5BG

#EDD6C4BG soft

#DDA69DMuted

rgba(190,106,20,1)Line

Earthy desert warmth anchored by a creamy base and punctuated by energetic pink accents.

Typography

didone-serif · geometric-sans · mono-sans

display56px · 400
heading24px · 700
body15px · 400

Use all-caps for secondary calls to action and promotional badges. · Use uppercase monospaced text for the scrolling brand values marquee.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous padding within sections and clear vertical spacing between content blocks.

Surfaces

sm · 3px

md · 10px

lg · 0px

pill · 999px

1px solid accent brown for buttons and marquee dividers.

none

Layout

1440container

12columns

24pxgutter

768 / 1024breakpoints

Full-width hero followed by a descriptive left column with a horizontal product grid on the right.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Continuous horizontal scrolling for the values marquee.

Subtle opacity or color shift on navigation links and buttons. · Standard button press effect.

Components

button Pill-shaped with thin solid borders and uppercase text.
card Image-centric with subtle rounded corners and absolute-positioned badges.
chip Absolute 'NEW!' badges in solid pink.
input Minimal, likely thin-bordered or borderless.
hero Large cinematic photograph with text and a call-to-action button overlaid on the left.

Voice & Don'ts

Tone Warm, approachable, and slightly poetic.
Headlines Large, elegant serif typography for product names.
CTAs Clean, uppercase, sans-serif for clear calls to action.

Don't use stark, clinical white backgrounds — screenshot shows warm cream (#FFFDF5) instead.
Don't use neon or purely digital accent colors — screenshot uses natural warm pinks (#DDA69D, #E92C5B).
Don't use harsh, boxy buttons — screenshot uses rounded, pill-shaped buttons with thin borders.
Don't use dense, text-heavy layouts — screenshot relies heavily on generous whitespace and photography.
Don't use modern, minimalist sans-serifs for hero text — screenshot uses a prominent didone-serif for product names.
Don't use rigid, hard-edged grid containers — screenshot uses softer, more organic grid alignments.
Avoid: Clinical or overly technical haircare jargon.
Avoid: Harsh, neon, or purely digital color palettes.
Avoid: Rigid, grid-heavy corporate layouts.

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This is a warm, consumer-facing haircare brand site. It uses a desert-inspired palette of creams (#FFFDF5), tans (#EDD6C4), and earthy browns (#BE6A14), with energetic pink accents (#E92C5B) for promotional elements. Typography mixes elegant didone-serif displays with clean geometric-sans body text. Key critical dons: Never use stark white backgrounds, avoid neon colors, and do not use harsh boxy UI components. The layout is generous and image-heavy, relying on cinematic photography.

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