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

# Flowers for Society · Design System

> Everyday fashion framed with editorial calm

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

A fashion storefront pairs spacious product browsing with campaign photography and a distinctive cobalt-blue brand accent. Clean white sections give way to a single blue vision band, while rounded controls keep shopping approachable.

## North star

Let neutral fashion photography and open white space lead, using cobalt blue as a precise brand anchor rather than a general decoration.

## Overview

The visual strategy balances an editorial fashion mood with a straightforward shopping journey. White is the dominant interface surface: it frames the hero, product grid, brand story, reviews and footer content, allowing campaign photography to carry much of the visual character. The hero itself uses a soft, neutral-toned photograph with large white uppercase display text and a pill-shaped pale CTA. Cobalt blue (#203b90) is the defining brand signal, visible in the wordmark, navigation and links, and used as a full-width vision section that interrupts the white page rhythm. Integral supplies oversized, direct display headings; Soehne handles navigation, product details and body copy with a restrained sans-serif voice. Content shifts between centered campaign moments and left-aligned product browsing, with a five-column arrivals grid and varied split or multi-column lower sections. Keep surfaces mostly flat, use fine blue borders sparingly, and preserve generous breathing room around imagery and text.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Society Cobalt | `#203b90` | `--color-society-cobalt` | brand | Primary brand color for the vision band, wordmark, navigation, headings, links and footer. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and clean content surface behind the hero, product listings, brand story and reviews. |
| Soft Chalk | `#f1f1f1` | `--color-soft-chalk` | neutral | Pale button and section surface, including light footer and shopping-control treatments. |
| Border Blue | `#4158a1` | `--color-border-blue` | accent | Subtle blue hairlines, measured most prominently around footer elements. |
| Muted Cobalt | `#394e92` | `--color-muted-cobalt` | accent | Secondary blue text accent; use as a restrained variation alongside the primary brand blue. |
| Soft Black | `#181817` | `--color-soft-black` | neutral | Dark text on pale shopping buttons, including uppercase CTA labels. |

### Semantic aliases

`--color-canvas` → `#203b90` (Society Cobalt) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#f1f1f1` (Soft Chalk) · `--color-text` → `#ffffff` (Gallery White) · `--color-border` → `#4158a1` (Border Blue) · `--color-accent` → `#203b90` (Society Cobalt) · `--color-accent-2` → `#394e92` (Muted Cobalt)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#203b90` | 10.05:1 | AAA |
| `#ffffff` | `#f1f1f1` | 1.13:1 | fail |
| `#203b90` | `#ffffff` | 10.05:1 | AAA |
| `#203b90` | `#f1f1f1` | 8.9:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255))`
- `linear-gradient(to right, rgb(32, 59, 144), rgb(32, 59, 144))`
- `linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255))`
- `linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(to right, color(srgb 1 1 1 / 0.3), color(srgb 1 1 1 / 0.3))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Soehne | `--font-body` | webfont | 400, 700 | Body copy, navigation, product names, prices, links, captions and secondary headings. | Inter |
| Integral | `--font-display` | webfont | 400 | Display, hero and emphatic section headings. | Oswald |

- **Soehne:** Use regular weight for the restrained interface voice; keep natural case for copy and uppercase for selected CTA labels.
- **Integral:** Regular-weight, geometric display lettering; hero and primary campaign headings use uppercase, with no measured tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.354, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 82px | 400 | 1 | 0 | — | Integral | Oversized campaign display text, such as the hero headline. |
| h1 | 61.5px | 400 | 1 | 0 | uppercase | Integral | Uppercase hero or primary page headline. |
| h2 | 41px | 400 | 1.3 | 0 | — | Soehne | Section headings and prominent editorial statements. |
| h3 | 31px | 400 | 1.15 | 0 | — | Integral | Product-group headings and emphatic section titles. |
| h4 | 28px | 400 | 1.3 | 0 | — | Soehne | Supporting headings within brand and content sections. |
| body | 18px | 400 | 1.3 | 0 | — | Soehne | Brand narrative, review text and general explanatory copy. |
| caption | 14px | 400 | 1.1 | 0 | — | Soehne | Small labels, product notes and understated metadata. |
| nav | 14px | 400 | 1.3 | 0 | — | Soehne | Header navigation and compact utility links. |
| link | 18px | 400 | 1.3 | 0 | — | Soehne | Product titles and inline shopping or editorial links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 3, 5, 6, 8, 10, 12, 15, 20, 22, 30, 40, 45, 50, 56, 90 px.
- Section rhythm 50px · element gap 6px · card padding — · max content width 1340px.

