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

# Summer Fridays · Design System

> Soft editorial beauty, grounded in everyday skincare

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

Summer Fridays pairs a restrained white storefront with full-bleed seasonal campaigns and softly colored product collections. Clean navigation and compact product actions keep the long homepage easy to browse.

## North star

Keep the storefront quiet and legible, then let campaign photography and clearly bounded color-field sections carry the emotional impact.

## Overview

The homepage balances a white, low-chrome shopping interface with expressive campaign imagery. White is the canvas for navigation, product listings, and informational content; deep near-black ink carries most text, links, and controls. Muted rose and warm clay appear as broad, distinct color fields behind lip-product showcases, while dusty blue marks the social gallery and footer. These are measured section colors, not a reason to recolor product photography. Futura PT supplies the practical voice across navigation, product details, and uppercase actions; Pinyon Script adds a selective, high-contrast editorial flourish to display headings. Layout alternates dense product carousels and three-column image links with spacious, centered collection features and a two-column rewards panel. Photography leads: models, product close-ups, and styled product imagery set each section’s tone. Borders stay fine and shadows are nearly absent, so image crops and colored bands provide the page’s hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, navigation background, light product controls, and text over colored sections. |
| Midnight Ink | `#000418` | `--color-midnight-ink` | brand | Primary navigation, headings, product copy, links, and text on pale controls. |
| Dusty Blue | `#5c7899` | `--color-dusty-blue` | accent | Measured blue section color for the social gallery and footer; also used for rewards badges. |
| Gradient Gray | `#7f7f7f` | `--color-gradient-gray` | semantic | Measured gradient-associated link color; not a defining page surface. |
| Rose Mauve | `#b86373` | `--color-rose-mauve` | accent | Broad rose background behind the Lip Butter Balm collection showcase. |
| Warm Clay | `#c1947f` | `--color-warm-clay` | accent | Warm clay background behind the Flushed Lip Stain collection showcase. |
| Soft Stone | `#d5d1ca` | `--color-soft-stone` | neutral | Fine borders on outlined product selectors and other restrained controls. |
| Cool Mist | `#b2b3b9` | `--color-cool-mist` | semantic | Minor measured border/detail color; not a defining brand surface. |
| Button Fog | `#eeedec` | `--color-button-fog` | surface | Pale fill for frequent Add to Bag product actions. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#5c7899` (Dusty Blue) · `--color-surface-2` → `#b86373` (Rose Mauve) · `--color-surface-3` → `#c1947f` (Warm Clay) · `--color-surface-4` → `#eeedec` (Button Fog) · `--color-text` → `#000418` (Midnight Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#d5d1ca` (Soft Stone) · `--color-accent` → `#5c7899` (Dusty Blue) · `--color-accent-2` → `#b86373` (Rose Mauve) · `--color-accent-3` → `#c1947f` (Warm Clay)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000418` | `#ffffff` | 20.38:1 | AAA |
| `#000418` | `#5c7899` | 4.47:1 | AA-large |
| `#000418` | `#b86373` | 4.92:1 | AA |
| `#000418` | `#c1947f` | 7.58:1 | AAA |
| `#ffffff` | `#5c7899` | 4.56:1 | AA |
| `#ffffff` | `#b86373` | 4.14:1 | AA-large |
| `#ffffff` | `#c1947f` | 2.69:1 | fail |
| `#5c7899` | `#ffffff` | 4.56:1 | AA |
| `#5c7899` | `#b86373` | 1.1:1 | fail |
| `#5c7899` | `#c1947f` | 1.7:1 | fail |

### Gradients

