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

# BloomChic · Design System

> Inclusive fashion, styled like a modern editorial

**Theme:** light · **Industry:** fashion · **Source:** https://bloomchic.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._

BloomChic pairs inclusive fashion merchandising with an editorial, image-led storefront. Clean white space and restrained interface styling let campaign photography and product collections carry the visual story.

## North star

Keep the interface quiet and let confident, inclusive fashion photography lead every section.

## Overview

The visual strategy is built around a white canvas and a fashion-editorial image rhythm. The opening campaign is full-bleed photography with lightweight white navigation and a compact, contrasting shop action; warm interiors and clothing colours belong to the photography rather than the interface palette. Below it, pale service strips and a promotional banner bridge into image-led category tiles, then tightly merchandised product rows. Black Figtree text keeps navigation, prices, and utility content legible without competing with the photography. Biolinum appears sparingly for display headings, adding a softer editorial note. Product cards are mostly flat, with light neutral labels and small sale or new badges. The page alternates broad photographic moments with dense, aligned retail grids, then closes with a warm off-white footer for support, company links, and app promotion. Spacing feels comfortable, while the number of visible products maintains a distinctly commercial pace.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Silver | `#efefef` | `--color-soft-silver` | surface | Pale service-strip and product-label surface; also supplies the measured hairline border tone. |
| True Ink | `#000000` | `--color-true-ink` | neutral | Primary headings, body copy, navigation, footer text, and the black promotional banner. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, product-card ground, and light navigation or badge text. |
| Cocoa Bronze | `#7c5528` | `--color-cocoa-bronze` | accent | Warm-brown text on the pale NEW product badge. |
| Coral Signal | `#eb4d3d` | `--color-coral-signal` | accent | Sale badge background, including compact percentage-off product markers. |
| Blush Veil | `#fff1ec` | `--color-blush-veil` | surface | Subtle warm-tinted surface and measured fading gradient; a secondary detail, not the main canvas. |
| Slate Gray | `#666666` | `--color-slate-gray` | neutral | Muted secondary copy in footer and supporting information. |
| Quiet Gray | `#999999` | `--color-quiet-gray` | neutral | Lower-emphasis text such as secondary product or utility details. |
| Teal Accent | `#00a695` | `--color-teal-accent` | accent | Occasional accent-coloured text; keep subordinate to black and product photography. |
| Alert Red | `#e00505` | `--color-alert-red` | semantic | Small measured red text detail; not a defining brand colour or broad interface fill. |
| Linen Tint | `#f2e5d6` | `--color-linen-tint` | surface | Rare warm border or background detail; use only as a restrained secondary neutral. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#efefef` (Soft Silver) · `--color-surface-2` → `#fff1ec` (Blush Veil) · `--color-text` → `#000000` (True Ink) · `--color-text-muted` → `#666666` (Slate Gray) · `--color-text-subtle` → `#999999` (Quiet Gray) · `--color-border` → `#efefef` (Soft Silver) · `--color-accent` → `#7c5528` (Cocoa Bronze) · `--color-accent-2` → `#eb4d3d` (Coral Signal) · `--color-accent-3` → `#00a695` (Teal Accent)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#efefef` | 18.26:1 | AAA |
| `#000000` | `#fff1ec` | 19.05:1 | AAA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#efefef` | 4.99:1 | AA |
| `#666666` | `#fff1ec` | 5.21:1 | AA |
| `#999999` | `#ffffff` | 2.85:1 | fail |
| `#999999` | `#efefef` | 2.48:1 | fail |
| `#999999` | `#fff1ec` | 2.58:1 | fail |
| `#7c5528` | `#ffffff` | 6.59:1 | AA |

### Gradients

- `linear-gradient(rgb(255, 241, 236), rgba(255, 241, 236, 0)), none`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Figtree | `--font-body` | webfont | 400, 600, 500 | Primary interface and retail type for navigation, body copy, labels, and utility content. | Inter |
| Biolinum | `--font-display` | webfont | 500, 600 | Occasional display-heading face, measured on the main heading role. | Lora |

