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

# Arsenijs Fabrica · Design System

> Modern cosmetics framed as vivid, tactile editorial

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

Arsenijs Fabrica pairs a spacious editorial storefront with vivid cosmetics imagery and a warm, restrained palette. Product grids and a detailed workshop booking flow bring shopping and brand storytelling together.

## North star

Let vivid, tactile beauty photography lead, while warm neutrals and quiet, lightweight UI keep shopping effortless.

## Overview

The visual system balances an overwhelmingly white canvas with soft cream booking surfaces, fine beige borders, and compact dark typography. Warm brown accents connect navigation, badges, and booking details, while vivid orange is reserved for standout actions such as the cookie consent and product-grid load-more buttons. On the first screen, a full-width campaign photograph dominates: close-up beauty imagery sits beside oversized product packaging, with small white captions and a simple pill CTA overlaid directly on the image. Onest is used throughout, favoring light body copy and restrained, tightly tracked headlines; the large nav labels visible in measured data are not representative of the whole page. After the immersive hero, the page shifts to clean category tiles and evenly spaced product grids, then a cream-colored workshop booking section with structured controls and cards. Generous section breaks and mostly flat surfaces let photography carry the visual impact; subtle borders and soft shadows organize functional UI without making the storefront feel dense.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, product cards, and clean content sections; provides space around imagery. |
| Soft Ink | `#111111` | `--color-soft-ink` | neutral | Primary text and footer details on light surfaces. |
| Cinnamon Bronze | `#c98a5b` | `--color-cinnamon-bronze` | brand | Warm accent for selected card borders, product details, and some category controls. |
| Oat Cream | `#fbf6ef` | `--color-oat-cream` | surface | Workshop booking band, form surfaces, and warm-tinted panels. |
| Sandstone Line | `#e8dcc6` | `--color-sandstone-line` | neutral | Fine borders around cards, inputs, and time-selection controls. |
| Deep Forest Ink | `#0d1717` | `--color-deep-forest-ink` | neutral | Measured navigation and button text; a near-black secondary text tone. |
| Tangerine Signal | `#f15730` | `--color-tangerine-signal` | accent | Bright primary actions, including the load-more button and cookie consent. |
| Muted Umber | `#6b5d4d` | `--color-muted-umber` | semantic | Muted copy and secondary button text against light backgrounds. |
| Roasted Cocoa | `#2a2118` | `--color-roasted-cocoa` | neutral | Text on booking inputs, schedule controls, and card details. |
| Black Lacquer | `#000000` | `--color-black-lacquer` | surface | Inverse card and footer surfaces; also appears in product artwork. |
| Amber Leather | `#a06d42` | `--color-amber-leather` | accent | Navigation accents, badges, and warm booking or product highlights. |
| Quiet Gray | `#818181` | `--color-quiet-gray` | semantic | Minor footer and secondary text details. |
| Peach Parchment | `#f7e7d3` | `--color-peach-parchment` | surface | Warm gradient and card tint, most visible in the booking experience. |
| Charcoal Detail | `#1a1a1a` | `--color-charcoal-detail` | neutral | Small text and occasional link details. |
| Pale Divider | `#eeeeee` | `--color-pale-divider` | neutral | Occasional subtle separators; secondary to the warmer measured border color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#fbf6ef` (Oat Cream) · `--color-surface-2` → `#000000` (Black Lacquer) · `--color-text` → `#111111` (Soft Ink) · `--color-text-muted` → `#6b5d4d` (Muted Umber) · `--color-text-subtle` → `#2a2118` (Roasted Cocoa) · `--color-border` → `#e8dcc6` (Sandstone Line) · `--color-accent` → `#f15730` (Tangerine Signal) · `--color-accent-2` → `#c98a5b` (Cinnamon Bronze) · `--color-accent-3` → `#a06d42` (Amber Leather) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#111111` | `#fbf6ef` | 17.56:1 | AAA |
| `#111111` | `#000000` | 1.11:1 | fail |
| `#6b5d4d` | `#ffffff` | 6.37:1 | AA |
| `#6b5d4d` | `#fbf6ef` | 5.92:1 | AA |
| `#6b5d4d` | `#000000` | 3.3:1 | AA-large |
| `#2a2118` | `#ffffff` | 15.8:1 | AAA |
| `#2a2118` | `#fbf6ef` | 14.69:1 | AAA |
| `#2a2118` | `#000000` | 1.33:1 | fail |
| `#f15730` | `#ffffff` | 3.42:1 | AA-large |

### Gradients

