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

# Krepling · Design System

> Commerce software, framed by space and soft colour

**Theme:** light · **Industry:** saas · **Source:** https://www.krepling.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._

Krepling pairs an expansive white canvas with oversized black typography, sparse content, and soft gradients. A product-led hero and a few deep-black feature panels give the page a calm, modern commerce-software feel.

## North star

Let generous white space and oversized black type lead; use purple for actions and gradients only as selective product-story accents.

## Overview

The visual strategy is built around contrast between a nearly all-white canvas and selective, high-impact elements. Black carries navigation, headings, and a small set of feature panels; muted grays keep supporting copy subordinate. Purple is reserved for the primary demo action and a fine outline on the secondary CTA, while pastel pink-to-lilac and blue-to-mint gradients appear as emphasis inside workflow and storefront storytelling rather than as broad page backgrounds. A single regular-weight sans-serif keeps the typography direct: very large, lightly tracked headings anchor the page, with compact body text beside or beneath them. The layout is unusually spacious, with long vertical pauses separating section titles, gradient visual blocks, and feature content. The opening composition combines a floating commerce-product illustration with offset headline and CTA copy. Most other sections remain flat and open, punctuated by rounded black panels that make feature descriptions feel like focused product moments.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and open section background; preserves the site's expansive, uncluttered feel. |
| Action Violet | `#b154f9` | `--color-action-violet` | brand | Primary Request a demo button fill and the outline accent on the secondary Get started button. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Navigation and headline text, plus high-contrast feature-card surfaces with white copy. |
| Soft Charcoal | `#6c6b6b` | `--color-soft-charcoal` | semantic | Muted supporting text that sits below the emphasis of black headings. |
| Quiet Gray | `#b3b3b3` | `--color-quiet-gray` | semantic | Subdued secondary text, including low-emphasis explanatory copy. |
| Mist Gray | `#f1f1f1` | `--color-mist-gray` | surface | Light neutral section surface in measured styles; the screenshots remain predominantly white. |
| Peach Haze | `#f8d1c9` | `--color-peach-haze` | accent | Gradient stop in soft product-story artwork; not a core interface surface. |
| Lilac Mist | `#ddccff` | `--color-lilac-mist` | accent | Pastel gradient stop in workflow emphasis artwork and text. |
| Sky Wash | `#8dc8ff` | `--color-sky-wash` | accent | Blue gradient stop in storefront storytelling artwork. |
| Mint Glow | `#9dffca` | `--color-mint-glow` | accent | Mint gradient stop in storefront storytelling artwork, not a general-purpose UI color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Ink Black) · `--color-surface-2` → `#f1f1f1` (Mist Gray) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#6c6b6b` (Soft Charcoal) · `--color-text-subtle` → `#b3b3b3` (Quiet Gray) · `--color-border` → `#b154f9` (Action Violet) · `--color-accent` → `#b154f9` (Action Violet) · `--color-accent-2` → `#ddccff` (Lilac Mist) · `--color-accent-3` → `#8dc8ff` (Sky Wash) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f1f1f1` | 18.59:1 | AAA |
| `#6c6b6b` | `#ffffff` | 5.31:1 | AA |
| `#6c6b6b` | `#000000` | 3.95:1 | AA-large |
| `#6c6b6b` | `#f1f1f1` | 4.7:1 | AA |
| `#b3b3b3` | `#ffffff` | 2.1:1 | fail |
| `#b3b3b3` | `#000000` | 10.02:1 | AAA |
| `#b3b3b3` | `#f1f1f1` | 1.86:1 | fail |
| `#b154f9` | `#ffffff` | 3.81:1 | AA-large |
| `#b154f9` | `#000000` | 5.51:1 | AA |

### Gradients

