---
title: "Halara design system"
variant: extended
source: https://www.halara.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/thehalara-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Halara · Design System

> Quiet neutrals, confident fashion photography

**Theme:** light · **Industry:** fashion · **Source:** https://www.halara.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Halara’s homepage pairs restrained black-and-white storefront chrome with warm, image-led fashion campaigns. A clear sequence of category browsing, editorial collections, and dense product cards makes shopping the main interaction.

## North star

Let warm, full-bleed fashion photography lead, and keep the shopping interface crisp, white, and quiet.

## Overview

The visual identity is built on a white canvas, near-black text, and soft gray utility surfaces; the measured dark red accent is limited and should not be expanded into a dominant theme. The first view is deliberately image-led: a wide chocolate-toned campaign carries the mood, while the header and navigation remain quiet and compact. Mukta handles most interface text, with CircularBook reserved for prominent display and heading treatments, giving campaign copy a cleaner, rounder contrast against practical product labels. The page alternates broad split-image campaigns with compact four-column category rows and a dense merchandise grid. Generous white gaps separate these distinct shopping missions, while aligned card edges keep browsing orderly. Photography supplies nearly all the warm color and texture, so UI chrome stays flat, neutral, and unobtrusive. Rounded controls and fine gray borders add just enough affordance without turning the experience into a heavily elevated interface.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#121212` | `--color-soft-ink` | neutral | Primary text and dark button labels; a near-black anchor for storefront interface details. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and open space around category, campaign, and product sections. |
| Cloud Gray | `#f5f5f5` | `--color-cloud-gray` | surface | Light card and section surface, including pale product-image placeholders and subtle loading treatment. |
| Mist Gray | `#ececec` | `--color-mist-gray` | surface | Secondary pale surface and understated link-area background. |
| Fine Silver | `#dddddd` | `--color-fine-silver` | neutral | Thin button and interface borders; separates controls without adding visual weight. |
| Sale Red | `#b40a0a` | `--color-sale-red` | accent | Sparse red text accent in the measured interface; keep it secondary to warm campaign imagery. |
| Night Panel | `#0b0b0b` | `--color-night-panel` | semantic | Small inverse dark section or announcement treatment, not the general page background. |
| True Black | `#000000` | `--color-true-black` | neutral | Occasional black text detail; use sparingly alongside the softer primary ink. |
| Charcoal Text | `#333333` | `--color-charcoal-text` | neutral | Secondary headings, product descriptions, and supporting interface copy. |
| Slate Ink | `#252a2b` | `--color-slate-ink` | neutral | Navigation and small circular control icon color in measured components. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ececec` (Mist Gray) · `--color-surface-2` → `#f5f5f5` (Cloud Gray) · `--color-surface-3` → `#0b0b0b` (Night Panel) · `--color-text` → `#121212` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#000000` (True Black) · `--color-border` → `#dddddd` (Fine Silver) · `--color-accent` → `#b40a0a` (Sale Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121212` | `#ffffff` | 18.73:1 | AAA |
| `#121212` | `#ececec` | 15.86:1 | AAA |
| `#121212` | `#f5f5f5` | 17.18:1 | AAA |
| `#121212` | `#0b0b0b` | 1.05:1 | fail |
| `#ffffff` | `#ececec` | 1.18:1 | fail |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffffff` | `#0b0b0b` | 19.68:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ececec` | 17.78:1 | AAA |
| `#000000` | `#f5f5f5` | 19.26:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgba(191, 191, 191, 0.2) 25%, rgba(130, 130, 130, 0.24) 37%, rgba(191, 191, 191, 0.2) 63%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Mukta | `--font-body` | webfont | 400, 700, 500, 300 | Primary interface, navigation, captions, product labels, and supporting copy. | Mukta |
| CircularBook | `--font-display` | webfont | 400, 500, 600, 700 | Campaign display headings, major headings, and prominent CTA labels. | Manrope |

- **Mukta:** Use restrained sans-serif styling, mostly regular weight; heavier weights appear in navigation and small labels.
- **CircularBook:** Keep headings clean and rounded, generally regular weight; CTA text is heavier, with no measured tracking or forced uppercase.

### Type scale — Perfect Fifth (ratio ≈ 1.506, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1.15 | 0 | — | CircularBook | Large campaign titles layered over fashion imagery. |
| h1 | 44px | 400 | 0.93 | 0 | — | CircularBook | Primary campaign headline or prominent section heading. |
| h2 | 24px | 400 | 1.1 | 0 | — | CircularBook | Secondary campaign and collection headings. |
| h3 | 18px | 400 | 1.3 | 0 | — | Mukta | Category and editorial section titles. |
| body | 14px | 400 | 1.14 | 0 | — | Mukta | Supporting copy, navigation details, and product information. |
| caption | 13px | 500 | normal | 0 | — | Mukta | Compact product metadata and small labels. |
| button | 16px | 600 | 1 | 0 | — | CircularBook | Shopping CTA and other prominent action labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 4, 6, 10, 12, 15, 16, 20, 35, 40, 56, 80 px.
- Section rhythm 56px · element gap 20px · card padding 103px · max content width 1360px.

