source

---
name: Core
description: >-
  The harmonized base kit every Agentik app extends. Defines a 3-step radius
  ladder, semantic colors, a 4-step type ramp, and the spacing/shadow scales
  every primitive in @agstudio/ui-core consumes. App-specific kits (guilde,
  katchy, simone) layer on top via extends and override only what they need to.
colors:
  # ── Surfaces (depth ladder, dark default) ──
  background: "#0A0A0A"
  surface: "#171717"
  surface-raised: "#262626"
  scrim: "rgba(0, 0, 0, 0.6)"
  # ── Text (contrast ladder) ──
  ink: "#FAFAFA"
  ink-muted: "#A1A1AA"
  ink-faint: "#71717A"
  # ── Accents (neutral by default; apps override) ──
  accent: "#3B82F6"
  accent-fg: "#FFFFFF"
  # ── Borders ──
  border: "rgba(255, 255, 255, 0.10)"
  border-strong: "rgba(255, 255, 255, 0.18)"
  # ── Semantic ──
  success: "#10B981"
  success-fg: "#FFFFFF"
  warning: "#F59E0B"
  warning-fg: "#1A1A1A"
  danger: "#EF4444"
  danger-fg: "#FFFFFF"
  info: "#3B82F6"
  info-fg: "#FFFFFF"
typography:
  body:
    family: "ui-sans-serif, system-ui, sans-serif"
    size: "14px"
    weight: 400
    lineHeight: 1.55
  caption:
    family: "ui-sans-serif, system-ui, sans-serif"
    size: "12px"
    weight: 400
    lineHeight: 1.45
  micro:
    family: "ui-sans-serif, system-ui, sans-serif"
    size: "11px"
    weight: 500
    lineHeight: 1.4
  mono:
    family: "ui-monospace, SFMono-Regular, Menlo, monospace"
    size: "0.85em"
  h1:
    family: "ui-sans-serif, system-ui, sans-serif"
    size: "1.75rem"
    weight: 700
    lineHeight: 1.2
  h2:
    family: "ui-sans-serif, system-ui, sans-serif"
    size: "1.35rem"
    weight: 700
    lineHeight: 1.25
  h3:
    family: "ui-sans-serif, system-ui, sans-serif"
    size: "1.1rem"
    weight: 600
    lineHeight: 1.3
spacing:
  # ── 4pt scale ──
  xs: "0.25rem"
  sm: "0.5rem"
  md: "0.75rem"
  lg: "1rem"
  xl: "1.5rem"
  xxl: "2rem"
  # ── Semantic aliases (consume above) ──
  inset-tight: "{spacing.sm}"
  inset: "{spacing.md}"
  inset-lg: "{spacing.lg}"
  stack-sm: "{spacing.sm}"
  stack: "{spacing.md}"
  stack-lg: "{spacing.lg}"
  inline-sm: "{spacing.xs}"
  inline: "{spacing.sm}"
rounded:
  # ── 3-step ladder. Apps MUST NOT introduce a 4th step. ──
  sm: "4px"
  md: "8px"
  lg: "12px"
  full: "9999px"
shadows:
  sm: "0 1px 2px rgba(0, 0, 0, 0.3)"
  md: "0 6px 20px rgba(0, 0, 0, 0.35)"
  lg: "0 16px 48px rgba(0, 0, 0, 0.5)"
motion:
  duration-fast: "120ms"
  duration: "200ms"
  duration-slow: "320ms"
  ease: "cubic-bezier(0.4, 0, 0.2, 1)"
  ease-out: "cubic-bezier(0, 0, 0.2, 1)"
