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

# CARIUMA — Store Closure Notice · Design System

> Quiet clarity framed by a deep green botanical image

**Theme:** light · **Industry:** fashion · **Source:** https://www.cariuma.com/password · **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 restrained store-closure notice pairs a clean white text field with a dramatic green botanical photograph. Compact black copy and a small branded mark keep attention on the practical message rather than on commerce.

## North star

Keep the message unmistakably readable in a spacious white panel, and let one carefully cropped botanical image provide the visual weight.

## Overview

The page uses a quiet, high-contrast palette: white is the dominant canvas, black carries the notice and wordmark, and the measured green accent belongs to the brand mark and accessible skip control rather than to a broad interface band. A large botanical photograph supplies most of the visible green, but its deep tones are image content, not additional UI palette colours. HCo Gotham gives the notice a clean, contemporary voice; body copy is regular weight, while the initial store-status phrase is bold for quick scanning. The composition is a two-part, full-height split, with a white text panel on the left and a tightly cropped leaf image on the right, separated by a strong diagonal edge. Copy sits in a compact, left-aligned block with generous surrounding white space. The result feels editorial and calm, prioritizing legibility and a clear final message over navigation, product modules, or decorative interface elements.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and text-panel background; preserves open space around the notice. |
| Soft Ink | `#000000` | `--color-soft-ink` | neutral | Primary notice copy and wordmark; creates crisp contrast against the white panel. |
| Leaf Green | `#66a443` | `--color-leaf-green` | accent | Brand green accent, visible in the logo and measured skip-to-content button; botanical photo greens are image content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-accent` → `#66a443` (Leaf Green) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#66a443` | `#ffffff` | 3.02:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| HCo Gotham | `--font-body` | webfont | 400, 700 | Notice copy, brand-adjacent text, and uppercase utility controls | Montserrat |

- **HCo Gotham:** Use regular body text and bold emphasis; utility labels are uppercase, bold, and letter-spaced.

### Type scale — Major Third (ratio ≈ 1.25, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 16px | 400 | 1.6 | 0 | — | HCo Gotham | Closure notice and customer-support guidance paragraphs. |
| caption | 14px | 700 | 1.25 | 0.071em | uppercase | HCo Gotham | Small uppercase utility or supporting labels, if present. |
| button | 14px | 700 | 1.25 | 0.071em | uppercase | HCo Gotham | Uppercase skip-to-content control. |
| eyebrow | 14px | 700 | 1.25 | 0.071em | uppercase | HCo Gotham | No visible eyebrow on this notice; reserve for compact uppercase context. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 25, 40, 60, 80 px.
- Section rhythm 80px · element gap — · card padding — · max content width 1360px.

A single full-height section is divided into a broad white copy area and a full-height image area. The left block is aligned to a consistent inset and vertically centered around the brand mark and three short paragraphs. The image fills the right side, cropped edge-to-edge; its diagonal boundary adds movement without extra modules. The page is intentionally sparse, with comfortable paragraph breaks and substantial unused canvas.

## Shape & elevation

- Radius: button `5px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s ease` on interactive elements.

The composition is essentially flat: no cards, visible shadows, or layered panels. The white field and photograph meet directly along a crisp diagonal edge. Keep controls simple and avoid adding borders or ornamental separators that compete with the image boundary.

## Imagery

One full-height botanical photograph dominates the right side. It is a close, abstracted view of layered green leaves, rendered in deep forest tones with directional highlights and soft focus. Crop the image to fill its panel and retain the slanted boundary; treat its greens as photographic material rather than additional interface colours. No product renders, icons, or decorative illustrations are needed.

## Components

### Brand mark

A compact green emblem and black CARIUMA wordmark sit above the notice, anchoring the text without a surrounding header bar.

### Closure message

A brief status paragraph begins with bold CARIUMA.com text, followed by regular-weight black copy explaining that orders are no longer accepted.