- **Figtree:** Measured weights 400, 500, and 600. Keep body copy clean and unembellished; navigation is regular-weight.
- **Biolinum:** Measured weights 500 and 600. Use sparingly for an editorial contrast; heading tracking is slightly tight.

### Type scale — Custom (ratio ≈ 2.143, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 30px | 500 | 1 | -0.025em | — | Biolinum | Display heading treatment for prominent section titles. |
| body | 14px | 400 | 1.29 | 0 | capitalize | Figtree | Product names, descriptions, and general storefront copy. |
| caption | 12px | 400 | 1.5 | 0 | — | Figtree | Compact product details, helper text, and supporting labels. |
| nav | 16px | 400 | 2.88 | 0 | — | Figtree | Primary category navigation and top-level links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 3, 4, 6, 8, 10, 12, 16, 18, 20, 24, 32, 40 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1344px.

The page uses a wide, centered retail canvas, with the measured maximum width of 1344px and full-bleed campaign media at the top. After the hero, sections resolve into a service strip, promotional and category imagery, then 12-column product grids. Headings align to the left of product modules; category and editorial cards form orderly multi-column rows. Sections breathe with a measured 48px section gap, while small repeated product details keep the shopping experience comfortably dense. The footer changes to a warm-toned multi-column information layout.

## Shape & elevation

