Skip to content

Interface

Every value on this page is the one the Qaf web app uses.

Colors

Light grays lean toward zinc; dark grays are neutral. Upgrade is Pro blue in both modes, reserved for Qaf Pro and gift promotions.

  • background
  • foreground
  • muted
  • muted-foreground
  • border
  • primary
  • destructive
  • success
  • warning
  • upgrade
  • background
  • foreground
  • muted
  • muted-foreground
  • border
  • primary
  • destructive
  • success
  • warning
  • upgrade

Radius

Every radius steps from an 8px base. The scale replaces Tailwind’s defaults, so 3xl is 20px and 4xl is 24px.

  • sm

    4px

  • md

    6px

  • lg

    8px

  • xl

    12px

  • 2xl

    16px

  • 3xl

    20px

  • 4xl

    24px

  • 5xl

    32px

Controls
Buttons and inputs use 3xl, a full pill at 32–40px tall. Menus and tooltips use it too; small buttons use md.
Surfaces
Cards use xl. Dialogs, badges and user messages use 4xl.
Composer
The composer, alert dialogs and toasts use 5xl. The composer drops to 4xl when its text wraps.
Small parts
Checkboxes and keyboard keys use sm; skeletons and tab triggers use md.

Controls

Buttons

Size
32px tall, or 36px and 40px for larger buttons. Text is 14px medium; icons are 16px.
Sheen
Primary, upgrade and danger buttons carry a 10% white gradient from the top and a faint two-layer shadow. In dark mode the primary’s gradient becomes a 10% shade at the bottom.
Hover
Filled buttons fade to 90%. Outline and ghost buttons take a gray fill.
Focus
Keyboard focus adds a 3px ring at half the foreground color.

Composer

Shape
A pill with a 32px radius, a 1px border, a white fill (#171717 in dark) and a faint shadow.
Buttons
36px and round, with 20px icons. The mic shows while the field is empty; send replaces it once there is text.
Text
16px. The placeholder reads “Ask Qaf” in muted-foreground.

Icons

Lucide only, at a 1.5 stroke. Icons are 16px in buttons, menus and message actions, and 20px in the composer.

  • message-circle-plus

  • search

  • ticket

  • globe

  • copy

  • share

  • refresh-ccw

  • volume-2

  • ellipsis

  • plus

  • mic

  • arrow-up

Motion

Panels, drawers and the composer move on one curve.

Side panels take 300ms; the composer changes shape in 200ms.
Menus and dialogs
Fade and zoom in from 95% over 100ms.
Press
Buttons scale to 0.97 while pressed.
Reduced motion
When it’s on, movement becomes an instant change or a fade.