### Customer-support guidance

A separate paragraph directs customers with missing orders or valid gift cards to reply to their original confirmation email.

### Closing note

A short thank-you paragraph closes the message, with a clear paragraph break from the support instructions.

### Botanical image panel

Full-height, right-side leaf photography provides the main colour and visual contrast, cropped to the panel with an angled inner edge.

### Skip-to-content control

Measured as a green button with white uppercase bold text, generous horizontal padding, and a subtle rounded corner; it is not prominent in the screenshot.

### Measured component styles

- **Primary button** (“SKIP TO CONTENT”): background #66a443 · text #ffffff · radius 5px · padding 0px 40px · 700 14px HCo Gotham · uppercase

## Do

- Use Gallery White as the dominant text-panel surface.
- Set the notice in left-aligned black body copy.
- Emphasize only the opening status phrase in bold.
- Keep the brand mark compact and above the message.
- Use a single edge-to-edge botanical image as the visual counterweight.
- Preserve generous empty space around the message.

## Don't

- Do not add product cards or shopping calls to action.
- Do not turn the notice into a dense, multi-column text layout.
- Do not treat photographic leaf tones as measured interface colours.
- Do not add heavy shadows, card frames, or ornamental borders.
- Do not introduce extra accent colours beyond the measured palette.
- Do not center the notice copy or over-style its typography.

## Agent prompt

Build a new page in the CARIUMA notice style: calm, legible, and editorial rather than promotional. Use Gallery White (#ffffff) for the main text canvas and Soft Ink (#000000) for copy and wordmark. Reserve Leaf Green (#66a443) for a restrained brand accent or utility control. Use a clean Gotham-like sans serif, with regular body copy and selective bold emphasis. Compose the page as a spacious text area beside one edge-to-edge botanical photograph; a diagonal image boundary may echo the reference. Keep the brand mark small, align message paragraphs to the left, and give them clear separation. Avoid card UI, prominent shadows, extra palette colours, and shopping modules. The measured page is a single quiet notice, so prioritize message hierarchy, open space, and a purposeful image crop.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Full-height split composition: compact left-aligned notice on white beside a full-height botanical image with a diagonal edge. | Store status first, Support instructions, Thank-you closing | Compact brand mark, Bold opening phrase, Spacious paragraph breaks, Edge-to-edge image |

## Source CSS custom properties (selected)

```css
--color-white: #fff;
--color-white-rgb: 255, 255, 255;
--color-black: #000;
--color-black-rgb: 0, 0, 0;
--color-green: #66A443;
--color-green-2: #508131;
--color-gray: #767676;
--color-gray-2: #999;
--color-gray-2-rgb: 153, 153, 153;
--color-light-gray: #f5f5f5;
--color-soft-gray: #f1f1f1;
--color-background: 255, 255, 255;
--color-focus-outline: #999;
--color-foreground: 0, 0, 0;
--color-background-contrast: 255, 255, 255;
--color-shadow: 153, 153, 153;
--color-button: #66A443;
--color-button-text: #fff;
--color-button-hover: #508131;
--color-button-text-hover: #fff;
--color-button-disabled: #f1f1f1;
--color-secondary-button-disabled: #c5c5c5;
--color-secondary-button-text-disabled: #767676;
--color-link: #66A443;
--color-badge-foreground: 255, 255, 255;
--color-badge-background: 0, 0, 0
        --payment-terms-background-color: transparent;
--color-input-border: #c5c5c5;
--color-input-placeholder: #4a4a4a;
--color-input-focus: #000;
--color-input-error: #ff0000;
--color-input-text: #000;
--color-input-label: #000;
--color-module-background: #fff;
--color-module-text: #000;
--color-module-accent: #66A443;
--color-module-secondary: #f5f5f5;
--font-body-family: 'HCo Gotham', 'Helvetica Neue', Helvetica, sans-serif;
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
```

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