components:
  # ── Button: solid primary action ──
  button-solid-primary:
    background: "{colors.accent}"
    color: "{colors.accent-fg}"
    border: "1px solid {colors.accent}"
    radius: "{rounded.md}"
    padding: "0.4rem 0.9rem"
  button-solid-danger:
    background: "{colors.danger}"
    color: "{colors.danger-fg}"
    border: "1px solid {colors.danger}"
    radius: "{rounded.md}"
    padding: "0.4rem 0.9rem"
  # ── Button: outline secondary ──
  button-outline-neutral:
    background: "transparent"
    color: "{colors.ink}"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "0.4rem 0.9rem"
  # ── Button: ghost (no border, hover background) ──
  button-ghost-neutral:
    background: "transparent"
    color: "{colors.ink}"
    border: "1px solid transparent"
    radius: "{rounded.md}"
    padding: "0.4rem 0.9rem"
  # ── Card: default surface container ──
  card:
    background: "{colors.surface}"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "{spacing.lg}"
  # ── Input: text field ──
  input:
    background: "{colors.surface}"
    color: "{colors.ink}"
    border: "1px solid {colors.border}"
    radius: "{rounded.md}"
    padding: "0.4rem 0.65rem"
  # ── Badge: status chips ──
  badge-soft-neutral:
    background: "{colors.surface-raised}"
    color: "{colors.ink-muted}"
    border: "1px solid {colors.border}"
    radius: "{rounded.full}"
    padding: "0.15rem 0.5rem"
  # ── Chip: interactive filter pill (Badge + button semantics) ──
  # Resting state shares the Badge soft/outline ladder; the active
  # state collapses every tone into one accent-soft treatment so the
  # selected filter reads as a single signal regardless of resting tone.
  chip-outline-neutral:
    background: "transparent"
    color: "{colors.ink-muted}"
    border: "1px solid {colors.border}"
    radius: "{rounded.full}"
    padding: "0.15rem 0.5rem"
  chip-active:
    background: "color-mix(in srgb, {colors.accent} 10%, transparent)"
    color: "{colors.accent}"
    border: "1px solid color-mix(in srgb, {colors.accent} 50%, transparent)"
    radius: "{rounded.full}"
    padding: "0.15rem 0.5rem"
---

## Overview

Core is the harmonized base kit every Agentik app extends. It defines the design
primitives — three radii, one spacing scale, four text ramps plus three
headings, semantic colors — that the `@agstudio/ui-core` React primitive package
consumes through CSS custom properties.

Core is **deliberately neutral**: a blue accent on near-black surfaces. Apps
override on top via `extends: core`:

- `guilde` adds Slack-flavoured terracotta accent, deep-slate surfaces, Inter
  UI, and the legacy Slack workspace tokens (`sidebar`, `chat-green`, …).
- `katchy` (TBD) overlays its content-creation brand.
- `simone` (TBD) overlays its companion brand.

## Atmosphere

Quiet, functional, work-mode. Surfaces are dark, ink is high-contrast white, the
accent does the heavy lifting for emphasis. Nothing decorative — every token
earns its place by being referenced from at least one primitive.

## Layout

The radius ladder is **three steps only** — `sm` for chips and inline pills,
`md` for buttons / inputs / cards, `lg` for elevated surfaces (modals,
popovers). Apps and consumers MUST NOT introduce a fourth step; if a 4th feels
needed, that's a design-system conversation, not a one-off override.

The spacing scale matches Tailwind's 4-pt grid (`xs` 4px, `sm` 8px, `md` 12px,
`lg` 16px, `xl` 24px, `xxl` 32px) plus semantic aliases (`inset`, `stack`,
`inline`) that primitives reach for so a future scale tweak only touches one
place.

## Notes

- The `accent` color is intentionally a saturated blue (`#3B82F6`). Apps
  override it — `guilde` to terracotta, `katchy` likely to a content-creation
  hue. The fact that `accent` is a single token (no `accent-soft`, `accent-2`,
  …) is a deliberate constraint: brand accent is one color; if you need a soft
  variant, mix with `color-mix(in srgb, var(--color-accent) X%, transparent)` at
  the call site.
- `mono` slot uses `0.85em` (relative) deliberately so inline `<code>` keeps
  proportional to surrounding text without per-context overrides.
- Components named `button-{variant}-{tone}` follow the CVA naming convention
  the primitives use (`<Button variant="solid" tone="primary">`). Adding a new
  variant/tone combination is a 2-step change: token here + branch in
  `button.tsx`.