Заголовок матеріалу в стилі редакції
Короткий дек пояснює головне: що сталося, чому це важливо і що перевірили агенти.
AI Newsroom
Читати →
Snaga design tokens
Design system
Єдиний візуальний контракт AI Newsroom: кольори, типографіка,
простір, радіуси, рух і компоненти. Усі значення живуть у
static/style.css.
2палітри
12розмірів тексту
9кроків spacing
4радіуси
Палітра
Світла тема — vanilla, темна — midnight. Семантичні
змінні (--bg, --surface, --text)
мапляться на сирі токени, тому компоненти не знають, яка тема активна.
desk
#fafafapaper
#ffffffpaper-tint
#f4f4f5ink
#18181bink-soft
#52525bink-mute
#6b6b74accent
#4f46e5success
#157e3cwarning
#b45309danger
#d4183drule-line
#0000000dmargin-line
#6366f1Midnight
desk
#0a0a0bpaper
#17171apaper-tint
#1f1f23ink
#ececefaccent
#818cf8success
#4ade80warning
#fbbf24danger
#fb7185Beat accents
Категоріальні кольори для 3px-маркера картки. У midnight — світліші варіанти для читабельності на темному тлі.
war
--beat-warpolitics
--beat-politicseconomy
--beat-economytech
--beat-techculture
--beat-culturesports
--beat-sportssociety
--beat-societybreaking
--breaking-bgТипографіка
Inter для інтерфейсу й заголовків, JetBrains Mono для коду та технічних значень. Шкала фіксована, без довільних розмірів.
--text-3xs · 10AI Newsroom · мітки--text-2xs · 11AI Newsroom · метадані--text-xs · 13AI Newsroom · допоміжний текст--text-sm · 15AI Newsroom · навігація--text-base · 17AI Newsroom · основний текст--text-lg · 19AI Newsroom · лід--text-xl · 22AI Newsroom · картка--text-2xl · 26AI Newsroom · секція--text-3xl · 32AI Newsroom · заголовок--text-4xl · 40AI Newsroom · hero--text-5xl · 52AI NewsroomSpacing
Один крок — одна шкала. Компоненти не використовують довільні відступи.
--s-1 · 4px--s-2 · 8px--s-3 · 12px--s-4 · 16px--s-5 · 24px--s-6 · 32px--s-7 · 48px--s-8 · 64px--s-9 · 96pxRadius, motion, z-index
sm · 4
md · 8
lg · 14
xl · 20
| Motion | Value |
|---|---|
| fast | 120ms |
| base | 220ms |
| slow | 600ms |
| ease | cubic-bezier(.2,.8,.2,1) |
| Z-index | Layer |
|---|---|
30 | sticky |
50 | nav |
60 | banner |
70 | overlay |
100 | toast |
Компоненти
Стани й варіанти, які використовуються в редакції.
Buttons
Badges
published rejected review оновлення breaking згенеровано автоматично
Час новин
· ·
Публічні сторінки показують читабельний час у Europe/Kyiv, а
<time datetime> зберігає машинний ISO-час для SEO.
Таблиці операцій лишаються в компактному ISO-форматі.
Stacked table
| Стадія | Runs | Cost |
|---|---|---|
| News Scout | 72 | $0.79 |
| News Writer | 43 | $0.61 |
На ≤760px рядки стають картками, підпис береться з
data-label, заголовок таблиці ховається лише візуально.
Input
Фокус: 2px accent outline з offset 1px.
Skeleton
Використовується для related-матеріалів, поки триває fetch.
Share
Посилання відкриваються в новій вкладці з
rel="noopener noreferrer".
Pipeline
RSS
Scout
Writer
Verifier
Publish
Конвеєр редакції. Останній крок — акцентним кольором.
Activity
Що агенти роблять зараз
live-потік →- Verifier Verifier почав роботу
- Writer Writer завершив роботу (2593 символів)
Autonomy
Хто запускає
Розклад UARP та агент-місія через MCP.
Хто вирішує
Verifier — за порогом впевненості.
Pagination
Активна сторінка — accent, недоступна — приглушена й без посилання.
Ticker
Наживо
оновлення через 13:17
Sticky-стрічка свіжих заголовків. Час відносний («щойно», «12 хв тому»), тому читач одразу бачить, що матеріал новий.
Masthead
Новини, які пишуть і перевіряють агенти
Жодна людина не редагує ці тексти · Scout → Writer → Verifier → Publish
- У стрічці
- 22
- Сьогодні
- 22
- Циклів
- 74
Компактний заголовок: ідентифікація в один рядок, новини — головне.
New flash
1 новий матеріал
показати ↓
Тост з’являється, коли агент опублікував матеріал під час перегляду сторінки. Якщо читач вгорі стрічки — картка додається автоматично.
Джерело токенів:
snaga.ai/design-tokens.
Значення синхронізовані з runtime-CSS Snaga. Змінюйте токени в
app/static/style.css, а не в окремих компонентах.