- `linear-gradient(90.01deg, rgb(248, 209, 201) 0.01%, rgb(221, 204, 255) 99.99%)`
- `linear-gradient(90deg, rgb(141, 200, 255) 0.01%, rgb(157, 255, 202) 99.99%)`
- `linear-gradient(92.37deg, rgb(183, 138, 255) 16.58%, rgb(254, 156, 114) 90.82%)`
- `linear-gradient(92.37deg, rgb(168, 218, 250) 16.58%, rgb(153, 248, 205) 90.82%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Regular | `--font-body` | webfont | 400 | Single sans-serif family used across headings, body copy, navigation, and buttons. | Inter |

- **Regular:** Use regular weight throughout; headings are large and lightly negatively tracked, while body and navigation use modest positive tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.52, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 1.1 | -0.01em | — | Regular | Oversized display messaging for major visual statements. |
| h1 | 80px | 400 | 1.1 | -0.01em | — | Regular | Primary hero headline and top-level page statement. |
| h2 | 64px | 400 | 1.1 | -0.01em | — | Regular | Large section headings such as Workflows and Storefront. |
| h3 | 32px | 400 | 1.3 | 0 | — | Regular | Feature titles within product-story sections and cards. |
| body | 18px | 400 | 1.3 | 0.02em | — | Regular | Supporting descriptions beside hero and feature content. |
| caption | 16px | 400 | 1.3 | 0.01em | — | Regular | Compact explanatory details and secondary copy. |
| nav | 16px | 400 | 1.3 | 0.01em | — | Regular | Header links and navigation labels. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 10, 12, 14, 16, 18, 20, 21, 32, 48, 192 px.
- Section rhythm 240px · element gap 10px · card padding — · max content width 930px.

Use a spacious, vertically scrolling composition with a measured page max width of 930px for constrained content. Keep the header light and horizontal, then let the hero occupy a broad, asymmetrical composition with media and copy in separate zones. Alternate centered section labels, large visual blocks, and left-aligned feature copy rather than repeating a dense card grid. Preserve the measured generous section rhythm and restrained element spacing; avoid filling the long gaps with extra UI. Keep alignment simple and content density low.

## Shape & elevation

- Radius: button `10px` · card `14px` · nav `14px` · xs `10px` · sm `14px` · md `27px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)` on interactive elements.

The page is mostly flat, with no measured shadows. Use clean surfaces and restrained outlines rather than layered cards. Feature panels are solid black with rounded corners and white copy; buttons use rounded corners, with a purple fill for the primary action and a fine purple outline for the secondary action.

## Imagery

The hero uses a soft, floating 3D-style arrangement of commerce and integration tiles, partly cropped by the viewport and washed against a light background. Later sections use simple pastel gradient rectangles and sparse product-story visuals. Treat imagery as a supporting focal point, not a background texture: keep it isolated, softly lit, and surrounded by white space. Avoid adding photographic imagery where the page shows abstract product visuals.

## Components

### Header navigation

A sparse horizontal row of black links, with brand mark at left and Log in plus outlined Get started at right.

### Primary CTA

Purple-filled Request a demo button with white 16px regular text, a 10px radius, and measured 14px by 16px padding.

### Secondary CTA

Transparent Get started button with black 16px text, a 1px Action Violet outline, 10px radius, and matching button padding.

### Feature panel

Black feature surface with white text and a measured 14px radius; use sparingly for product capability highlights.

### Gradient visual block

A soft, horizontal pastel gradient used as a standalone product-story visual, framed by generous white space.

### Section marker

A large black rounded-square mark sits beside a prominent section title, as seen with Workflows and Dashboard.

### Measured component styles

- **Primary button** (“Request a demo”): background #b154f9 · text #ffffff · radius 10px · padding 14px 16px · 400 16px Regular
- **Secondary button** (“Get started”): transparent background · text #000000 · border 1px solid #b154f9 · radius 10px · padding 14px 16px · 400 16px Regular
- **Card** (“Personalized experiences Create a fricti”): background #000000 · text #ffffff · radius 14px · padding 0px · 400 16px Regular
- **Navigation item** (“Features Pricing Company Blog About Care”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Regular

## Do

- Keep the page canvas predominantly Gallery White.
- Set major headings in large, regular-weight black sans-serif.
- Reserve Action Violet for prominent calls to action and fine outlines.
- Use pastel gradients as isolated narrative accents.
- Create long, deliberate pauses between major sections.
- Keep feature copy concise and visually subordinate to its title.

## Don't

- Do not turn every section into a card grid.
- Do not spread gradients across the full page background.
- Do not add heavy shadows or decorative borders.
- Do not introduce extra typefaces or bold-heavy typography.
- Do not crowd the hero with dense navigation or supporting copy.
- Do not treat illustration colors as general-purpose interface colors.

## Agent prompt

Build a new page in Krepling's visual style: start with a Gallery White (#ffffff) canvas, sparse black navigation, and generous open space. Use one regular sans-serif family, with large, lightly tracked black headings and concise gray supporting copy. Arrange content asymmetrically or in simple centered feature moments rather than dense grids. Use Action Violet (#b154f9) for the main CTA, with a white label; keep secondary actions transparent with a thin violet outline. Introduce gradients only as isolated product-story visuals, drawing from Peach Haze (#f8d1c9), Lilac Mist (#ddccff), Sky Wash (#8dc8ff), and Mint Glow (#9dffca). Use black (#000000) sparingly for focused feature panels with white text. Keep surfaces flat, corners softly rounded, and section transitions spacious.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Asymmetrical hero with a floating product visual, large lower-left headline, and right-side supporting copy and CTA. | Primary demo CTA, Product-led introduction | Sparse top navigation, Oversized headline, Soft 3D-style product imagery, Purple CTA |
| 2 | how-it-works | A centered section title with a rounded black marker and substantial whitespace around it. | Section signposting | Large black title, Black rounded-square marker, White canvas |
| 3 | product-showcase | A single pastel gradient visual block centered within a wide white field. | Visual product preview | Soft pink-to-lilac gradient, Isolated media block |
| 4 | feature-split | Left-aligned statement with selective gradient-colored words, separated from nearby sections by open space. | Benefit-led messaging | Black body headline, Gradient emphasis |
| 5 | feature-grid | A long, sparse sequence of three capability stories with large gaps and selective black panels. | Capability discovery, Progressive feature storytelling | Short feature headings, Muted explanatory text, Black feature surfaces |
| 6 | how-it-works | A centered section title with a black rounded-square marker and a wide surrounding white field. | Section signposting | Large black title, Black marker, White canvas |
| 7 | product-showcase | A standalone product visual centered in a spacious white section. | Visual product preview | Isolated media, Open white space |
| 8 | feature-split | A short storefront statement arranged in a broad visual field with gradient-highlighted words. | Benefit-led messaging | Large statement copy, Pastel gradient text |
| 9 | feature-grid | Three product capability panels in a long, sparse sequence; some panels use solid black surfaces. | Feature exploration, Coming-soon disclosure | Black rounded panels, White panel text, Short descriptions |
| 10 | other | A centered Dashboard title with a rounded black marker and open white space. | Product-area signposting | Large black title, Black marker, Minimal layout |

## Source CSS custom properties (selected)

```css
--ease-cubic: cubic-bezier(0.66,0,0.34,1);
--ease-cubic-in: cubic-bezier(0.55,0.055,0.675,0.19);
--ease-cubic-out: cubic-bezier(0.215,0.61,0.355,1);
--ease-cubic-in-out: cubic-bezier(0.645,0.045,0.355,1);
--ease-circ-in: cubic-bezier(0.6,0.04,0.98,0.335);
--ease-circ-out: cubic-bezier(0.075,0.82,0.165,1);
--ease-circ-in-out: cubic-bezier(0.785,0.135,0.15,0.86);
--ease-expo-in: cubic-bezier(0.95,0.05,0.795,0.035);
--ease-expo-out: cubic-bezier(0.19,1,0.22,1);
--ease-expo-in-out: cubic-bezier(1,0,0,1);
--ease-quad-in: cubic-bezier(0.55,0.085,0.68,0.53);
--ease-quad-out: cubic-bezier(0.25,0.46,0.45,0.94);
--ease-quad-in-out: cubic-bezier(0.455,0.03,0.515,0.955);
--ease-quart-in: cubic-bezier(0.895,0.03,0.685,0.22);
--ease-quart-out: cubic-bezier(0.165,0.84,0.44,1);
--ease-quart-in-out: cubic-bezier(0.77,0,0.175,1);
--ease-quint-in: cubic-bezier(0.755,0.05,0.855,0.06);
--ease-quint-out: cubic-bezier(0.23,1,0.32,1);
--ease-quint-in-out: cubic-bezier(0.86,0,0.07,1);
--ease-sine-in: cubic-bezier(0.47,0,0.745,0.715);
--ease-sine-out: cubic-bezier(0.39,0.575,0.565,1);
--ease-sine-in-out: cubic-bezier(0.445,0.05,0.55,0.95);
--ease-back-in: cubic-bezier(0.6,-0.28,0.735,0.045);
--ease-back-out: cubic-bezier(0.175,0.885,0.32,1.275);
--ease-back-in-out: cubic-bezier(0.68,-0.55,0.265,1.55);
--ease-back-out-more: cubic-bezier(0.56,0.91,0.465,1.65);
--color-white: #fff;
--color-white--rgb: 255,255,255;
--color-gray-100: #f1f1f1;
--color-gray-100--rgb: 241,241,241;
--color-gray-300: #b3b3b3;
--color-gray-300--rgb: 179,179,179;
--color-gray-500: #6c6b6b;
--color-gray-500--rgb: 108,107,107;
--color-gray-700: #2e2e2e;
--color-gray-700--rgb: 46,46,46;
--color-gray-900: #171717;
--color-gray-900--rgb: 23,23,23;
--color-black: #000;
--color-black--rgb: 0,0,0;
```

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