# Aproject — Design System

**Aproject** (рус. «Апроджект») is an **AI platform for the construction / AEC industry** — *«ИИ для строительной отрасли — от ответов до автономных задач»*. A specialist in norms, calculations and project documentation works **in tandem with industry-tuned AI**: today a dialogue with the ATOM‑1.0 model; tomorrow autonomous agents that prepare explanatory notes, bills of quantities and release packages. The product language is **Russian**, the domain is **building codes, structural calculations, drawings and estimates** (СП · СНиП · ГОСТ · типовые серии).

The visual world is **Claude-inspired**: a warm "oat paper" canvas, a single terracotta accent, the Newsreader serif for display, and a playful disc-with-eyes brand mark. Calm, document-grade, expert — never flashy.

## The three products & three models

| Product | Model | Role | Accent |
|---|---|---|---|
| **Чат** (Chat) — *available* | **ATOM‑1.0** | Dialogue: answers with citations to norms, runs calculations, indexes uploaded docs, remembers full context | indigo `#4c6ef5` |
| **Пилот** (Pilot) — *soon* | **META‑1.0** | One autonomous agent over a project's file server: gathers data, applies templates, builds document packages | violet `#7c3aed` |
| **Команда** (Team) — *soon* | **TAKT‑1.0** | Orchestrates a team of agents across sections (АР/КР/ОВ/ВК/ЭО): task routing, schedule, document flow | blue `#2f6fed` |

All three know the current СП, ГОСТ, typical series, calculation methods and documentation formats. Beyond the apps there is **Hub** (community at hub.aproject.com) and **Aproject Cloud для Windows**. Audiences: **Проектировщики** (designers), **Подрядчики** (contractors), **Заказчики** (clients). Plans: Free · Pro (от 990 ₽) · Max (от 2 990 ₽) · Custom.

## Sources this system was built from

> The reader may not have access to these — they are recorded for provenance.

- **App codebase** (React recreation of chat.aproject.com): cross-project `019dc8e7-cdb0-7c5e-8ce0-4960d51fb71d` — `js/*.jsx` (shell, chat, pilot, team, projects, file manager), `styles/{theme,components,pilot,mobile}.css`, `screenshots/`. The tokens, components and Chat UI kit are derived from this.
- **Marketing site**: <https://aproject.com/> — products, models, audiences, pricing and FAQ copy. The Website UI kit recreates its structure.
- Inspiration reference: claude.ai (warm minimal aesthetic).

---

## CONTENT FUNDAMENTALS — how Aproject writes

- **Language & address.** Russian throughout. The user is addressed informally-professional with imperative verbs: *«Проверь смету…», «Составь акт…», «Напиши письмо…»*. The product refers to itself by name ("Aproject может ошибаться"), not "I". Greets by first name: *«Чем займёмся, Алексей?»*.
- **Tone.** Confident, concrete, domain-expert. No marketing fluff inside the app; copy reads like a competent colleague. Honest about limits: *«Aproject может ошибаться — проверяйте по проектной документации»*. Coming-soon products are labelled plainly: *«○ Скоро»*.
- **Casing.** Sentence case for everything human-facing. **UPPERCASE only** for small eyebrow/section labels with wide tracking (*ПРЕДЫДУЩИЕ 7 ДНЕЙ*, *ИЗБРАННОЕ*, *ПРОДУКТЫ*). Buttons are sentence case (*Новый чат*, *Получить код*, *Оформить*).
- **Domain vocabulary is load-bearing — keep it exact.** Norm codes (*СП 63.13330.2018*, *ГОСТ Р*, *СП 28.13330*), sections (*АР/КР/ОВ/ВК/ЭО*), document types (*ПЗ, ведомость объёмов, акт скрытых работ, КС‑2, спецификация арматуры*), units (*мм, м², кПа, М400, А500С*). These appear in **monospace** when they're a code/filename/ID.
- **Numbers & technical values** use monospace + tabular figures: `СП 63.13330`, `S₀ = 1.5 кПа`, `14:32`, `142 файла`. Money/area on marketing: `990 ₽`, `24 500 м²`.
- **Citations.** Assistant answers cite sources inline as small superscript chips `[1]` that link to the norm. Always show where a number came from.
- **Emoji.** Not used in product UI. The only emoji are **country flags** in the building-code zone switcher (🇷🇺 🇪🇺 🇺🇸 …). Never decorative emoji in cards or copy.
- **Marketing voice** is a touch grander but still sober: *«ИИ для строительной отрасли — от ответов до автономных задач»*, *«Каждая роль — своя ценность»*. Bullets use a small ● glyph.

