---
tags: [design-system, webflow, reference]
source: https://fylla-template.webflow.io/
date: 2026-07-25
---

# Дизайн-система шаблона Fylla (Webflow)

Вытащена из живого превью `fylla-template.webflow.io` и его продовой CSS
(`fylla-template.webflow.dcd18f230.min.css`, 121 КБ).
Шаблон построен на конвенции **Client-First** (Finsweet) — отсюда утилити-классы
`padding-*`, `margin-*`, `container-*`, `text-size-*`, `heading-*`.

CSS-переменных (`:root`) нет — все значения захардкожены. Токены ниже я вывела из
частотности и смысла классов.

---

## 1. Цвет

Палитра почти монохромная: чёрно-графитовый на тёплом кремовом фоне.

| Токен | HEX | Где |
|---|---|---|
| `ink` (основной) | `#191919` | текст, границы, заливка кнопок/бейджей, линии |
| `paper` (фон страницы) | `#fdfbf5` | `body` — тёплый кремовый, НЕ белый |
| `white` | `#ffffff` | текст на тёмном, карточки |
| `ink-hover` | `#121416` | hover границ кнопок |
| `ink-alt` | `#1a191e` | hover границ второстепенных кнопок |
| `muted` | `rgba(25,25,25,.6)` | `.text-color-muted` |
| `accent-warm` | `#ffdede` | редкий акцент (бледно-розовый) |
| `accent-cool` | `#e2ebf0` | фон второстепенной кнопки `.button-2` |

Служебные (Webflow-дефолты, не часть системы): `#3898ec`, `#ddd`, `#999`, `#fafafa`.

**Принцип:** акцент делается не цветом, а контрастом «инверсия/обводка».
Primary-состояние = заливка `#191919` + белый текст; default = прозрачный фон + hairline-обводка `1px solid #191919`.

---

## 2. Типографика

Три гарнитуры, каждая с чёткой ролью:

| Роль | Шрифт | Где |
|---|---|---|
| Заголовки | **Syne** (400, 500) — гротеск с характером | все `h1–h6`, `.heading-*` |
| Основной текст | **Satoshi** (400, 500) | `body`, цитаты |
| Мета / UI | **Roboto Mono** (400) | кнопки, навигация, лейблы, подписи |

Syne и Roboto Mono подключаются через Google Fonts, Satoshi — своим `.woff`.

### Шкала заголовков (Syne, weight 400)

| Класс | ≥1440¹ | База | ≤991 | ≤767 | ≤479 | line-height |
|---|---|---|---|---|---|---|
| `.heading-xlarge` | 10rem | 8rem | 8rem | 5.5rem | 5rem | 90% |
| `.heading-large` | 8rem | 6rem | 5rem | 4rem | 3.5rem | 100% |
| `.heading-medium` | 6rem | 5rem | 4rem | 3rem | 3rem | 100% |
| `.heading-small` | 5rem | 4.5rem | 4rem | 3.125rem | 3.25rem | 110% |
| `h1` / `.heading-h1` | — | 4rem | 3.5rem | 3rem | 3rem | 120% |
| `h2` / `.heading-h2` | — | 3rem | 3rem | 2.5rem | 2.25rem | 110–120% |
| `h3` / `.heading-h3` | — | 2rem | — | 1.75rem | — | 120% |
| `h4` | — | 1.5rem | — | — | — | 130% |
| `h5` | — | 1.375rem | — | — | — | 130% |
| `h6` | — | 1.125rem | — | — | — | 130% |

¹ на широких экранах (1440/1920px) крупные заголовки растут, а не только уменьшаются на мобиле.

**Важно:** заголовки идут `font-weight: 400` — вес не используется как акцент,
работает только кегль и сам характер Syne. Много `text-transform: uppercase`.

### Шкала текста (Satoshi)

| Класс | Размер | line-height |
|---|---|---|
| `.text-size-xlarge` | 1.75rem (→1.5 / 1.4) | 150% |
| `.text-size-large` | 1.4rem (→1.25) | 160% |
| `.text-size-medium` | 1.25rem | 160% |
| `.text-size-regular` / `small` | 1rem | 160% |
| `.text-size-tiny` | .75rem | 160% |
| `body` | 18px (→16px на мобиле) | **170%** |

Просторный интерлиньяж 160–170% — ключевая черта «воздуха» шаблона.

### Мета-текст (Roboto Mono)

```css
.text-meta        { font-size:15px; letter-spacing:1px; text-transform:uppercase; line-height:140% }
.text-meta-small  { font-size:13px; letter-spacing:1px; text-transform:uppercase; line-height:130% }
```
Весь UI (навигация, кнопки, лейблы форм, футер) — этим стилем. Моноширинный
uppercase с трекингом 1px даёт «студийный / техно» характер.

### Цитата

```css
.text-rich-text blockquote {
  font-family: Satoshi; font-size: 2rem; font-weight: 500; line-height: 140%;
  border-left: 0;                    /* полосы слева НЕТ */
  padding: 3rem 0 3rem 4rem;
  background: url(icon-quote.svg) 0 56px / 40px no-repeat;
}
```

