# Personal taste core — serafim > Transferable invariants confirmed by edit requests in ≥2 projects (21st-private-1, eval-hub-app). Read together with the project taste.md; on conflict the project wins, except antipatterns — those are never overridden. Taste axis: classical (order, density, restraint) — 14/15 core rules on the classical axis. ## Antipatterns (permanent) - Hide actions/buttons when the action is impossible in the current context - Remove decorative or unnecessary icons - Don't show empty, null or placeholder content — hide the element when there is no data _(confidence: medium)_ - Remove redundant labels/headers when meaning is obvious from context _(confidence: medium)_ ## Craft norms (violation = bug) - Match the rest of the app's established style and design system for any component - Keep elements properly aligned; crooked/misaligned layout reads as a bug - Prevent layout shifts; skeleton loaders must match the final rendered state - Match the design mock exactly _(confidence: medium)_ - Keep text and element sizing consistent across the interface _(confidence: medium)_ - Group and structure content for fast readability instead of a wall of text _(confidence: low)_ ## Personal preferences - Default to a meaningful view/content rather than an empty or 'all' state _(confidence: medium)_ - Use muted text for body content and highlight only meaningful elements like links _(confidence: medium)_ - Place confirm buttons and limit values inside the input field on the right _(confidence: medium)_ ## Meta-preferences - Reuse existing components and patterns instead of creating new ones - Animate state changes and transitions with smooth morphing, consistent with the rest of the app --- # taste.md — 21st-private-1 (v7) > Project style profile. Read TOGETHER with the personal core `~/.taste/core.md`: the core holds the person's invariants, this file holds this repo's style. Conflicts resolve in favor of the project, except core antipatterns. ## Style identity Build on a near-white canvas (`#f9fafb`/95.7% gray) with deep charcoal foreground; honor the explicit light/dark `--tl-background` overrides and keep a single electric-blue primary (228° 100%) as the only saturated accent. Keep density high and compact: lean on `text-sm`/`text-xs` down to `text-[10px]`, `h-7`/`h-8` controls, and tight `gap-1`–`gap-2` spacing. Default radii to `rounded-md`, reserving `rounded-full` for pills and avatars. Mute body text via `muted-foreground` and let only links and primary actions carry color. Animate state with `transition-colors`/`transition-all` at `duration-150`–`200`, never abruptly. ## Directives — owner's words, source of truth These override code statistics. Code adoption may lag; stats below only fact-check. - **Style destructive/distractive buttons like the diff view 'Discard changes' button, and keep this rule documented in claude.md** — owner, 2026-01-27: «Проверь Deleta чтобы было в стили Discard changes и добавь в claude.md. добавь праивло как мы делаем distractive кнопки…» _(scope: global; restated 4×)_ - **In magic-chat, reuse the existing agents components (layout, sidebar, tools) instead of inventing new ones** — owner, 2026-02-15: «Я просил тебя использовать сущетсвубщий блять компонент как мы испольузем в agents…» _(scope: zone; restated 6×)_ - **Use only the local project icons from apps/web/app/(alpha)/agents/{features}/ui/icons (same as canvas/agents-sidebar) — never lucide or custom inline SVG** — owner, 2026-02-20: «сделай чтобы из apps/web/app/(alpha)/agents/{features}/ui/icons были все иконки…» _(scope: global; restated 4×; pins agents/{features}/ui/icons)_ - **For switches use the existing canvas switch component apps/web/app/(alpha)/canvas/{components}/ui/switch.tsx** — owner, 2026-02-20: «используй сука apps/web/app/(alpha)/canvas/[id/{components}/ui/switch.tsx]…» _(scope: global; restated 2×; pins canvas/{components}/ui/switch.tsx)_ - **Everywhere use the toast styles from /agents and /an, not the old canvas toast overrides** — owner, 2026-03-04: «сделтаь чтобы теперь везде исопльзвоались как в /agetns /an а не как в канвасе…» _(scope: global; pins agents/an toasts)_ - **Tooltips must follow the agents-sidebar style with the kbd shortcut shown on the left bottom row** — owner, 2026-03-06: «в тултипах слева должно быть в нижнем ряду kbd символ - как в agents-sidebar например…» _(scope: global; restated 4×)_ - **For code use the proper code blocks like in the agents/docs documentation** — owner, 2026-04-01: «для кода надо использовать нормальные кодовые блоки как в документации…» _(scope: global; restated 3×; pins agents/docs code blocks)_ - **In community, style template/agent cards exactly like the component cards** — owner, 2026-04-10: «сделай агентам как в карточке компонентов один в один…» _(scope: zone; restated 5×)_ ## Direction (code velocity) - New design system lives under `{components}/ui/` (canvas); prefer it for new work, legacy `components/ui/` is being phased out - popover: now `apps/web/components/ui/popover.tsx`, migrating away from `apps/web/app/(alpha)/canvas/[id]/{components}/ui/popover.tsx` - tooltip: now `apps/web/components/ui/tooltip.tsx`, migrating away from `apps/web/app/(alpha)/canvas/[id]/{components}/ui/tooltip.tsx` - pinned to `apps/web/app/(alpha)/canvas/[id]/{components}/ui/` by owner directive (2026-02-20): icons, switch — code adoption lags, migration in progress ## Tokens (from code) - apps/web/app/globals.css: `--color-background: #f9fafb`, `--color-background: var(--tl-background-dark) !important`, `--color-background: var(--tl-background) !important`, `--background: 0 0% 100%`, `--foreground: 240 10% 3.9%`, `--card-foreground: 240 10% 3.9%`, `--popover-foreground: 240 10% 3.9%`, `--primary: 228 100% 50%`, `--primary-foreground: 0 0% 100%`, `--primary-gradient-start: 228 100% 50%`, `--primary-gradient-end: 228 100% 48%`, `--secondary-foreground: 240 5.9% 10%`, `--muted: 0 0% 92%`, `--tl-background: 0 0% 95.7%`, `--muted-foreground: 240 3.8% 46.1%`, `--accent: 240 4.8% 95.9%` ## Grammar (utility frequencies from code) - Typography: `text-sm`×1511, `text-xs`×1135, `text-[11px]`×395, `text-[10px]`×278 - Radii: `rounded-md`×800, `rounded-full`×618, `rounded-lg`×481, `rounded`×424 - Control heights: `h-4`×925, `h-7`×379, `h-8`×352, `h-3`×250 - Gaps/paddings: `gap-2`×1137, `px-2`×445, `gap-1.5`×427, `px-3`×396, `gap-1`×383 - Animation: `transition-colors`×707, `transition-all`×307, `duration-200`×275, `duration-150`×246 ## Key entities ### sonner (`apps/web/components/ui/sonner.tsx`, imports: 288) **Component**: `Toaster` wrapper around the `sonner` library's `Sonner` component, exported as a named export and marked `"use client"`. **Theming**: Reads `resolvedTheme` via `useTheme()` from `next-themes` and passes it as the `theme` prop (`"light" | "dark" | "system"`), so toasts automatically m - full spec: `.taste/facts/sonner.md` ### button (`apps/web/components/ui/button.tsx`, imports: 256) **Base styles**: `inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors`. Focus uses `outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-primary/70`; disabled state applies `disabled:opacity-50 disabled:pointer-ev - variants: variant(default|brand|destructive|outline|secondary|ghost|link), size(sm|default|lg|icon), defaultVariants(variant|size) - owner pattern (60 msgs): When the owner asks about buttons, he usually wants them styled and behaving consistently with existing reference buttons elsewhere in the app (submit button, sidebar, publish, agent onboarding), with proper hover/scale/loader animations — and he wants… - full ask-pattern: `.taste/topics/buttons.md` - full spec: `.taste/facts/button.md` ### icons (`apps/web/app/(alpha)/canvas/[id]/{components}/ui/icons.tsx`, imports: 104) **Icons component** — A collection of inline SVG icon React components (one named export per icon) for a Claude/Anthropic-style UI. **API/props**: Each icon accepts `IconProps = React.SVGProps & { className?: string }`, spread onto the root `` so consumers can override size, colo - user rule: Style icons consistently with the component style in the dialog preview - owner pattern (60 msgs): When the owner mentions icons he usually wants the RIGHT icon used (reusing existing ones from the codebase/sidebar/context menu, not invented ones), positioned/sized/colored correctly, and consistent with the rest of the UI. He often supplies exact SVGs and… - full ask-pattern: `.taste/topics/icons.md` - full spec: `.taste/facts/icons.md` ### input (`apps/web/components/ui/input.tsx`, imports: 107) **Element**: A `forwardRef` `
` with `inline-flex items-center`, rounded corners (`rounded-md`), `border`, padding `px-2 py-[1px]`, font size `text-[12px]`, and `transition-colors` for smooth color changes. **Variants** (via `class-variance-authority`, default = `default`): - variants: variant(default|secondary|destructive|outline), defaultVariants(variant) - full spec: `.taste/facts/badge.md` ### canvas-page-wrapper (`apps/web/app/(alpha)/canvas/{components}/canvas-page-wrapper.tsx`, imports: 73) **Layout**: Full-viewport wrapper using `h-svh` (svh height unit), `bg-tl-background` themed background, `overflow-hidden` to clip content; carries `data-canvas-page` attribute for targeting. **Inner container**: Nested `div` with `h-full flex flex-col relative overflow-hidden bg-tl-background` — es - full spec: `.taste/facts/canvas-page-wrapper.md` ### label (`apps/web/components/ui/label.tsx`, imports: 72) **Appearance**: Renders a `