## VISUAL FOUNDATIONS

- **Palette.** Warm **oat paper**: canvas `#faf9f6`, ink `#29261f`. Surfaces are pure white `#fff` cards on the oat canvas; the sidebar is a slightly warmer `#f4f2ec`. One brand accent: **terracotta `#bd4b1e`** (hover `#a83f17`), used sparingly for the single primary action, active icons, focus and selection tint (10% terracotta). Per-product accents recolour the Pilot/Team workspaces (violet / blue). Status hues: success green `#2f8a5b`, warning amber `#c08a1e`, danger `#c0392b`, info indigo `#3f5fd6` — each paired with a ~12–15% tint fill.
- **Type.** Three families. **Newsreader** serif for display only — wordmark, hero/page titles (*«Чем займёмся, Алексей?»*, *«Проекты»*), pricing amounts. **System sans** (ui-sans-serif / -apple-system) for all UI at a 13.5–14px base with tight 1.45 line-height. **Mono** (SF Mono / ui-monospace) for codes, filenames, IDs, timestamps, technical metadata. The serif/sans contrast is the signature: warm editorial headlines over a crisp functional UI.
- **Backgrounds.** Flat warm colour only. **No gradients** on surfaces (the lone gradient is the people-avatar fill, terracotta→magenta). No photographic or illustrated backgrounds, no textures, no patterns. Depth comes from hairline borders + soft shadow, not colour.
- **Cards & surfaces.** White, **1px hairline border `#e7e3d9`**, **12px radius**. Interactive tiles lift on hover: border darkens to `#ddd8cb`, a soft `0 6px 18px rgba(0,0,0,.06)` shadow appears, and the card nudges `-1px` up. The floating sidebar uses a layered low-opacity panel shadow and a 16px radius with a 10px margin from the viewport edge.
- **Radii.** 5–6px for tags/menu items, 8px buttons/inputs/nav, 10px base, 12px cards/popovers, 14px palette/modal, 16px sidebar & composer, 999px pills.
- **Shadows.** Warm and restrained, always low-opacity black. Tiers: `sm` (buttons), `card` (tile hover), `panel` (floating sidebar), `menu` (dropdowns), `modal` (dialogs). Never a hard or coloured drop shadow.
- **Borders & dividers.** 1px `--border` everywhere; `--border-strong` for emphasis/hover. Sidebar uses its own slightly warmer border. Dividers are full hairlines, not heavy rules.
- **Motion.** Quick and calm. `0.12s ease` for hover/colour/background; width/transform transitions `0.16–0.22s` with `cubic-bezier(.4,0,.2,1)`. Menus & modals pop in with a gentle spring `cubic-bezier(.34,1.2,.64,1)` (~0.12–0.14s). Decorative loops only for live/working states: a soft pulsing dot for "running/thinking" and a sliding bar for agent activity. No bounces on content; respect reduced-motion.
- **Hover / press.** Hover = fill with `--secondary` (icon buttons), darken to `--primary-hover` (primary), or lift (cards). Press = `translateY(.5px)` nudge on buttons. Active nav item gets a warm `--sidebar-item-active` fill and a terracotta icon.
- **Transparency & blur.** Used only for scrims: the command-palette / modal overlay is `rgba(20,18,14,.32)` + `blur(2px)`; the marketing nav is a translucent blurred bar. Surfaces themselves are opaque.
- **Layout.** Floating rounded sidebar (268px, collapses to 60px) with a 10px gutter; a 56px top bar with breadcrumb/context on the left and share/star on the right; content centred in a ~620–940px column. Chat threads max ~760px; marketing content max 1080px. Generous vertical rhythm on marketing (72px sections), denser in-app.
- **Imagery vibe.** The product itself is near-imageless — it's a tool. When imagery appears (attachments, drawings) it's warm-neutral, document-like (PDF/DWG previews, site photos). No stocky hero photography; the hero shows the product itself.