---

## 3. Пространство

Единая шкала, одинаковая для `margin-*` и `padding-*`:

```
tiny .125 · xxsmall .25 · xsmall .5 · small 1 · medium 2 · large 3
xlarge 4 · xxlarge 5 · huge 6 · xhuge 8 · xxhuge 12    (rem)
```

Плюс направляющие модификаторы Client-First: `.margin-top`, `.padding-bottom`,
`.padding-vertical`, `.margin-horizontal` и т.д. — обнуляют остальные стороны.

Внутренние отступы карточек: `.card-padding` 3rem, `.small` 2rem, `.large` 4rem,
`.xlarge` 5rem (на мобиле large/xlarge схлопываются в 3rem).

Гэпы сеток: 4rem (основной), 3rem, 2rem на мобиле.

---

## 4. Контейнеры и раскладка

| Класс | max-width |
|---|---|
| `.container-xsmall` | 37.5rem (600px) |
| `.container-small` | 50rem (800px) |
| `.container-medium` | 62.5rem (1000px) |
| `.container-default` | 75rem (1200px) |
| `.container-large` | 87.5rem (1400px) |
| `.container-xlarge` | 100rem (1600px) |
| `.container-xxlarge` | 112.5rem (1800px) |

**Фирменный приём оболочки:**
```css
.body          { background:#fdfbf5; padding:1rem }   /* 12px на мобиле */
.page-wrapper  { border:1px solid #191919 }           /* рамка вокруг всей страницы */
.main-wrapper  { border-radius:4rem }                 /* →3rem →2rem на мобиле */
```
Вся страница — «карточка» с hairline-рамкой и крупным скруглением, лежащая на
кремовом поле. Это главная визуальная подпись шаблона.

Сетки героев асимметричные: `1.5fr 1fr`, `1.75fr 1fr`, `1fr 1px .45fr` — где
`1px` это разделитель-колонка (`.line-vertical`, заливка `#191919`).

### Брейкпоинты (Webflow-стандарт)
`991px` (планшет) · `767px` (мобильный landscape) · `479px` (мобильный portrait)
плюс апскейл `1440px` и `1920px`.

---

## 5. Компоненты

### Кнопки

```css
.button {                    /* дефолтная — обводка */
  font-family: Roboto Mono; font-size: 15px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 1px; line-height: 110%;
  background: transparent;
  border: 1px solid #191919; border-radius: 6px;
  padding: .6rem 1rem;
  transition: border .3s;
  overflow: hidden;          /* под анимацию текста */
}
.button.primary { background:#191919; color:#fff; border-width:0 }
```

Внутри — `.button-inner` (`height:1rem; overflow:hidden`) с двумя строками
текста: обычной и `-hover`. На ховере строка «прокручивается» вверх — типовой
эффект бегущего текста в кнопке.

Есть легаси-варианты: `.button-old` (pill `border-radius:500px`, padding
`1.25rem 2rem`, Satoshi 500) и `.button-5` (pill, обводка `rgba(255,255,255,.1)`
для тёмного фона).

### Бейдж / круглая иконка-кнопка

```css
.badge { width:40px; height:40px; border-radius:50%; border:1px solid #191919;
         display:flex; place-items:center; transition:background-color .2s, border .2s }
.badge.small {32px} .badge.large {50px}
.badge.primary { background:#191919; color:#fff }
.badge.link:hover { background:#191919; color:#fdfbf5 }
```

### Карточка
```css
.card { border:1px solid #191919 }              /* без тени, без радиуса */
.card.primary { background:#191919; color:#fff }
```

### Разделители
```css
.line          { width:100%; height:1px; background:#191919 }
.line-vertical { width:100%; height:100%; background:#191919 }
```

### Формы
```css
.form-input {
  min-height:4rem; background:transparent;
  border:0; border-bottom:1px solid #000; border-radius:0;
  padding:1rem; font-family:Roboto Mono; font-size:16px; line-height:150%;
  transition: background-color .2s, border .2s;
}
.form-input:focus { background:rgba(0,0,0,.05); border-color:#191919 }
.form-label { Roboto Mono 13px; uppercase; letter-spacing:1px; margin-bottom:8px }
.form-field-wrapper { margin-bottom:2rem }
```
Только нижняя граница, никаких рамок и скруглений. Чекбоксы 16×16, радио 20×20,
`border-radius:0`.

### Навигация
```css
.navbar-inner { display:grid; grid-template-columns:auto 1fr; padding:2rem 0 }
.navbar-menu-item-link { Roboto Mono 15px; uppercase; letter-spacing:1px }
.navbar-dropdown-inner { background:#fdfbf5; border:1px solid #191919; padding:2.5rem }
```
Дропдаун — крупная панель `max-width:1800px` с обводкой (на мобиле
`border-radius: 2rem/1.5rem`).

### Кастомный курсор
`.cursor-wrapper` (fixed, `z-index:9999`, `pointer-events:none`) + `.cursor`
(тёмная плашка `border-radius:8px`, белый uppercase-текст). Отключается на ≤991px.

