Skip to content
➜cat gealo/design-system.md
DEPLOYED ·gealo.app
cd ../gealo
TIER_03

Design System

The product is not a brand. The interface answers questions, not vibes. Below covers register, surfaces, accent strategy, and the seven things Gealo refuses to be.

➜REGISTER--mode=product

Two registers exist: product and brand. Product is calm, precise, neutral. It is the surface where work happens for hours at a time. Brand is sharp and distinct. It appears in narrow doses for marketing, onboarding moments, and differentiation cues.

The interface is product by default. Brand appears as accents: a status dot, a CTA glow, a small label flourish. Never as a wash. The two registers do not compete. They share the surface.

➜SURFACE_LADDER--tiers=5

Five tiers, light and dark, sunken through to overlay. Light uses shadow for elevation. Dark uses lightness shift. Tokens shown here are illustrative. The production tokens live in Gealo's own design doc.

// light register

  • [01]sunkenoklch(96% 0.012 250)
  • [02]app shelloklch(98% 0.008 250)
  • [03]paneloklch(100% 0 0)
  • [04]elevatedoklch(100% 0 0) + shadow
  • [05]overlayoklch(100% 0 0) + shadow xl

// dark register

  • [01]sunkenoklch(20% 0.018 240)
  • [02]app shelloklch(22% 0.020 240)
  • [03]paneloklch(26% 0.022 240)
  • [04]elevatedoklch(30% 0.022 240)
  • [05]overlayoklch(34% 0.022 240)
➜ACCENT_STRATEGY--primary=charcoal --dark-accent=ice-blue

Light register uses a charcoal-near-black primary. The CTA, the focus ring, and the destructive confirmation all read with quiet authority. No saas-blue. No category reflex.

Dark register adds an ice-blue secondary at hue 232 with controlled chroma. It is used for narrow highlights such as a focused row, a status pulse, or a brand accent in a sidebar. Charcoal stays primary across both registers. Ice-blue is the dark-mode complement, not a swap.

➜TYPOGRAPHY
  • sans: Poppins, hierarchy through weight + scale
  • mono: JetBrains Mono, for IDs, counts, status, code
  • rule: one weight change per hierarchy step, not five
  • rule: mono earns its slot; never decorative
➜MOTION
  • duration: 150 to 250ms for state, 350ms ceiling
  • easing: cubic-bezier with a touch of overshoot for affordance
  • props: transform + opacity only, never layout
  • rule: prefers-reduced-motion drops to ~0ms
➜ANTI_SLOP--rules=7

A design system that names what it refuses does more editing than one that only names what it allows. The "no" list below is from Gealo's own design doc and is enforced on every interface change.

  1. ✕

    [01] No gradient text in product UI

    Reads as marketing. Gealo is a console, not a landing page hero.

  2. ✕

    [02] No side-stripe borders as a default decoration

    Stripes are for state changes: selected, focused, error. Not chrome.

  3. ✕

    [03] No glassmorphism by default

    Backdrop blur hides density. Density is the point.

  4. ✕

    [04] No hero-metric strip on first paint

    "5,432 users" theater. Real teams want the table, not the brag.

  5. ✕

    [05] No identical card grids

    A wall of cards is the lazy answer. Compose by hierarchy, not by repetition.

  6. ✕

    [06] A modal is never the first thought

    Inline first. Drawer second. Modal only when the action interrupts.

  7. ✕

    [07] No category-reflex palette

    Saas-blue is not a brand. Charcoal primary + ice-blue dark accent are deliberate choices.

prev: modulesnext: scale