- Radius: card `6px` · media `6px` · badge `4px` · link `6px` · xs `4px` · sm `6px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.1) 0px 2px 10px 0px`
- Shadow `md-2` (other): `rgba(0, 0, 0, 0.05) 0px -1px 12px 0px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0.05) 0px 1px 1px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most of the storefront is flat, with white space and media edges defining sections rather than prominent shadows. Product media and cards use measured 6px corner radii; small badges use 4px corners. Very subtle measured shadow treatments appear on miscellaneous elements, while fine neutral borders provide restrained separation.

## Imagery

Photography is the primary visual content: full-width campaign imagery, diverse plus-size models, outfit close-ups, category tiles, and editorial lifestyle cards. The hero uses a cinematic room scene with its campaign lettering embedded in the image, while product imagery is consistently framed in clean cards. No 3D or illustrative style defines the page; warm photographic colours should not be mistaken for UI palette colours.

## Components

### Campaign hero

Full-bleed campaign photo with white brand and navigation overlays, handwritten campaign lettering in the image, and a compact contrasting shop action.

### Service strip

Pale horizontal band with small black delivery and shipping icons, short service claims, and compact supporting copy.

### Category tiles

Image-first fashion categories arranged in a tight row, with labels placed over the photography.

### Product rail

Twelve-column merchandising area with repeated product cards, image-led presentation, compact names and prices, and HOT or sale labels.

### Status badge

Compact 4px-radius labels, including Coral Signal sale badges with white text and Cocoa Bronze NEW labels.

### Editorial content cards

Lifestyle and behind-the-brand media cards grouped in aligned rows, with titles and concise supporting copy.

### Footer

Warm off-white information area with service links, social icons, company and support columns, app links, and payment marks.

### Measured component styles

- **Primary button** (“Top Rated”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Figtree
- **Link** (“Best Sellers We think you’ll like these ”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Figtree
- **Card** (“HOT”): background #efefef · text #000000 · radius 6px · padding 0px · 400 14px Figtree
- **Badge** (“-10%”): background #eb4d3d · text #ffffff · radius 4px · padding 0px 4px · 600 14px Figtree
- **Navigation item** (“BloomChic About UsNewStyleTop Rated Clot”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Figtree

## Do

- Let campaign and product photography occupy the visual foreground.
- Keep the default page ground Gallery White (#ffffff).
- Use Figtree for navigation, product information, and utility copy.
- Reserve Biolinum for occasional editorial display headings.
- Use Coral Signal (#eb4d3d) for small sale markers, not large panels.
- Keep product cards aligned and labels compact.
- Separate footer information into clear, quiet columns.

## Don't

- Do not turn photographic colours into interface palette colours.
- Do not add heavy shadows to every product card.
- Do not use decorative display type throughout the interface.
- Do not make accent colours compete with the product imagery.
- Do not replace the white canvas with broad saturated section bands.
- Do not overcrowd navigation or product metadata.
- Do not treat the hero as a generic text-heavy landing banner.

## Agent prompt

Build a new BloomChic-style fashion storefront page with an editorial, image-led hierarchy. Use Gallery White (#ffffff) as the main canvas and True Ink (#000000) for primary interface text. Use Figtree for navigation, body copy, product labels, and utilities; reserve the measured display face or a close substitute for occasional editorial headings. Make the lead campaign area photographic and expansive, with restrained overlay navigation and a clear shop action. Follow with quiet service information, image-based category discovery, and aligned product grids. Use Soft Silver (#efefef) for subtle separation and Coral Signal (#eb4d3d) only for small sale badges. Keep cards flat, media corners gently rounded, and footer information organized on a warm, subdued surface. Avoid adding unmeasured colours or letting interface decoration compete with the clothing photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image with overlaid logo, navigation, and shop action. | category navigation, shop campaign CTA | white overlay text, cinematic fashion image |
| 2 | other | Slim horizontal service band with centered icon-and-copy groups. | shipping reassurance, quick fulfillment detail | pale band, small line icons |
| 3 | category-nav | Promotional banner followed by a row of fashion category tiles. | sale discovery, category browsing | dark promo image, photo tiles with labels |
| 4 | feature-grid | Two wide photographic feature tiles in a side-by-side row. | seasonal discovery, shop featured edit | large image cards, overlaid titles and links |
| 5 | product-grid | Left-aligned section intro beside a horizontal row of product cards. | best-seller browsing, product carousel | product photography, compact sale badges |
| 6 | product-grid | Horizontal product rail with the section introduction at the row end. | new-arrival browsing, product carousel | repeated product cards, NEW badge |
| 7 | gallery | Four editorial image cards aligned in a single row under a left-aligned title. | browse themed edits, direct collection links | photo-led cards, overlaid editorial titles |
| 8 | content-feed | Centered section introduction above a multi-column row of story cards. | brand storytelling, view more | mixed media cards, editorial captions |
| 9 | gallery | Section heading followed by a horizontal grid of social fashion imagery. | social inspiration, follow brand | community photography, minimal section heading |
| 10 | footer | Service links above a warm-toned footer with social icons and multiple information columns. | support navigation, app download, payment reassurance | column-based links, social icons, payment marks |

## Source CSS custom properties (selected)

```css
--colorSkeleton: #efefef;
--typeHeaderPrimary: "Figtree";
--typeHeaderSpacing: -0.025em;
--typeBasePrimary: "Figtree";
--typeBaseSpacing: 0.025em;
--buttonRadius: 0px;
--colorGridOverlayOpacity: .1;
--swiper-theme-color: #007aff;
--colorBtnPrimary: #111111;
--colorBtnPrimaryLight: #2b2b2b;
--colorBtnPrimaryDim: #040404;
--colorBtnPrimaryText: #ffffff;
--colorCartDot: #ff4f33;
--colorLink: #000000;
--colorTextBody: #000000;
--colorPrice: #1c1d1d;
--colorTextSavings: #c20000;
--colorSaleTag: #1c1d1d;
--colorSaleTagText: #ffffff;
--colorBody: #ffffff;
--colorBodyDim: #f2f2f2;
--colorFooter: #fbf6f1;
--colorFooterText: #000000;
--colorBorder: #ffffff;
--colorNav: #ffffff;
--colorNavText: #000000;
--colorAnnouncement: #000000;
--colorAnnouncementText: #ffffff;
--colorHeroText: #ffffff;
--colorModalBg: #e6e6e6;
--colorImageOverlay: #000000;
--colorImageOverlayOpacity: .1;
--colorImageOverlayTextShadow: .2;
--colorSmallImageBg: #ffffff;
--colorLargeImageBg: #fbf6f1;
--colorGridOverlay: #000000;
--colorDrawers: #ffffff;
--colorDrawersDim: #f2f2f2;
--colorDrawerBorder: #e8e8e1;
--colorDrawerText: #000000;
```

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