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

# bella · Design System

> Bright kitchen essentials on a calm, warm canvas

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

bella’s homepage pairs a soft, warm neutral canvas with bold product-color panels and oversized lifestyle imagery. Rounded cards, straightforward navigation, and generous breathing room make the appliance assortment feel approachable and easy to browse.

## North star

Keep the warm neutral canvas quiet, then let one vivid product panel or image lead each browsing moment.

## Overview

The visual system is anchored by a warm off-white canvas (#ebeadf), used across long stretches of the page so bright imagery and product panels stand out. Black carries navigation, body copy, and borders; white appears in compact pill buttons and badges. Saturated orange (#f04923) gives a toaster promotion a strong focal panel, while pale blue and beige mark smaller editorial cards. Supreme LL TT supplies the page’s rounded, modern sans-serif voice, with bold headings and navigation against restrained body copy. The measured Times New Roman styling appears on some buttons and links, adding a small contrasting note rather than defining the overall identity. Layout alternates broad media-led areas with centered product browsing and compact four-column editorial or press content. Images are treated as colorful campaign scenes and clear appliance displays, not as decorative backgrounds everywhere. Rounded corners and flat surfaces keep the composition friendly without introducing heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Kitchen Ink | `#000000` | `--color-kitchen-ink` | neutral | Navigation, primary copy, product links, and the thin outlines or borders that define controls. |
| Oat Canvas | `#ebeadf` | `--color-oat-canvas` | brand | Dominant page canvas and continuous section background, providing a soft warm-neutral base. |
| Stone Fade | `#a4a39c` | `--color-stone-fade` | semantic | Appears in a measured footer gradient; keep it subtle and secondary to the flat canvas. |
| Porcelain | `#ffffff` | `--color-porcelain` | surface | Navigation surface, CTA pills, bestseller badge, and occasional high-contrast text. |
| Toaster Flame | `#f04923` | `--color-toaster-flame` | accent | High-impact orange product card and promotional emphasis, especially in the hero. |
| Powder Blue | `#9eb9e1` | `--color-powder-blue` | accent | Blue editorial feature-card surface; use as a secondary color block, not as the page canvas. |
| Biscuit Beige | `#dbbfa5` | `--color-biscuit-beige` | surface | Warm beige editorial card surface, paired with product imagery in a smaller feature tile. |

### Semantic aliases

`--color-canvas` → `#ebeadf` (Oat Canvas) · `--color-surface` → `#9eb9e1` (Powder Blue) · `--color-surface-2` → `#dbbfa5` (Biscuit Beige) · `--color-surface-3` → `#ffffff` (Porcelain) · `--color-text` → `#000000` (Kitchen Ink) · `--color-text-muted` → `#ffffff` (Porcelain) · `--color-border` → `#000000` (Kitchen Ink) · `--color-accent` → `#f04923` (Toaster Flame) · `--color-accent-2` → `#9eb9e1` (Powder Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ebeadf` | 17.37:1 | AAA |
| `#000000` | `#9eb9e1` | 10.48:1 | AAA |
| `#000000` | `#dbbfa5` | 12.01:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#ebeadf` | 1.21:1 | fail |
| `#ffffff` | `#9eb9e1` | 2:1 | fail |
| `#ffffff` | `#dbbfa5` | 1.75:1 | fail |
| `#f04923` | `#ebeadf` | 3.06:1 | AA-large |
| `#f04923` | `#9eb9e1` | 1.84:1 | fail |
| `#f04923` | `#dbbfa5` | 2.11:1 | fail |

### Gradients

- `linear-gradient(90deg, rgba(0, 0, 0, 0.3) 15%, rgba(0, 0, 0, 0) 51.59%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Supreme LL TT | `--font-body` | webfont | 400, 700 | Primary brand type for headings, navigation, body text, and badges. | DM Sans |
| Times New Roman | `--font-display` | system | 700, 400 | Measured secondary styling for some links, card copy, and CTA labels. | Lora |

- **Supreme LL TT:** Use a clean sans-serif voice; measured weights are 400 and 700. Navigation and badges are bold, with badges uppercase.
- **Times New Roman:** Use sparingly as a contrasting serif accent; measured instances are regular or bold, without tracked-out lettering.

### Type scale — Perfect Fourth (ratio ≈ 1.3, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 700 | 1.1 | 0 | — | Supreme LL TT | Primary campaign headline in the hero and leading page message. |
| h2 | 32px | 700 | 0.5 | 0 | — | Times New Roman | Large section heading; one measured instance uses a serif face. |
| h3 | 24px | 700 | 1.2 | 0 | — | Supreme LL TT | Feature and editorial card headings. |
| h4 | 22px | 400 | 1.5 | 0 | — | Supreme LL TT | Secondary promotional or supporting headings. |
| body | 14px | 400 | 1.5 | 0 | — | Supreme LL TT | Product descriptions, supporting copy, and general page text. |
| caption | 13px | 700 | 1.5 | 0 | — | Supreme LL TT | Compact bold labels, including product and promotional metadata. |
| nav | 16px | 700 | 1.5 | 0 | — | Supreme LL TT | Bold primary navigation labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 5, 6, 7, 8, 10, 12, 16, 20, 22, 24, 25, 30, 32, 40, 48 px.
- Section rhythm 32px · element gap 30px · card padding 12px · max content width 1248px.

The measured page max width is 1248px, with a comfortable density and a 32px section gap. At the top, a compact rounded navigation bar sits above an asymmetrical hero: expansive campaign media beside a narrow orange product card. Lower sections shift between centered product browsing and four-column editorial or press content, then a two-column newsletter band and four-column footer. Keep alignment deliberate and preserve large calm areas of canvas between media-rich sections.

## Shape & elevation

- Radius: button `50%` · card `12px` · badge `9999px` · nav `12px` · xs `12px` · pill `9999px`
- Shadow `inset` (section): `rgb(235, 234, 223) 0px 24px 0px 0px inset, rgb(235, 234, 223) -24px 0px 0px 0px inset, rgb(235, 234, 223) 24px 0px 0px 0px inset`
- Shadow `inset-2` (section): `rgb(235, 234, 223) 24px 0px 0px 0px inset, rgb(235, 234, 223) -24px 0px 0px 0px inset`
- Motion: standard transition `0.2s linear` on interactive elements.

The measured interface is primarily flat, with no conventional drop shadows. Separation comes from the Oat Canvas background and contrasting colored card surfaces. Use rounded corners on cards and navigation, pill-shaped buttons and badges, and black borders only where the measured controls call for them; avoid adding heavy outlines or layered elevation.

## Imagery

Use vivid lifestyle photography or campaign video alongside clean, readable appliance product imagery. The hero pairs a sky-blue scene and oversized branding with an isolated toaster on orange. Product tiles favor clear cutouts; editorial cards combine images with concise copy. Images can be colorful, but keep the surrounding page neutral so the subject remains legible.

## Components

### Top navigation

White rounded bar on the warm canvas; black bold sans-serif links, bella wordmark, and a search control.

### Split hero

Large campaign media beside an orange rounded product card. The card uses a white BEST-SELLER pill and white Shop now pill with black text.

### Product tile

Product image with concise name and price, arranged in a centered four-column assortment on the canvas.

### Editorial feature card

Rounded feature tiles use Powder Blue or Biscuit Beige surfaces, product imagery, short white copy, and white pill CTAs.

### Press quotes

Centered section title above four compact press columns, each pairing a publication mark with a short quote.

### Newsletter band

Wide photographic signup area with overlaid invitation, email input, and a black Sign up control with white text.

### Footer

Bella wordmark and grouped Shop, Collections, Support, Contact, and social links on the neutral canvas.

### Measured component styles

- **Primary button** (“Learn more”): background #ffffff · text #000000 · radius 999px · padding 2px 10px 7px 10px · 400 16px Times New Roman
- **Secondary button** (“Sign up”): background #000000 · text #ffffff · border 2px solid #000000 · radius 999px · padding 0px 12px 5px 12px · 400 13.3333px Arial
- **Link** (“Bestseller 4qt Slim Air Fryer $59.99”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Times New Roman
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 400 18px Supreme LL TT
- **Card** (“BEST-SELLER Now the #1 toaster brand Sho”): background #f04923 · text #000000 · radius 12px · padding 22px 0px 24px 0px · 400 16px Times New Roman
- **Badge** (“BEST-SELLER”): background #ffffff · text #000000 · radius 999px · padding 3px 32px 7px 32px · 700 14px Supreme LL TT · uppercase
- **Navigation item** (“Shop”): transparent background · text #000000 · radius 0px · padding 0px · 700 16px Supreme LL TT

## Do

- Use #ebeadf as the dominant page canvas.
- Reserve #f04923 for a focused promotional panel or accent.
- Keep primary navigation and copy in #000000.
- Use white pill buttons for clear, compact calls to action.
- Pair product cutouts with colorful campaign imagery.
- Give product and editorial sections generous visual breathing room.

## Don't

- Do not turn the whole page into a bright color field.
- Do not introduce unmeasured colors into the interface palette.
- Do not add heavy shadows or dense border treatments.
- Do not use oversized blocks of decorative copy.
- Do not crowd product imagery with competing labels.
- Do not make every card the same color or visual weight.

## Agent prompt

Build a new bella-style ecommerce page with a warm, quiet #ebeadf Oat Canvas and Kitchen Ink #000000 for navigation and copy. Use Porcelain #ffffff for compact pill CTAs and badges. Let a focused product feature carry Toaster Flame #f04923; use Powder Blue #9eb9e1 and Biscuit Beige #dbbfa5 only for secondary editorial cards. Set the primary voice in Supreme LL TT, or a close modern sans-serif substitute, with bold headings and navigation. Favor a clean split hero, clear appliance cutouts, vivid campaign imagery, centered product browsing, and spacious editorial sections. Keep cards and navigation rounded, surfaces mostly flat, and page composition comfortable rather than dense. Follow the measured 1248px max-width and 32px section rhythm without adding unmeasured spacing or radius values.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Navigation above a wide campaign image beside a narrow orange product card. | primary shop CTA, bestseller badge, search access | rounded white navigation, split media hero, orange promo card, pill buttons |
| 2 | feature-split | Centered statement within a broad, uncluttered neutral section. | brand value statement | centered heading, large canvas breathing room |
| 3 | product-grid | Centered heading above four evenly arranged product columns. | product discovery, price visibility | four-column grid, product imagery, compact labels |
| 4 | feature-grid | Large image-led feature beside two smaller stacked colored cards. | editorial discovery, shop CTA | asymmetric grid, Powder Blue card, Biscuit Beige card, rounded media |
| 5 | testimonials | Centered heading above four compact quote columns. | social proof | publication marks, quote columns, centered section title |
| 6 | newsletter | Wide image-led band with signup copy and form overlaid across two columns. | email capture, signup consent note | photographic background, email input, black signup button |
| 7 | footer | Wordmark beside four grouped link columns and social links. | category navigation, support access, contact access | four-column link groups, brand mark, social icons |

## Source CSS custom properties (selected)

```css
--space-inline: 72px;
```

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