The page uses a comfortable, editorial rhythm with a measured maximum content width of 1340px. The first viewport is a full-bleed photographic hero beneath a floating, inset navigation bar. Product arrivals use a five-column grid, while brand storytelling moves into two-column content and reviews into a multi-column block. A full-width cobalt vision band provides a strong break between white sections. Headings are centered for campaigns and brand moments, while product headings and lower content align left. Preserve generous section spacing and avoid making the interface feel crowded.

## Shape & elevation

- Radius: button `9999px` · media `2px` · badge `9999px` · nav `5px` · xs `2px` · pill `9999px`
- Shadow `md` (nav): `rgba(0, 0, 0, 0.07) 0px 4px 18px 0px`
- Motion: standard transition `0.175s linear` on interactive elements.

Most content is flat, with whitespace and background changes doing the structural work. The header floats as a rounded white navigation panel with a restrained soft shadow. Use thin blue hairlines sparingly, most notably in the footer. Buttons and badges are pill-shaped; media corners are only subtly rounded. Avoid heavy card shadows or layered panels.

## Imagery

Large fashion and footwear photography is the main expressive device, not illustration or 3D. The hero shows a seated model against a pale, softly textured setting, framed full-bleed with flowers as a vivid detail. Product listings rely on image-led tiles with little surrounding decoration. Keep photography natural, softly lit and neutral-toned so clothing and products remain prominent; the images may introduce colors outside the interface palette.

## Components

### Floating navigation

Inset white rounded bar over the hero, with left-side shop and about links, centered blue wordmark, and search, account and bag icons at right; use restrained shadow.

### Campaign hero

Full-bleed fashion photo with a small uppercase campaign label, oversized white Integral headline and pale pill-shaped SHOP NOW button.

### Product arrivals grid

Five-column image-led product presentation on white, with left-aligned section title, linked product names, prices and compact NEW badges.

### Vision band

Full-width Society Cobalt section with a short brand statement, explanatory copy and a single editorial link.

### Outline CTA

Uppercase Soehne label inside a fully rounded outline button; use a pale border and text when placed on a dark blue section.

### Review block

Centered review heading and rating above multi-column customer testimonials, with compact controls and minimal card framing.

### Multi-column footer

White lower section with purpose-led content, image tiles, grouped support and brand links, newsletter form and restrained blue details.

### Measured component styles

- **Primary button** (“SHOP NOW SHOP NOW”): background #eeeeee · text #181817 · border 1px solid · radius 120px · padding 16px 30px 15px 30px · 400 16px Soehne · uppercase
- **Secondary button** (“ABOUT US ABOUT US”): transparent background · text #eeeeee · border 1px solid #eeeeee · radius 120px · padding 16px 30px 15px 30px · 400 16px Soehne · uppercase
- **Link** (“OFFSHOOT OUT OF OFFICE - WHITE”): transparent background · text #203b90 · radius 0px · padding 0px 0px 1.1px 0px · 400 18px Soehne
- **Badge** (“NEW”): background #dbdbdb · text #000000 · radius 20px · padding 5px 8px · 400 12px Soehne · uppercase
- **Navigation item** (“Help”): transparent background · text #203b90 · radius 0px · padding 3px 0px · 400 12px Soehne

## Do

- Use #203b90 for brand navigation, links and the defining vision band.
- Keep white surfaces and generous whitespace as the default page structure.
- Use Integral for bold campaign headlines and Soehne for functional copy.
- Let neutral-toned fashion photography dominate the hero and product listings.
- Use pale, fully rounded buttons with uppercase labels for primary shopping actions.
- Switch between centered campaign content and left-aligned shopping details.

