photo
Sale −15%
Model: CA7060-88L
Brand: CITIZEN
Годинник CITIZEN CA7060-88L
CITIZEN
11 920 ₴
Reference-страница: типографика, палитра, кнопки, бейджи, разделители, анатомия карточки товара. Все значения — из themes/zavod/tokens.css. Один источник правды для концептов под Завода. Меняешь токен — обновляется всё.
Шрифт — Formular (Klim Type Foundry, commercial). На сайте загружен self-hosted, лицензия требует проверки перед reuse в Manu.ai. Fallback: system-ui, визуально близко.
Ультра-минималистично: чёрный + белый + brand-red и brand-blue для акцентов + жёлтый/оранжевый для nav-pills. Текст #333333, links #337AB7 (нативный bootstrap-like blue). Дефолтные пометки ▲ — visual estimates, требуют точного eyedropper по live-сайту.
Editorial-стиль: резкие углы (radius 0), без теней, padding-heavy, 1px чёрный border. Главный CTA — белое на чёрном; inverse на hover.
17px 46px · Border: 1px solid #000 · Radius: 0 · Transition: 0.2s background+color invert on hover.
16px 28px · Border: 1px solid var(--mn-color-text) · Radius: 0 · Transparent bg.
Pill badges (radius 20px) — единственный округлый элемент на сайте. Nav pills (radius 0) — окрашенные nav-пункты «SUNGLASSES» (жёлтый) и «MID-SEASON SALE» (оранжевый) — это нав-пункты, не декоративные блоки.
20px (--mn-radius-pill) — ЕДИНСТВЕННЫЙ rounded элемент. Накладывается на изображение карточки top-left.
Завод НЕ использует тени и НЕ использует whitespace-only разделение. Структурные секции (заголовок / цена / CTA / акcордеоны) разделены 1px outline-линиями. Это design DNA: «editorial-grid», не «card-elevation».
1px --mn-color-border (#000) snake between blocks. На product-detail каждый аккордеон-секция получает horizontal-rule снизу.
Содержит image area (с image-swap на hover + Quickview overlay), stats block (Model/Brand), title, brand subtitle, price. Без border, shadow, bg-color у самой карточки — разделение whitespace и outline вокруг image. Полная анатомия в card-anatomy.md.
Все --mn-* CSS custom properties из themes/zavod/tokens.css. Эти значения читает tailwind.theme.ts. Изменение — в одном файле.
| Token | Value | Notes |
|---|---|---|
| --mn-color-black | #000000 | Primary CTA bg, brand, borders |
| --mn-color-white | #FFFFFF | Body bg, on-primary |
| --mn-color-text | #333333 | Body text · rgb(51,51,51) |
| --mn-color-text-muted | #88919F ▲ | Brand subtitle, stats labels |
| --mn-color-link | #337AB7 | Native bootstrap-ish blue |
| --mn-color-brand-red | #B6212A | --main-red · sale |
| --mn-color-brand-blue | #3B589A | --main-blue · secondary |
| --mn-color-accent-orange | #FF6321 ▲ | Hero / MID-SEASON SALE pill |
| --mn-color-accent-yellow | #FFE890 ▲ | Hero / SUNGLASSES pill |
| --mn-font-sans | Formular, system-ui, sans-serif | Klim Type Foundry · commercial |
| --mn-text-base | 14px | Body |
| --mn-text-sm | 10px | Stats meta |
| --mn-text-card-title | 16px | Card name |
| --mn-text-card-price | 20px / 700 | Price emphasis |
| --mn-text-cta | 20px / 400 / uppercase | «КУПИТИ» текст |
| --mn-text-h1 | 42px / 700 | Page title |
| --mn-radius-sm/md/lg | 0 | Sharp corners convention |
| --mn-radius-pill | 20px | ТОЛЬКО badges |
| --mn-radius-circle | 50% | Не используется в Заводе (для нашего использования) |
| --mn-cta-padding-x | 46px | CTA horizontal padding |
| --mn-cta-padding-y | 17px | CTA vertical padding |
| --mn-shadow-* | none | FLAT design — без теней |
| --mn-transition | 0.5s | Editorial slow · from --td |
| --mn-transition-fast | 0.2s | Button hover |