---

## 6. Радиусы и тени

| Что | Значение |
|---|---|
| Кнопка | `6px` |
| Курсор | `8px` |
| Pill-кнопки (легаси) | `500px` |
| Бейдж | `50%` |
| Изображения героя | `1rem` |
| Оболочка `main-wrapper` | `4rem` → `3rem` → `2rem` |
| Карточки | `0` |
| Поля ввода | `0` |

**Теней в системе нет.** Глубина строится только границами `1px solid #191919`.

Транзишены: `.2s` для фона/границ, `.3s` для границ кнопок и навигации.

---

## 7. Что делает шаблон узнаваемым

1. **Кремовая бумага `#fdfbf5`, а не белый.** Тёплый, «печатный» фон.
2. **Hairline-обводка `1px #191919` вместо теней.** Всё разделяется линиями.
3. **Страница в рамке со скруглением 4rem** — макет как физическая карточка.
4. **Три гарнитуры с жёстким разделением ролей** — Syne для заголовков (крупных,
   до 8rem, вес 400), Satoshi для чтения, Roboto Mono uppercase для всего UI.
5. **Огромный интерлиньяж 160–170%** и щедрые отступы кратно rem.
6. **Асимметричные сетки** `1.5fr 1fr` с колонкой-разделителем `1px`.
7. **Ни одного цветного акцента** — контраст даёт инверсия чёрное/кремовое.

---

## 7.1. ⚠️ Кириллица — два шрифта из трёх её не поддерживают

Проверено 2026-07-25: subsets из метаданных Google Fonts, для Satoshi — парсинг
таблицы `cmap` скачанного `.ttf` с Fontshare.

| Шрифт | Роль | Кириллица |
|---|---|---|
| **Syne** | заголовки | **НЕТ** — subsets только latin, latin-ext, greek |
| **Satoshi** | основной текст | **НЕТ** — 431 кодпоинт в cmap, в диапазоне U+0400–04FF ноль |
| **Roboto Mono** | UI, кнопки, мета | **ДА** — cyrillic + cyrillic-ext |

**Что произойдёт:** в CSS стоит `font-family: Syne, sans-serif`. Русский текст не
найдёт глифы и провалится на системный `sans-serif` (на macOS — Helvetica).
В одной строке рядом окажутся Syne для латиницы и Helvetica для кириллицы —
разная ширина, разный ритм, видно сразу.

Кириллического форка Syne не существует (шрифт под OFL, но публичных репозиториев
с добавленной кириллицей нет).

**Замены с подтверждённой кириллицей (все Google Fonts):**

| Вместо | Вариант | Комментарий |
|---|---|---|
| Syne | **Unbounded** | ближайший по духу: широкий геометрический дисплейный, вариативный `wght` |
| Syne | Tektur | жёстче, техничнее, оси `wdth,wght` |
| Syne | Geologica | спокойнее, оси `CRSV,SHRP,slnt,wght` для докрутки характера |
| Satoshi | **Onest** | кириллица родная, по пропорциям почти один в один с Satoshi |
| Satoshi | Golos Text | Паратайп, спроектирован под русский, хорош на длинных текстах |
| Satoshi | Inter | безопасно, но нейтральнее |
| Roboto Mono | — | менять не нужно |

**Рекомендованная связка: Unbounded + Onest + Roboto Mono.** Unbounded и Onest
рисовались с кириллицей как первичной, а не приклеенной — на русском не рассыпаются.

Не подойдут (кириллицы нет): Space Grotesk, Spline Sans Mono, Bowlby One.

---

## 8. Как это перенести

Если нужен такой же вайб в своём проекте, минимальный набор токенов:

```css
:root {
  --ink: #191919;
  --paper: #fdfbf5;
  --white: #fff;
  --muted: rgba(25,25,25,.6);

  /* для русского текста — замены из п. 7.1:
     --font-display: 'Unbounded', sans-serif;
     --font-body: 'Onest', sans-serif;                */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Satoshi', sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  --radius-button: 6px;
  --radius-wrapper: 4rem;
  --radius-media: 1rem;

  --border: 1px solid var(--ink);

  --space-xs: .5rem;  --space-s: 1rem;  --space-m: 2rem;
  --space-l: 3rem;    --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 8rem;

  --leading-body: 1.7;
  --leading-heading: 1.1;
  --tracking-ui: 1px;
}
```

Дальше: заголовки Syne 400 uppercase, UI-текст Roboto Mono 15px uppercase с
трекингом, всё разделяется границами, теней не добавлять.

---

## Исходники

- Живое превью: https://fylla-template.webflow.io/
- Страница шаблона: https://webflow.com/templates/html/fylla-agency-website-template
- CSS: `https://assets-global.website-files.com/63661389dd2417f19a0d89d3/css/fylla-template.webflow.dcd18f230.min.css`
- Отдельной страницы `/style-guide` у шаблона нет (404) — система выведена из CSS.