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

# Kalstore · Design System

> Quiet calendars, considered in every detail

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

Kalstore presents refillable calendars and planners through a restrained, product-led storefront. Warm neutral surfaces and oversized typography give way to colorful product imagery, selective ochre calls to action, and a dark, oversized footer.

## North star

Let the paper products and their in-use photography lead, using warm neutrals, restrained accents, and clear modular sections to frame them.

## Overview

The page balances a warm off-white canvas (#faf9f7) with charcoal text (#242424), keeping product names and headlines crisp without making the storefront feel stark. Pale gray and beige bands provide quiet transitions; dusty blue and burgundy appear in larger promotional panels, while mustard yellow is reserved for purchase-oriented buttons and sale badges. ABCDiatype carries the whole interface: large, tightly tracked display and heading styles sit alongside small uppercase navigation and eyebrow labels. Layout alternates between compact product cards and broad, image-led sections, with generous open space around editorial copy. Photography shows calendars in use and paper details, while product images are presented cleanly against light backgrounds. The visual mix stays functional and tactile: flat surfaces, fine borders, rounded corners, a lightly elevated navigation bar, and a very dark footer that anchors the long page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Paper | `#faf9f7` | `--color-warm-paper` | brand | Main page canvas and occasional light text surface; keeps the store warm rather than clinical. |
| Soft Ink | `#242424` | `--color-soft-ink` | brand | Primary headings, body text, navigation, links, and dark footer surfaces. |
| Quiet Rule | `#d3d3d3` | `--color-quiet-rule` | neutral | Fine borders and subdued footer or button details. |
| Muted Graphite | `#727272` | `--color-muted-graphite` | neutral | Secondary copy and input outlines where contrast should remain restrained. |
| Pale Stone | `#edecea` | `--color-pale-stone` | surface | Soft navigation, link, and card surfaces. |
| Calendar Ochre | `#f1ba35` | `--color-calendar-ochre` | accent | Primary purchase buttons, sale badges, and small product-media highlights. |
| Limestone | `#e0ddd7` | `--color-limestone` | surface | Warm opening promotional section band. |
| Oxblood Panel | `#6c3c3c` | `--color-oxblood-panel` | brand | Large bundle promotion background; a distinctive, page-level contrast to the pale canvas. |
| Dusty Sky | `#90abc8` | `--color-dusty-sky` | surface | Blue refill promotion band behind product imagery. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Product-card and calendar-image grounds, selected buttons, badges, and footer details. |
| Footer Slate | `#585a5a` | `--color-footer-slate` | semantic | Secondary footer text and subdued dark-area headings. |
| Footer Mist | `#b4b5b5` | `--color-footer-mist` | semantic | Low-emphasis footer copy and small supporting details. |
| Footer Ash | `#8d9090` | `--color-footer-ash` | semantic | Muted footer and heading text. |
| Calendar Blue | `#3b59a3` | `--color-calendar-blue` | accent | A small blue text accent; not a dominant page surface. |
| Midnight Calendar | `#323e6a` | `--color-midnight-calendar` | semantic | Dark blue promotional hero card behind its white message and ochre CTA. |
| Garden Green | `#458e71` | `--color-garden-green` | semantic | Green supporting text and the trust statistic card; not a core interface accent. |

### Semantic aliases

`--color-canvas` → `#faf9f7` (Warm Paper) · `--color-surface` → `#edecea` (Pale Stone) · `--color-surface-2` → `#e0ddd7` (Limestone) · `--color-surface-3` → `#6c3c3c` (Oxblood Panel) · `--color-surface-4` → `#242424` (Soft Ink) · `--color-text` → `#242424` (Soft Ink) · `--color-text-muted` → `#727272` (Muted Graphite) · `--color-text-subtle` → `#d3d3d3` (Quiet Rule) · `--color-border` → `#d3d3d3` (Quiet Rule) · `--color-accent` → `#f1ba35` (Calendar Ochre) · `--color-accent-2` → `#6c3c3c` (Oxblood Panel) · `--color-accent-3` → `#3b59a3` (Calendar Blue) · `--color-on-accent` → `#242424` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#242424` | `#faf9f7` | 14.75:1 | AAA |
| `#242424` | `#edecea` | 13.15:1 | AAA |
| `#242424` | `#e0ddd7` | 11.45:1 | AAA |
| `#242424` | `#6c3c3c` | 1.74:1 | fail |
| `#727272` | `#faf9f7` | 4.57:1 | AA |
| `#727272` | `#edecea` | 4.07:1 | AA-large |
| `#727272` | `#e0ddd7` | 3.55:1 | AA-large |
| `#727272` | `#6c3c3c` | 1.86:1 | fail |
| `#d3d3d3` | `#faf9f7` | 1.42:1 | fail |
| `#d3d3d3` | `#edecea` | 1.27:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABCDiatype | `--font-body` | webfont | 400, 500 | All interface, navigation, product, editorial, and display text | DM Sans |

- **ABCDiatype:** Use medium weights for display and uppercase navigation; headlines are tightly tracked, while body copy stays regular and direct.

### Type scale — Golden Ratio (ratio ≈ 1.585, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 140px | 500 | 1 | -0.04em | — | ABCDiatype | Oversized brand or editorial display moments, including the large footer wordmark treatment. |
| h1 | 82px | 500 | 1 | -0.03em | — | ABCDiatype | Primary product-category and major campaign headlines. |
| h2 | 71px | 500 | 1 | -0.03em | — | ABCDiatype | Large section headlines and prominent promotional copy. |
| h3 | 25px | 400 | 1.25 | -0.02em | — | ABCDiatype | Secondary editorial or product-section headings. |
| h4 | 22px | 400 | 1.3 | 0 | — | ABCDiatype | Supporting headings and smaller feature titles. |
| body | 14px | 400 | 1.4 | 0 | — | ABCDiatype | Product descriptions, supporting copy, and everyday interface text. |
| caption | 12px | 400 | 1.3 | 0 | — | ABCDiatype | Small product details, badge labels, and fine print. |
| nav | 12px | 500 | 1.3 | 0.1em | uppercase | ABCDiatype | Compact uppercase navigation and menu labels. |
| link | 19px | 400 | 1.35 | -0.02em | — | ABCDiatype | Product category links and editorial calls to explore. |
| eyebrow | 12px | 500 | 1.3 | 0.1em | uppercase | ABCDiatype | Small uppercase section labels above or beside content. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 5, 6, 8, 10, 12, 16, 18, 20, 24, 30, 40, 52, 64 px.
- Section rhythm 40px · element gap 4px · card padding 40px · max content width —.

A long, modular storefront uses alternating two-column promotional areas, product-led category blocks, and compact card grids. The opening pairs large calendar imagery with a message panel; later sections switch between single-column editorial statements and product showcases. Content aligns mostly left, with navigation floating over the opening composition. Sections have clear breathing room and fine separators rather than dense framing. The measured spacing scale is compact, but generous open areas around large headlines and photography keep the page from feeling crowded.

## Shape & elevation

- Radius: button `8px` · input `8px` · card `8px` · media `8px` · badge `4px` · nav `7px` · link `8px` · xs `4px` · sm `8px`
- Shadow `lg` (nav): `rgba(0, 0, 0, 0) 0px 37px 10px 0px, rgba(0, 0, 0, 0.01) 0px 24px 10px 0px, rgba(0, 0, 0, 0.05) 0px 13px 8px 0px, rgba(0, 0, 0, 0.09) 0px 6px 6px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

Most cards and section panels are flat, relying on background color and spacing instead of strong shadows. Thin light-gray rules separate content areas, and measured components use rounded corners. The floating navigation is the notable elevated element, with a soft shadow; product imagery and promotional panels provide depth through overlap rather than stacked card effects.

## Imagery

Photography and video emphasize calendars in real settings: paper texture, people writing, and products displayed on walls or desks. Product cards use clean, bright backgrounds so the calendar layouts remain legible. Campaign panels layer calendar mockups over solid dusty-blue or burgundy grounds. Images are rectangular with softly rounded corners; the photography stays natural and warm, without heavy graphic effects.

## Components

### Floating navigation

A white navigation bar sits over the opening imagery with the Kalstore wordmark, compact uppercase links, and utility icons; it is the page's clearest shadowed layer.

### Ochre CTA

Primary actions use a mustard-yellow fill (#f1ba35), charcoal uppercase 12px ABCDiatype text, and an 8px corner radius.

### Outline CTA

Secondary actions use a transparent or light surface, a 1px #d3d3d3 border, uppercase text, and an 8px radius.

### Product cards

Calendar and planner cards prioritize clean product imagery, concise names, variant details, and price; small badges mark product or offer status.

### Sale badge

Compact #f1ba35 badges use dark uppercase text, 4px corners, and short discount messaging.

### Promotional panels

Large split panels combine concise copy and a CTA with calendar imagery over dusty blue or burgundy backgrounds.

### Newsletter form

The dark footer newsletter area pairs a clear offer headline with email entry, consent copy, and a subdued outlined field.

### Measured component styles

- **Primary button** (“SEE PRODUCTS”): background #f1ba35 · text #242424 · radius 8px · padding 0px 20px · 500 12px ABCDiatype · uppercase
- **Secondary button** (“GET BUNDLE”): background #ffffff · text #242424 · radius 8px · padding 0px 20px · 500 12px ABCDiatype · uppercase
- **Link** (“Wall”): transparent background · text #242424 · radius 0px · padding 0px · 400 19px ABCDiatype
- **Input**: transparent background · text #faf9f7 · border 1px solid #727272 · radius 8px · padding 12px 20px · 400 14px ABCDiatype
- **Card** (“The wait is over. Shop now. SEE PRODUCTS”): background #323e6a · text #eae4d7 · radius 8px · padding 40px · 400 16px ABCDiatype
- **Badge** (“Icon”): background #ffffff · text #30250b · radius 4px · padding 0px 8px · 400 12px ABCDiatype
- **Navigation item** (“Kalstore® SHOP ABOUT STORIES Log in Cart”): transparent background · text #242424 · radius 0px · padding 0px · 400 16px ABCDiatype

## Do

- Use Warm Paper (#faf9f7) as the primary canvas.
- Set headlines and navigation in ABCDiatype or a close geometric sans substitute.
- Reserve Calendar Ochre (#f1ba35) for purchase actions and offer badges.
- Let product photography show paper texture and calendars in real use.
- Alternate product grids with broad editorial or promotional panels.
- Keep secondary copy quiet and borders fine.

## Don't

- Do not turn every section into a colored card.
- Do not use gradients or decorative effects absent from the measured page.
- Do not use the blue or green accents as dominant interface colors.
- Do not crowd large headlines with dense supporting content.
- Do not add heavy shadows to product cards.
- Do not obscure calendar imagery with unnecessary overlays.

## Agent prompt

Build a new Kalstore-style storefront page for refillable paper goods. Use Warm Paper (#faf9f7) as the canvas and Soft Ink (#242424) for clear headlines, links, and navigation. Keep ABCDiatype throughout, or use DM Sans as a free substitute; use tight tracking for large headings and compact uppercase navigation. Organize the page as a sequence of calm editorial sections, product grids, and image-led splits. Show calendars in real settings and keep product cards bright and legible. Use Calendar Ochre (#f1ba35) sparingly for primary actions and sale badges. Introduce Limestone (#e0ddd7), Dusty Sky (#90abc8), or Oxblood Panel (#6c3c3c) only in deliberate campaign bands. Favor fine borders and flat surfaces; reserve a soft shadow for the floating navigation. End with a dark, information-rich footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split composition: close-up calendar imagery beside a light calendar display and dark blue CTA panel. | Primary shop CTA, Floating navigation | Warm beige band, Ochre button, Rounded image panels |
| 2 | product-showcase | Large left-aligned headline followed by alternating product and lifestyle imagery. | Product discovery, Category links | Oversized heading, White product grounds, Editorial photography |
| 3 | product-showcase | Two-column showcase pairing a planner product view with a large use-case image. | Product detail, Related product link | Light canvas, Large photography, Compact product information |
| 4 | category-nav | Three visual category tiles arranged side by side beneath a short heading. | Category navigation, Visual browsing | Calendar imagery, Thin separators, Text links |
| 5 | feature-split | Broad dusty-blue promotional band with copy, CTA, and calendar imagery. | Refill education, Shop CTA | Blue background, Product-image overlap, Ochre action |
| 6 | product-grid | Four-column product-card grid under a left-aligned section heading. | Browse bestsellers, Offer badges | Light product cards, Small labels, Compact product metadata |
| 7 | cta | Two-column burgundy panel with offer copy on one side and overlapping products on the other. | Bundle promotion, Get bundle CTA | Oxblood background, White product grounds, Ochre discount badges |
| 8 | content-feed | Editorial introduction followed by a three-column story and image arrangement. | Read stories, Editorial discovery | Magazine-like photography, Open whitespace, Text-led cards |
| 9 | stats | Three side-by-side statistic blocks on a light background. | Trust building, Brand proof | Large colored figures, Brief explanatory text, Distinct statistic colors |
| 10 | footer | Dark multi-column footer with newsletter area, links, payment marks, and oversized wordmark. | Newsletter signup, Footer navigation, Country and language controls | Charcoal surface, Fine subdued text, Outlined email input, Large white wordmark |

## Source CSS custom properties (selected)

```css
--color-text: #242424;
--color-error: #AA453D;
--color-yellow: #F1BA35;
--background-color: #FAF9F7;
--jdgm-primary-color: #F1BA35;
--jdgm-secondary-color: rgba(241,186,53,0.1);
--jdgm-star-color: #F1BA35;
--jdgm-write-review-text-color: white;
--jdgm-write-review-bg-color: #F1BA35;
--jdgm-paginate-color: #F1BA35;
--jdgm-border-radius: 0;
--jdgm-reviewer-name-color: #F1BA35;
```

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