# AIST.tech — Design System Single source of visual + interaction truth for AIST.tech surfaces. Mirrors the canonical `DESIGN.md` (Google Labs spec) at the root of the `vsokovnin/aist-tech` repository. > **Brand statement.** Calm institutional authority. High-contrast neutrals, one confident > blue (`#0048B2`) for actions and brand moments, generous whitespace. Typography carries > weight; chrome recedes. ## Sources - **Repo:** `vsokovnin/aist-tech` (private GitHub) - **Design spec:** `/DESIGN.md` (YAML front-matter is normative) - **Marketing site:** `website/` — Next.js 16 static export, deployed at **aist.tech** - **ЛК shell:** `app/` — Next.js 16 + React 19 + Tailwind v4 + shadcn/ui, deployed at **app.aist.tech**. Multi-tenant shell that hosts product surfaces (sidebar + topbar + product iframe/area). - **MI Analyst:** `mi-analyst/` — dark-theme analytical product, embedded in the shell. ## Company **AIST.tech** — AI-экосистема для бизнеса (стратегия, продукты, обучение). Команда внедряет ИИ в российские компании: от карты возможностей и обучения управленцев до запуска готовых AI-агентов (стратегический аналитик, тренер продаж, голосовой оператор, корпоративная память и др.). Контактная воронка идёт через Telegram: `t.me/aist_welcome_bot`. Контент только на русском, без эмодзи. ## Surfaces and goals | Surface | URL | Theme | Goal | |---|---|---|---| | Marketing | aist.tech | Light | Brand conviction, product positioning, lead capture | | ЛК Shell | app.aist.tech | Light | Utility, density without noise | | MI Analyst | embedded | **Dark** (zinc) | Sustained analytical work | The shell and marketing site **share** the brand tokens (light + brand blue). MI Analyst flips to a zinc dark theme but keeps the same `#0048B2` for primary actions. CTA sections on marketing use a deliberate inversion (`bg-foreground text-background`) as a strong section closer — that is intentional, not theme-mixing. --- ## Index Root files: - `README.md` — this file - `DESIGN.md` (root in source repo) — normative; mirrored here as `colors_and_type.css` - `colors_and_type.css` — CSS custom properties for color, type, radii, spacing - `SKILL.md` — invocation hint for downstream agents Folders: - `assets/` — logos, brand imagery - `fonts/` — webfonts (Commissioner, Inter via Google Fonts CDN; no .woff2 bundled locally — see "Fonts" below) - `preview/` — small specimen cards rendered in the Design System tab - `ui_kits/` — high-fidelity recreations - `ui_kits/marketing/` — marketing site (aist.tech) sections + chrome - `ui_kits/lk-shell/` — ЛК shell (app.aist.tech) chrome + dashboard - `ui_kits/mi-analyst/` — MI Analyst dark data tool --- ## Content fundamentals **Language: Russian only.** All product copy, marketing, and UI strings are in Russian. Translation is not part of the system; English appears only in technical labels (model names, "API", "uptime"). **Tone.** Calm, professional, decisive. No hype. No marketing fluff. Sentences are short and direct. The voice is **"мы" (the team)** speaking to **"вы" (the buyer/operator)** — formal-you, never «ты». The team does not boast — it states facts and trade-offs. **No emoji.** Anywhere. Not in product, not in marketing, not in commit messages. This is explicit in `CLAUDE.md` (`No emoji — not in code, not in content`). Substitute with icons (Lucide) or, in long-form blog posts, with em dashes and tight typography. **Casing.** - Headlines: sentence case, often with a deliberate accented fragment (e.g. *«Встраиваем ИИ **в бизнес.**»* — line two on a separate line, period intentional). - Section labels: `UPPERCASE`, `letter-spacing: 0.125em`, primary blue. These are *categories*, not titles — short and noun-like (`РЕШЕНИЯ`, `ЗНАКОМО?`, `ПРОДАКШЕН`). - Body: standard sentence case. Russian quote marks `«…»` preferred. - Numerics: thin space as thousands separator (`1 000+`, `300+ млн ₽`). **Vocabulary the brand uses.** - *ИИ* (not «AI» in body copy) · *ИИ-агент* · *ЛК* (личный кабинет) · *воркфлоу* · *кейс* · *интенсив* · *аудит* · *исполняемый* (agents that actually do things, not just chat). - Avoids: *революция*, *прорыв*, *next-gen*, *синергия*, *цифровая трансформация*. **Vibe.** «Мы знаем, где вашему бизнесу будут деньги, а где не будут. Скажем честно, если проект не нужен.» (See `CTA` copy: *«Расскажите о вашем проекте — предложим решение и честно скажем, если оно не нужно.»*) **Examples (lifted from `website/src/content/`).** - Hero: *«Встраиваем ИИ в бизнес.»* / *«От стратегии до продакшена: помогаем компаниям внедрять ИИ осознанно — обучаем команды, проектируем и запускаем системы.»* - Section label: `НАШ ПОДХОД`. Title: *«Что мы делаем»*. Subtitle: *«Понятные сервисы. Практические решения. Архитектурная точность.»* — three short noun phrases divided by periods. This rhythm is recurring. - Pain framing: a `pain` line (bold, foreground), `description` (muted), and a `consequence` line in italic destructive 75% — three beats, never four. - Metric tiles: huge value (`x200`, `1ч`, `99.9%`) + 1–3 word label (*быстрее*, *вместо 4 недель*, *Uptime сервисов*). --- ## Visual foundations ### Palette Anchored in high-contrast neutrals with a single strategic blue. - **Brand blue `#0048B2`** is the only interactive driver: links, primary buttons, focus rings, active states, brand moments. Never decorative. **Aim for one primary per screen.** - **Foreground `#111111`** — near-black, slightly warmer than pure black to feel less harsh on `#FAFAFA`. - **Background `#FAFAFA`** — page ground; reads as a warm-neutral, distinct from pure white card. - **Card `#FFFFFF`** — pure white only on elevated surfaces (cards, popovers, modals). The contrast against `--background` is what creates depth — there is no shadow at rest. - **Secondary / Muted `#F5F5F7`** — alternating section backgrounds, subtle fills (Apple-inspired neutral). - **Muted foreground `#595959`** — body text, captions; AA at 16px+ on background. - **Border `#E0E0E0`** — hairline dividers and input borders. Low contrast on purpose; it should stay quiet. - **Destructive `#DC2626`**, **Success `#16A34A`**, **Warning `#EAB308`** — used sparingly. Warning lives only in MI Analyst (confidence states). **Dark variant (MI Analyst only)** is a strict zinc ladder: `#09090B → #18181B → #27272A → #3F3F46` for surfaces/borders, `#E4E4E7` and `#A1A1AA` for text. Brand blue crosses both themes unchanged. **Legacy navy `#1a3a5c`** is **dead.** It belonged to the retired Astro landing — never use it. ### Type Two-family split, deliberate (commit `8b71f83`): - **Commissioner** for headings (h1–h3) and uppercase labels — institutional weight. - **Inter** for body, tables, default UI text — calm, readable in long sessions. - Fallback `ui-sans-serif, system-ui, sans-serif`. Loading: `display: swap`. - Never use more than two weights on a single screen (typically 400 body + 700 heading). ### Layout - Container max width **1152px** (`max-w-6xl`); horizontal padding `px-4 sm:px-6`. - Section vertical rhythm `py-20` (sometimes `lg:py-28` on heroes). Section header bottom margin `mb-12`. - Card grid gap `24px` (`gap-6`); inner element gaps `12–24px`. - Shell chrome (app.aist.tech): sidebar fixed left 240px white + right border; topbar sticky 56px white + bottom border; content area max 1200px, padding 24/32px. ### Elevation **Flat at rest, depth on interaction.** Hierarchy is tonal layers (`background → card → inverted CTA`), not shadows. Shadows appear *only* on hover as affordance: `translateY(-2px)` + soft shadow. CTA section closes pages via theme inversion (`bg-foreground text-background`) — a flip, not a shadow. ### Radii Tight, architectural, consistent. Pick one level per component family — **never mix scales on a single surface**. | Token | px | Usage | |---|---|---| | `sm` | 8 | section tabs, small pills, inputs (secondary) | | `md` | 10 | standard inputs, small buttons | | `lg` | 12 | primary buttons, large inputs, default cards | | `xl` | 16 | prominent cards, dashboard tiles, MI Analyst chat bubbles | | `full` | 9999 | status dots, avatars, pill badges | ### Hover & press - **Hover**: `translateY(-2px)` + `--shadow-hover`. Or color shift to `primary/90`, `secondary/80`, `muted` for low-emphasis items. Duration ~200ms, ease `(0.2, 0, 0, 1)`. - **Press**: subtle `translateY(1px)` (the shell's button has `active:not-aria-[haspopup]:translate-y-px`). No flash, no ripple. - **Focus**: 3px ring, `ring/50`, color `--ring` (= primary). Never custom; uses Tailwind `focus-visible:ring-3 focus-visible:ring-ring/50`. ### Borders Hairline `1px solid #E0E0E0` is the default. The shell's card uses `ring-1 ring-foreground/10` for an even quieter border. Section accents come via **a single 3px top or left border** in `primary`, `destructive`, or `success` — that is the brand's preferred way to mark sections without color-flooding. ### Backgrounds - Default: solid `--background` `#FAFAFA`. Alternating sections use solid `#F5F5F7`. - The Features section (`Features.tsx`) inverts to a `#1C1C1E` near-black card with white text and `#4488dd` (lighter brand blue, dark-theme adjustment) for the section label. This is the canonical "dark feature card" pattern. - **No gradient backgrounds.** A single thin gradient line is used in the dark CTA (`bg-gradient-to-r from-transparent via-primary to-transparent` as a 1px-tall divider). That is the only gradient in the system. - **No grain, no noise, no patterns, no illustrations** at the brand level. Imagery is reserved for product shots / kept minimal. The hero on the marketing site is a text-only composition with subtle animation, not a hero image. ### Animation Calm, brief, single-axis. - Entry: `AnimateIn` fades + 8px translate-up; staggered slightly. - Hover: `translateY(-2px)` + shadow. - No bounces, no springy overshoots, no parallax. Easing is `cubic-bezier(0.2, 0, 0, 1)`. Durations 120/200/320ms. ### Transparency & blur - Header is sticky with `bg-background/95` + `backdrop-blur` + a feature-query fallback `supports-[backdrop-filter]:bg-background/60`. The blur appears only on the sticky header — nowhere else. - Mobile menu: opaque `bg-background`, no blur. - Dialogs/modals: opaque white card; no glass effects. ### Cards The canonical card has: - Background `#FFFFFF` - Radius `--radius-xl` (16px) — exception: shell uses `--radius-lg` (12px) for compact density - Border: `border border-[#eee]` *or* `ring-1 ring-foreground/10` - Padding: 24–32px (marketing) / 16–24px (shell) - **No drop shadow at rest.** Only on hover. - Optional **3px accent border** on top (`border-t-primary`) or left (`border-l-destructive`) to mark category. The Approach card has a top primary border + a giant ghost number `text-primary/[0.12]` in the corner (a recurring numeric-watermark device). ### Capsules vs. protection gradients Status pills, badges, and small tags are **fully rounded capsules** (`rounded-full` / `rounded-4xl`). They do **not** use protection gradients. Where text sits over imagery, the brand prefers a tonal background (white card with image inside) — not a gradient overlay. ### Imagery Sparse. The marketing site uses near-zero photography in v1 — typography and structure do all the work. When imagery is needed (case studies, blog posts), the brand reads as **warm-neutral, soft natural light, no heavy filters, no grain**. Avoid blue-tinted "tech-stock" photography. --- ## Iconography **Primary system: Lucide.** It is the only icon set referenced across `app/` and `website/`. Used at: - 16px (`size-4`) inside buttons, sidebar nav, inline labels — stroke 2. - 20–24px in feature cards. - 48–64px in empty-state hero illustrations (still single-line, not filled). **Style:** outline / line, single weight, single colour. **No filled icons. No two-tone.** Icons usually inherit `currentColor`; in `primary` accent context (offer cards, section labels) they take `--primary`. **Codebase pattern.** The shell loads Lucide dynamically by string name: ```tsx import * as Icons from 'lucide-react' const Icon = ((Icons as any)[it.icon] ?? Icons.Box) as React.ComponentType<{ className?: string }> ``` So content files reference icons as strings (`'Search'`, `'Bot'`, `'Mic'`, `'Plug'`, `'GraduationCap'`, etc.) — keep that convention when adding new sections. Fallback is `Box`. **Telegram glyph** is the one bespoke SVG in the codebase (`website/src/components/layout/Footer.tsx`). It is rendered at `currentColor`, used in the footer and in CTA blocks. It is shipped inline, not as an asset file. **Logo.** Single-file PNG (`assets/logo.png`) — wordmark "AIST.tech" with a square brand-blue mark featuring a stylised arrow/Z that hints at "stork" (аист) in negative space. **Do not redraw the mark.** Always use the shipped `logo.png` (or `og.png` for social previews). The logo is rendered at 140×32 in the header. **Emoji: never used.** Not in product, not in content, not in commits. If you find yourself reaching for one, use a Lucide icon or restructure the copy. **Unicode glyphs** appear only as typographic devices: `→` after "Подробнее" links, `©` in the footer, `«»` quotes, `—` em dashes, and the non-breaking-space `\u00A0` (used inside the hero accent: `'в\u00A0бизнес.'`). --- ## File index Root manifest of this design system folder. ``` README.md # this file — brand, content, visual fundamentals, iconography SKILL.md # downstream skill manifest (Claude Code compatible) colors_and_type.css # CSS vars: --color-*, --radius-*, --space-*, h1/h2/h3/p/.label-caps fonts/ # Commissioner + Inter (Google Fonts, latin + cyrillic) assets/ logo.png # wordmark — DO NOT redraw og.png # social preview preview/ # atomic design-system cards (registered for the Design System tab) colors-brand.html # primary swatch + usage colors-neutrals.html # foreground/muted/border ladder colors-semantic.html # destructive / success / warning colors-dark.html # MI Analyst zinc ladder type-display.html # Commissioner h1/h2/h3 type-body.html # Inter body-lg / md / sm type-labels.html # caps labels radii.html # 8 / 10 / 12 / 16 / full spacing.html # 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 elevation.html # flat → hover lift → CTA inversion buttons.html inputs.html cards.html badges.html icons.html mi-analyst.html logo.html ui_kits/ marketing/ # aist.tech — public site recreation lk-shell/ # app.aist.tech — multi-tenant shell with sidebar + dashboard mi-analyst/ # dark data tool — chat panel + widget panel ``` Each `ui_kits//` folder has its own `README.md`, `index.html` interactive demo, and small JSX components. ## See also - `colors_and_type.css` — tokens you can include directly - `preview/` — visual specimens (each card is registered for the Design System tab) - `ui_kits/` — clickable component recreations - `SKILL.md` — for downstream skill invocation