- `linear-gradient(90deg, rgb(17, 17, 17), rgb(17, 17, 17), rgb(255, 255, 255), rgb(17, 17, 17), rgb(17, 17, 17))`
- `linear-gradient(135deg, rgb(251, 242, 232) 0%, rgb(247, 231, 211) 100%)`
- `linear-gradient(135deg, rgb(201, 138, 91) 0%, rgb(160, 109, 66) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Onest | `--font-body` | webfont | 500, 400, 300, 600, 200, 700, 800 | Site-wide interface, headings, body copy, navigation, captions, and buttons | Inter |

- **Onest:** Light body weights contrast with medium headings and semibold display/navigation; measured headings use tight negative tracking, with mostly sentence case.

### Type scale — Perfect Fifth (ratio ≈ 1.474, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1.04 | -0.042em | — | Onest | Primary campaign or section headline, set large and compact. |
| h2 | 23px | 500 | 1.57 | -0.052em | — | Onest | Secondary section headings, including workshop booking. |
| h3 | 21px | 600 | normal | 0 | — | Onest | Product and content card titles. |
| body | 15px | 300 | 1.55 | 0 | — | Onest | Product descriptions, editorial copy, and booking instructions. |
| caption | 12px | 500 | 1.55 | -0.042em | — | Onest | Small labels, metadata, and understated image captions. |
| button | 13px | 500 | normal | 0 | — | Onest | Compact action labels across shopping and booking controls. |
| nav | 21px | 600 | normal | 0 | — | Onest | Prominent navigation links and category labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 9, 10, 12, 14, 15, 16, 18, 20, 22, 24, 30, 32 px.
- Section rhythm 90px · element gap 6px · card padding 14px · max content width 1180px.

The measured content max width is 1180px, while the opening campaign and several image bands use the full viewport. The homepage alternates wide photographic moments with orderly category tiles and four-column product grids. Sections have pronounced breathing room, including a notably long cream workshop-booking block. Most content is left-aligned or arranged in simple rows; the booking heading is centered above a detailed, multi-column form. Overall density is comfortable, with compact product metadata and ample space between content groups.

## Shape & elevation

- Radius: button `8px` · input `8px` · card `14px` · media `14px` · badge `4px` · link `9999px` · xs `3px` · sm `8px` · md `10px` · lg `12px` · xl `14px` · 2xl `15px` · pill `9999px`
- Shadow `md` (other, card): `rgba(74, 53, 28, 0.08) 0px 8px 24px 0px`
- Shadow `lg` (other): `rgba(143, 143, 143, 0.1) 0px 25px 25px 0px`
- Shadow `sm` (other): `rgba(74, 53, 28, 0.06) 0px 2px 8px 0px`
- Shadow `hairline` (card): `rgb(201, 138, 91) 0px 0px 0px 1px`
- Shadow `md-2` (footer): `rgba(0, 0, 0, 0) 0px 0px 20px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most sections are flat and separated by white or cream backgrounds rather than heavy shadow. Cards and inputs use fine warm beige borders; selected cards may receive a restrained bronze outline. Soft, low-contrast shadows appear on a few cards or floating elements, while the consent panel layers over the hero transition.

## Imagery

Product photography is the main visual voice: close-up beauty portraits, vivid orange packaging, creams, soaps, and ingredient-led compositions. The hero is a full-bleed split campaign image with embedded white copy and product containers; category tiles and product grids use clean, isolated product shots. Later sections include social imagery and a row of video-review cards. Keep imagery crisp and large, with minimal decorative overlays.

## Components

### Campaign hero

Full-width photographic campaign with small overlaid brand copy, supporting text, and a white pill-shaped shop action.

### Category tiles

Horizontal image-led category cards with concise labels and small directional cues.

### Product grid

Four-column product presentation with large imagery, compact names and descriptions, warm price accents, and a vivid orange load-more action.

### Workshop booking

Cream-background booking experience combining date and time selection, attendee and workshop controls, customer fields, payment details, and a summary.

### Cookie consent

White floating consent panel with explanatory copy and a bright orange accept action, overlapping the transition below the hero.

### Review videos

Three dark video player cards arranged in a horizontal row beneath review navigation.

### Measured component styles

