5.7 KiB
AGENTS.md
Lineform Studio — архитектурный шаблон с жесткой Swiss/brutalist эстетикой: сохраняй черно-белую сетку, крупную индексную типографику, реальные архитектурные кейсы и форму брифа как главный conversion path.
Project Specifics
- Доменный контент лежит в
src/entities/site-content.ts; не размазывай списки проектов и услуг по компонентам. src/appсодержит только route wrappers; композиция каждой страницы живёт в отдельном widget (src/widgets/<page>-page.tsx). См. File Map.- Feature-формы и узкие mock-интеракции размещай в
src/features/*/ui. - Не добавляй CMS, реальные заявки, карты, платежи или backend API без отдельного запроса.
- Проверка после правок:
pnpm lintиpnpm build.
Design System
Источник токенов — src/app/globals.css (@theme + :root/.dark). Шрифт — Roboto Flex (--font-lineform), один гарнитур на sans и mono, с включёнными ss01/cv01. Работай через семантические классы Tailwind (bg-background, text-foreground, border-foreground), не хардкодь hex/oklch.
Личность: Swiss/brutalist «бумага и тушь» — почти белый бумажный фон, near-black «ink» как граница и текст, и единственный тёплый янтарный accent как редкий сигнал. Цвета намеренно нейтральные (нулевая хрома у фона/текста/secondary) — драматизм создаёт не палитра, а сетка, масштаб типографики и толстые границы.
| Роль | Light | Характер |
|---|---|---|
background |
почти белый (oklch 0.985) | бумажный фон страниц |
foreground |
near-black ink (oklch 0.13) | текст + границы (border-2 border-foreground) |
primary |
near-black ink | заливка кнопок/инверсия |
secondary |
светло-серый | нейтральные плашки |
muted / muted-foreground |
серый | вторичный текст, фон фото |
accent |
тёплый янтарь (oklch 0.78 0.16 75) | единственный цветной сигнал (бейдж города) |
card |
чистый белый | поверхности на бумажном фоне |
Узнаваемые приёмы (держи их, это и есть «лицо» проекта):
- Жёсткие углы:
--radius= 0.125rem; всёrounded-none(кнопки, бейджи, карточки). - Толстые границы и divider-ы:
border-2 border-foreground,divide-y-2 divide-foreground,border-y-2— структура страницы строится границами, а не тенями. - Никаких теней: объём даёт инверсия
hover:bg-foreground hover:text-background, а не drop-shadow. - Чертёжная типографика:
font-black uppercase, очень плотныйleading(leading-none/leading-[0.78]/leading-[0.88]), гигантские viewport-размеры (text-[18vw]/md:text-[10vw], доtext-9xl), индексы видаIndex / 01. - Утилитарные классы:
.lineform-grid— миллиметровая сетка-подложка для hero/секций;.arch-photo—grayscale(1) contrast(1.08)на всех фото (ч/б архив). - Широкий каркас: контейнер
max-w-[1500px], многоколоночныеmd:grid-cols-[...]раскладки с фиксированными колонками-индексами.
Do / Don't:
- Do: держи ч/б палитру, толстые границы, индексную нумерацию, grayscale-фото и крупную uppercase-типографику; accent — только точечно.
- Don't: мягкие тени, скруглённые углы, цветные градиенты, цветные фото, generic-SaaS hero — это ломает «чертёжную» личность шаблона.
File Map
| Route | Widget |
|---|---|
/ |
src/widgets/home-page.tsx (HomePage) |
/work |
src/widgets/work-page.tsx (WorkPage) |
/work/courtyard-house |
src/widgets/project-detail-page.tsx (ProjectDetailPage) |
/services |
src/widgets/services-page.tsx (ServicesPage) |
/process |
src/widgets/process-page.tsx (ProcessPage) |
/studio |
src/widgets/studio-page.tsx (StudioPage) |
/contact |
src/widgets/contact-page.tsx (ContactPage) |
Переиспользуемые блоки:
src/widgets/site-shell.tsx—SiteShell(sticky header + nav, обёртка всех страниц).src/widgets/project-image.tsx—ProjectImage(grayscale-фото проекта с индексом; Home + Project Detail).src/shared/ui/page-title.tsx—PageTitle(заголовочная секцияcode / title / textвнутренних страниц: Work, Services, Process, Studio, Contact).src/features/project-brief/ui/project-brief-form.tsx— mock-форма брифа.
Одноразовые блоки колоцированы со своей страницей (напр. featured-секция и сетка проектов в home-page.tsx, список фактов студии в studio-page.tsx).