Use a centered storefront structure with a measured maximum width of 1360px, while campaign media can run full bleed. Keep headings aligned to the left and arrange category and editorial cards in four-column rows where shown. The measured section rhythm is spacious, with a 56px section gap and 20px element gap; preserve generous white separation around imagery. Product browsing is intentionally denser than campaign blocks, with repeated aligned cards and concise metadata.

## Shape & elevation

- Radius: button `50%` · media `50%` · badge `9999px` · pill `9999px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px`
- Shadow `sm-2` (link): `rgba(0, 0, 0, 0.07) 0px 2px 4px 0px`
- Motion: standard transition `0.3s ease` on interactive elements.

Favor flat white sections and clean image edges over layered cards. Use fine #dddddd borders for understated controls and only subtle measured shadows for small interface elements. Rounded pill-like buttons and badges provide the main shape contrast; avoid heavy drop shadows or stacked panels.

## Imagery

Use real fashion photography rather than illustration or 3D. Campaign imagery appears in large split compositions, with models and garment details framed against warm, softly lit neutral settings. Category tiles crop close to clothing or full looks and sit in tidy rows. Keep images edge-aligned and largely untreated; let garment color, fabric texture, and styling provide the visual richness.

## Components

### Store header

Compact white navigation with the Halara wordmark, category links, country selector, and utility icons in dark ink.

### Campaign split

Wide paired fashion imagery with a concise title, short supporting line, and compact shopping CTA over or beside the photo.

### Category tiles

Four-up image row with short labels, white gutters, and a left-aligned section heading.

### Editorial collection row

Four fashion-look images with concise names beneath, separated from adjacent campaigns by generous white space.

### Product cards

Dense aligned merchandise grid with pale image surfaces, small sale or offer badges, brief names, prices, and color swatches.

### Pill CTA

Compact shopping action with a rounded silhouette, clear label, and neutral or dark treatment that stays subordinate to campaign photography.

### Measured component styles

- **Primary button**: transparent background · text #252a2b · border 1px solid #dddddd · radius 50% · padding 0px · 700 24px Mukta
- **Link** (“Clothing”): transparent background · text #252a2b · radius 0px · padding 0px · 700 16px Mukta
- **Card**: background #f5f5f5 · text #333333 · radius 0px · padding 0px 0px 410px 0px · 700 20px Mukta
- **Badge** (“CLAIM”): background #f6efe9 · text #22110a · radius 20px · padding 3px 16px · 500 12px Mukta

## Do

- Keep the overall canvas white and storefront chrome quiet.
- Let warm fashion photography carry the strongest color.
- Use Mukta for most navigation, captions, and product copy.
- Reserve CircularBook-like display styling for campaign headlines.
- Alternate broad campaign blocks with compact shopping grids.
- Keep product cards aligned and metadata concise.

## Don't

- Do not turn the measured red accent into a dominant palette.
- Do not add gradients or decorative illustration to image-led sections.
- Do not crowd campaign photography with interface controls.
- Do not use heavy shadows or layered card treatments.
- Do not replace the airy section rhythm with continuous dense content.
- Do not force all headings and labels into uppercase.

## Agent prompt

Build a new Halara-style fashion storefront page with a bright Gallery White (#ffffff) canvas and restrained Soft Ink (#121212) interface text. Use warm, natural fashion photography as the main source of color; frame campaign content in broad split-image blocks, then follow with compact category rows and neatly aligned product cards. Set most navigation, captions, and product copy in Mukta or a close sans-serif equivalent, reserving a clean rounded display face for campaign headings. Use Cloud Gray (#f5f5f5) and Mist Gray (#ececec) only for quiet surfaces, Fine Silver (#dddddd) for delicate borders, and Sale Red (#b40a0a) sparingly. Keep spacing open between sections, with a denser merchandise grid where shoppers compare items. Prefer flat surfaces, subtle outlines, and rounded CTA shapes over pronounced elevation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed, two-part campaign imagery with overlay copy and CTA. | campaign entry point, shop now action | split photography, large display headline, compact CTA |
| 2 | category-nav | Left-aligned title above a row of category image tiles. | browse by category, horizontal category navigation | image tiles, compact labels, carousel arrows |
| 3 | feature-split | Full-width campaign split with copy at left and fashion images at right. | editorial discovery, shop now action | warm campaign photography, headline and copy block, CTA |
| 4 | gallery | Four image cards in one evenly spaced row. | browse outfit themes, select a collection | four-column image grid, short labels |
| 5 | feature-split | Full-width split campaign with text and fabric photography. | explore fabric story, shop now action | texture-led image, side-by-side composition, CTA |
| 6 | gallery | Section heading followed by four image tiles and labels. | browse by fabric, open a fabric collection | four-column tile grid, close-up product photography |
| 7 | feature-split | Full-width lifestyle campaign with copy at left and models across the frame. | fit discovery, shop now action | wide lifestyle photography, short headline, CTA |
| 8 | gallery | Four-up silhouette image row with concise labels beneath. | browse by silhouette, select a fit | four-column image grid, short labels |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/thehalara-com