- `linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 25%)`
- `linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 0%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| futura-pt | `--font-body` | webfont | 450 | Navigation, body copy, product information, links, labels, and buttons. | Jost |
| Pinyon Script | `--font-display` | webfont | 400 | Display and hero collection headings, used sparingly for an editorial contrast. | Pinyon Script |

- **futura-pt:** Measured weight 450; generally sentence case, with uppercase buttons and eyebrow labels using conspicuously wide tracking.
- **Pinyon Script:** Measured regular weight; large, flowing script with compact line height, reserved for expressive headings.

### Type scale — Augmented Fourth (ratio ≈ 1.446, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 70px | 400 | 1 | -0.011em | — | Pinyon Script | Oversized script treatment for campaign or collection display headings. |
| h1 | 45px | 400 | 1 | 0.003em | — | Pinyon Script | Hero campaign title and primary editorial heading. |
| h2 | 26px | 450 | 1.15 | -0.02em | — | futura-pt | Section headings, including collection and product-feature titles. |
| h3 | 20px | 450 | normal | 0.007em | — | futura-pt | Product names and subordinate content headings. |
| body | 16px | 450 | 1.25 | 0.008em | — | futura-pt | Product descriptions, rewards copy, and general page text. |
| caption | 12px | 450 | 1.25 | 0.011em | — | futura-pt | Compact product metadata and supporting labels. |
| button | 13px | 450 | 1.38 | 0.085em | uppercase | futura-pt | Uppercase, widely tracked shopping and call-to-action labels. |
| nav | 16px | 450 | 1.25 | 0.008em | — | futura-pt | Main storefront navigation and account links. |
| link | 16px | 450 | 1.19 | -0.009em | — | futura-pt | Product names and inline navigation or learn-more links. |
| eyebrow | 13px | 450 | 1.31 | 0.085em | uppercase | futura-pt | Short uppercase collection and promotional labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 6, 8, 12, 18, 24, 30, 60 px.
- Section rhythm 42px · element gap 12px · card padding — · max content width 1320px.

The measured content max width is 1320px, with a comfortable overall density and a 12-column basis for product-led sections. The first viewport is a two-part, full-bleed campaign hero; below it, the page alternates horizontal product rails, centered full-width collection showcases, three-column category imagery, and split content. Product and feature headings commonly align to the left, while the two collection showcases center their content. Section gaps are measured at 42px, with a 12px element gap and a 4px spacing base. Preserve generous white space between these contrasting blocks.

## Shape & elevation

- Radius: button `3px` · input `3px` · badge `3px` · nav `50%` · link `3px` · xs `3px` · pill `9999px`
- Shadow `hairline` (other): `rgb(255, 255, 255) 0px 0px 0px 2px, rgba(0, 4, 24, 0.3) 0px 0px 0px 3px`
- Motion: standard transition `0.3s linear` on interactive elements.

The interface is mostly flat: section background color, whitespace, and image placement establish hierarchy instead of cards with deep shadows. Controls use restrained borders, with measured stone outlines on selectors and small corner rounding. A subtle focus treatment is measured, but prominent drop shadows are not a defining visual feature.

## Imagery

Lifestyle and product photography dominate; the hero places models beside a product still life, while collection panels isolate product lines against solid rose and clay fields. Smaller product cards use close crops and repeatable image frames. The rewards panel pairs a large model photograph with concise copy. Social imagery forms a compact, varied feed. No illustration style defines the page.

## Components

### Announcement strip

A narrow rose-toned shipping message sits above the white navigation; its text and learn-more link are centered.

### Store navigation

White horizontal header with left-aligned Shop, About, and Blog links, centered wordmark, and right-side rewards and account utilities.

### Campaign hero

Full-bleed, two-part seasonal photography supports a centered script title, concise copy, a small NEW badge, and a light shopping CTA.

### Product rail

Horizontal product browsing combines image cards, product names, selector or variant controls, and compact uppercase Add to Bag actions.

### Collection showcase

Centered product lineup sits on a solid warm clay or rose section, with collection heading, short product copy, outlined action, and learn-more link.

### Category image tiles

Three photographic category panels place uppercase eyebrow labels, short headings, and shopping links over the images.

### Rewards split

A large lifestyle image sits beside a two-column content panel with a headline and stacked rewards, subscription, and recycling information.

### Social footer

Dusty blue footer zone combines a horizontal social image strip, signup form, grouped text links, script wordmark, and social icons.

### Measured component styles

- **Primary button** (“ADD TO BAG $26”): background #eeedec · text #000418 · border 1px solid · radius 3px · padding 6px 12px · 450 13px futura-pt · uppercase
- **Secondary button** (“Select Size”): transparent background · text #000418 · border 1px solid #d5d1ca · radius 3px · padding 4px 12px · 450 16px futura-pt
- **Link** (“Blush Butter Balm”): transparent background · text #000418 · radius 0px · padding 0px · 450 16px futura-pt
- **Input**: transparent background · text #ffffff · border 1px solid #ffffff · radius 3px · padding 6px 12px · 450 13px futura-pt
- **Badge** (“Rewards”): background #5c7899 · text #ffffff · radius 3px · padding 2px 8px · 450 13px futura-pt
- **Navigation item** (“Shop Shop About About Blog Rewards Accou”): transparent background · text #000418 · radius 0px · padding 0px · 450 16px futura-pt

## Do

- Use white as the default shopping canvas.
- Reserve dusty blue, rose, and clay for clear section bands or small badges.
- Let campaign and product photography lead each feature.
- Use Futura-style sans serif for navigation and commerce details.
- Save script display lettering for a small number of prominent headings.
- Keep product actions compact, uppercase, and clearly legible.
- Separate page modules with whitespace rather than heavy card shadows.

## Don't

- Do not make every section a colored panel.
- Do not apply measured section colors as a filter over photography.
- Do not use script type for navigation or product descriptions.
- Do not add prominent shadows or thick decorative borders.
- Do not crowd product cards with oversized controls.
- Do not let promotional overlays obscure the product or model imagery.

## Agent prompt

Build a beauty ecommerce page in Summer Fridays’ restrained editorial style. Use Gallery White (#ffffff) for the principal canvas and Midnight Ink (#000418) for navigation, headings, and product copy. Add Dusty Blue (#5c7899), Rose Mauve (#b86373), and Warm Clay (#c1947f) only as deliberate section fields or small accents. Keep the header clean, with a centered wordmark and balanced side navigation. Pair large lifestyle photography with product-led rails, concise descriptions, and compact uppercase purchase actions. Use a Futura-like sans serif for functional text and reserve graceful script typography for prominent collection headings. Favor full-bleed campaign imagery, centered product showcases, image category tiles, and generous white breaks. Keep controls finely outlined, corners subtly rounded, and elevation nearly flat. Make the page feel calm and shoppable, not crowded or overly decorative.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-part full-bleed campaign image with centered overlay content. | Shop now CTA, New-product badge | Script display title, Seasonal lifestyle photography, Centered overlay |
| 2 | product-grid | Wide horizontal product rail with a left-aligned heading and repeated product cards. | Product carousel, Add to Bag, Size selection | Product photography, Compact card details, Pale purchase buttons |
| 3 | product-showcase | Full-width clay-colored band with centered heading and product lineup. | Product selection, Add to Bag, Learn More | Centered product display, Light text, Outlined action |
| 4 | category-nav | Three evenly arranged photographic category links. | Shop by category, Direct category links | Image tiles, Overlaid labels, Short CTAs |
| 5 | product-showcase | Full-width rose band with centered heading, products, and details. | Product selection, Add to Bag, Learn More | Product lineup, Centered copy, Outlined action |
| 6 | product-grid | Left-aligned heading above a four-column product grid. | Select size, Add to Bag | Product image cards, Compact descriptions, Pale controls |
| 7 | feature-split | Two-column feature pairing a large image with stacked information. | Rewards information, Expandable offers | Lifestyle photo, Aligned text panel, Horizontal dividers |
| 8 | gallery | Blue band with heading and a horizontal strip of square social images. | Social profile link, Browse image feed | Dusty blue background, Image strip, Minimal heading |
| 9 | footer | Blue footer with signup area and several columns of grouped links. | Email signup, SMS information, Social links | Fine form borders, Small link groups, Script wordmark |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(92,120,153,0);
--osano-button-border-color: #ffffff;
--osano-button-background-color: #ffffff;
--osano-button-foreground-color: #000418;
--osano-dialog-background-color: #5c7899;
--osano-dialog-foreground-color: #ffffff;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.5);
--osano-link-color: #ffffff;
--osano-toggle-off-track-color: #ffffff;
--osano-toggle-off-thumb-color: #000418;
--osano-toggle-on-track-color: #ffffff;
--osano-toggle-on-thumb-color: #000418;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-button-close-color: #ffffff;
--osano-button-accept-background-color: #ffffff;
--osano-button-accept-border-color: #ffffff;
--osano-button-accept-foreground-color: #000418;
--osano-button-deny-background-color: #ffffff;
--osano-button-deny-border-color: #ffffff;
--osano-button-deny-foreground-color: #000418;
--osano-button-reject-all-background-color: #ffffff;
--osano-button-reject-all-background-color-hover: rgba(255,255,255,0.7);
--osano-button-reject-all-border-color: #ffffff;
--osano-button-reject-all-foreground-color: #000418;
--osano-button-manage-background-color: #ffffff;
--osano-button-manage-border-color: #ffffff;
--osano-button-manage-foreground-color: #000418;
--osano-info-dialog-link-color: #ffffff;
--osano-info-dialog-button-close-color: #ffffff;
--osano-info-dialog-toggle-off-track-color: #ffffff;
--osano-info-dialog-toggle-off-thumb-color: #000418;
--osano-info-dialog-toggle-on-track-color: #ffffff;
--osano-info-dialog-toggle-on-thumb-color: #000418;
--osano-info-dialog-button-background-color: #ffffff;
--osano-info-dialog-button-border-color: #ffffff;
--osano-info-dialog-button-foreground-color: #000418;
--osano-dialog-gpc-background-color: #5c7899;
```

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