## ICONOGRAPHY

- **One icon system: a lucide-style line set**, hand-ported into `components/core/Icon.jsx` (75 glyphs). **24×24 viewBox, 2px round-cap/round-join strokes, `currentColor` fill.** Muted (`--muted-foreground`) at rest, terracotta when active; emphasis marks (checks, send arrows) bump to 2.2–2.6 stroke. Sizes 13–18px in UI, up to 30px in heroes. Use `<Icon name="…">` — never paste raw SVG into screens.
- **Domain glyphs matter:** `Ruler` (чертежи), `Building`, `FileText` (ПЗ/документы), `Folder`/`FolderOpen` (проекты), `Sparkle`/`Brain` (AI), `Globe` (web/normbase), `Database` (индекс). File-type tints recur: PDF red `#c0392b`, DOCX blue `#3f5fd6`, XLSX green `#2f8a5b`, scans violet.
- **The brand mark is not an icon** — it's the disc-with-eyes `Logo`, used as the AI avatar in chat, the app/nav logo, and hero mark. The eyes track the cursor (`track` prop); the disc inverts to white on dark surfaces.
- **Flags** (Unicode emoji) are the *only* emoji, and only inside the building-code zone switcher. No other emoji or unicode pictographs as icons.
- This system ships the icon set in the bundle; consumers also have Lucide available on CDN if a missing glyph is needed (match the 2px round style and flag the addition).

---

## Index / manifest

**Global CSS** — link `styles.css` (imports everything below):
- `tokens/colors.css` — paper/oat scale, terracotta, product accents, status hues, semantic aliases, dark theme.
- `tokens/typography.css` — families, type & display scale, weights, tracking.
- `tokens/spacing.css` — spacing, radii, shadows, motion.
- `tokens/fonts.css` — Newsreader (Google Fonts CDN). *See font note below.*
- `tokens/base.css` — page resets, body defaults, scrollbars, dark-logo inversion.
- `components/components.css` — primitive component styling.

**Components** (`window.AprojectDesignSystem_<hash>` after loading `_ds_bundle.js`):
- `brand/` — `Logo`, `Wordmark`.
- `core/` — `Icon` (+ `ICON_PATHS`), `Button`, `IconButton`, `Kbd`, `Tooltip`.
- `forms/` — `Input`, `Switch`, `Chip`.
- `display/` — `Badge`, `StatusBadge`, `Avatar`, `ProductChip`, `Card`, `ProgressBar`.
- `navigation/` — `Tabs`.

**UI kits** (`ui_kits/`):
- `chat/` — the **Чат** app: login → new-chat hero → live conversation (reasoning, web-search sources, citations) → projects grid. Interactive React kit composing the primitives. `index.html` is a Starting Point.
- `website/` — the **marketing landing** (aproject.com recreation): hero + app preview, products, models, audiences/stats, pricing, FAQ, footer. Static, themable, a Starting Point.

**Foundation cards** (`guidelines/`, `components/**/*.card.html`) — specimens for the Design System tab, grouped Colors / Type / Spacing / Brand / Components / Чат / Сайт.

**SKILL.md** — Agent-Skill front-matter so this system can be used from Claude Code.

> **Font note.** Newsreader loads from the Google Fonts CDN (it *is* a Google font — no substitution). The UI sans and mono are native system stacks by design, so no binaries are bundled. If you need the serif offline, self-host Newsreader and swap the `@import` in `tokens/fonts.css` for local `@font-face` rules.