- **Primary button** (“Load more”): background #f15730 · text #ffffff · radius 55px · padding 12.7px 30px · 500 14px Onest
- **Secondary button** (“11:00”): transparent background · text #2a2118 · border 1px solid #e8dcc6 · radius 8px · padding 8px 6px · 500 13px Onest
- **Link** (“G² // Glow & Goji Alginate Face Mask Tur”): transparent background · text #ff8562 · radius 0px · padding 0px · 400 16px Times New Roman
- **Input** (“2 personas 3 personas 4 personas 5 perso”): background #fbf6ef · text #2a2118 · border 1px solid #e8dcc6 · radius 8px · padding 12px 14px · 400 16px Onest
- **Card** (“O 13 OKT 11:00 13:30 16:00 18:30”): background #ffffff · text #2a2118 · border 1px solid #e8dcc6 · radius 14px · padding 16px 12px · 400 16px Onest
- **Badge** (“BANKAS PĀRSKAITĪJUMS”): background #a06d42 · text #ffffff · radius 4px · padding 3px 8px · 700 10px Onest · uppercase
- **Navigation item** (“new drop”): transparent background · text #0d1717 · radius 0px · padding 0px · 600 21px Onest

## Do

- Use the full-bleed campaign image as the first visual anchor.
- Keep primary page surfaces white and booking surfaces warm cream.
- Reserve vivid orange for clearly actionable controls.
- Use Onest or a close sans-serif substitute throughout the interface.
- Keep product descriptions and prices visually compact.
- Separate major content groups with generous whitespace.

## Don't

- Do not make every section a bordered card.
- Do not use bright orange as a broad background color.
- Do not crowd product imagery with decorative copy.
- Do not replace the warm border tone with stark heavy dividers.
- Do not force the campaign hero into a narrow container.
- Do not make secondary text compete with product photography.

## Agent prompt

Build a new beauty-commerce page in the Arsenijs Fabrica visual style. Use Gallery White (#ffffff) as the dominant canvas, with Oat Cream (#fbf6ef) for a warm featured or booking section and Sandstone Line (#e8dcc6) for quiet control borders. Set interface typography in Onest, using light body copy, medium headings, and compact metadata. Make one large, vivid beauty campaign image the visual anchor; follow it with clean category tiles and an orderly product grid. Use Tangerine Signal (#f15730) sparingly for primary actions, and Cinnamon Bronze (#c98a5b) or Amber Leather (#a06d42) for restrained warm details. Preserve generous section breathing room, simple alignment, and image-led storytelling. Keep cards mostly flat, with subtle outlines and only occasional soft shadows. Make any booking flow structured and calm rather than visually dense.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width campaign imagery with navigation and overlaid copy. | Shop CTA, About and contact links, Language selector | Immersive split image, White overlay text, Pill CTA |
| 2 | logo-cloud | Sparse horizontal statement with supporting imagery. | Trust messaging | Minimal text, Small image marks |
| 3 | category-nav | Horizontal row of image-led category cards. | Browse categories, Card navigation | Product imagery, Short labels, Directional cues |
| 4 | product-showcase | Short transition band with product imagery and a browse cue. | Explore more | Image-led teaser, Minimal copy |
| 5 | product-grid | Light section header above a multi-column shopping grid. | Top-sale category, All-products link | Small labels, Open white background |
| 6 | product-grid | Four-column product cards with a centered continuation action. | Product links, Load more | Large product images, Compact details, Warm prices |
| 7 | product-showcase | Wide campaign band with product focus and compact purchase prompt. | Buy now, Featured product | Large product imagery, Editorial copy, Floating product detail |
| 8 | product-grid | Four-column product cards with section links and continuation action. | Browse new products, Load more | Product cards, Compact descriptions, Price accents |
| 9 | other | Large cream section with centered heading and multi-column booking form. | Choose date and time, Set attendee count, Enter contact details, Review payment summary | Outlined time slots, Cream inputs, Selected warm accents, Summary card |
| 10 | other | Open editorial band with text and supporting photography. | Learn more | Minimal text, Story imagery, Large whitespace |
| 11 | reviews | Review introduction followed by feedback controls and content. | Switch feedback type, Read more reviews | Rating summary, Compact controls, Open background |
| 12 | video | Horizontal row of three video cards. | Play video, Browse feedback | Dark player surfaces, Rounded media cards |

## Source CSS custom properties (selected)

```css
--borderRadiusContainer: 0px;
--BGColorPassive: #FBFBFB;
--BGImgPassive: url('');
--IconsColorPassive: #111111;
--IconsBorderColorPassive: #FBFBFB;
--BGColorHover: #ffffff;
--BGImgHover: url('');
--IconsColorHover: #F7651A;
--IconsBorderColorHover: #A1968F;
--BGColorActive: #ffffff;
--BGImgActive: url('');
--IconsColorActive: #F7651A;
--IconsBorderColorActive: #A1968F;
--IconsBorderRadius: 60px;
--IconsBorderSize: 0px;
```

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