## Don't

- Do not turn every section into a blue or dark panel.
- Do not add decorative gradients absent from the measured visual language.
- Do not use heavy card shadows or prominent boxed-in product tiles.
- Do not crowd the hero with extra interface copy or controls.
- Do not use display typography for product descriptions or body text.
- Do not mistake colors inside product photography for interface brand colors.

## Agent prompt

Build a new fashion-store page in the Flowers for Society visual style. Use Gallery White (#ffffff) as the primary surface and Society Cobalt (#203b90) for the wordmark, navigation links and one deliberate brand statement band. Keep interface colors restrained; Soft Chalk (#f1f1f1) and Soft Black (#181817) suit pale shopping buttons and their labels, while Border Blue (#4158a1) is for subtle hairlines. Set campaign headlines in Integral or a close geometric display substitute, and use Soehne or Inter for navigation, product details and copy. Pair a full-width, natural fashion photograph with bold white uppercase hero text and a pill CTA. Follow with image-led product browsing, open white editorial sections and compact reviews. Keep surfaces flat, spacing comfortable, and photography—not extra ornament—the main source of visual richness.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed photographic campaign beneath an inset navigation bar; centered display headline and CTA. | shop navigation, campaign carousel, primary shopping CTA | floating white nav, white uppercase display text, pale pill button, slide progress control |
| 2 | gallery | A compact, three-column image band following the hero. | visual browsing | image-only tiles, white surrounding space |
| 3 | product-grid | Left-aligned heading above a five-column product grid on white. | browse new arrivals, open product links | large product imagery, linked product titles, price labels, NEW badges |
| 4 | feature-split | Single-column full-width cobalt band with editorial copy and a link. | read brand message, follow editorial link | solid blue background, high-contrast text, minimal link |
| 5 | feature-split | Centered section heading above a two-column story and image composition. | learn about the brand | white surface, paired imagery and copy, rounded outline CTA |
| 6 | testimonials | Centered review header followed by testimonials arranged across four columns. | review browsing, rating reassurance | centered heading, five-star rating, testimonial text, carousel controls |
| 7 | footer | White, multi-column lower section combining brand content, links, imagery and newsletter form. | browse support links, newsletter signup, learn more | grouped footer links, image tiles, small form controls, blue accents |

## Source CSS custom properties (selected)

```css
--font-stack-headings: "Integral", sans-serif;
--font-weight-headings: 400;
--font-weight-headings-bold: 700;
--font-style-headings: normal;
--font-stack-body: "Soehne", sans-serif;
--font-weight-body: 400;
--font-weight-body-bold: 700;
--font-style-body: normal;
--font-stack-accent: "Chronicle", serif;
--font-weight-accent: 400;
--font-weight-accent-bold: 700;
--font-style-accent: normal;
--font-weight-menu: 400;
--base-headings-spacing: 0.0em;
--base-body-spacing: 0.0em;
--base-accent-size: 86;
--base-accent-line: 0.9;
--base-accent-spacing: -0.03em;
--base-quotes-spacing: 0.0em;
--color-background-cart-card: rgba(0,0,0,0);
--color-text-error-alert: #FF0000;
--color-border-error-alert: rgba(255, 0, 0, 0.15);
--color-background-error-alert: #FFE3E3;
--color-text-success-alert: #155724;
--color-border-success-alert: rgba(21, 87, 36, 0.15);
--color-background-success-alert: #d4edda;
--border-radius-slightly-rounded: 5px;
--border-radius-rounded: 20px;
--border-radius-fully-rounded: 100%;
--border-radius-buttons: 120px;
--border-width-buttons: 1px;
--border-radius-swatches: 120px;
--border-radius-badges: 20px;
--buttons-text-transform: uppercase;
--buttons-font-weight: 400;
--grid-gap-original-base: 40px;
--container-vertical-space-base: 100px;
--spacing-xxsmall: 6px;
--spacing-xsmall: 12px;
--spacing-small: 20px;
```

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