Design foundations

Choose a control size

Many controls share three sizes. Medium is the default for everyday forms. Small keeps dense interfaces comfortable; large gives important actions more room. Check each component page for its supported sizes.

<script setup lang="ts">
import Button from './components/ui/button/Button.vue'
</script>

<template>
  <Button size="sm">Compact</Button>
  <Button size="md">Default</Button>
  <Button size="lg">Prominent</Button>
</template>

Icon buttons keep a compact visual footprint while their whole control responds to clicks. Menu and picker options use the full row as the target. On touch-heavy screens, choose a roomier size and leave space between nearby actions.

Spacing that works together

Controls follow a 4px spacing rhythm. The values below show the default horizontal padding for common parts, so fields and actions line up when you compose them. Cards use the same scale for their inner space.

Menus and lists use roomy rows, while calendars keep their grid alignment. These are starting points: your copied component source can be adjusted when your layout needs a different density.

Colors, corners, and depth

Components use semantic CSS variables, so one theme change can update every matching surface. Neutral borders stay quiet; focus, selection, validation, and status colors remain distinct in light and dark themes.

/* Add after importing weini-theme.css. */
:root {
  --radius: 16px;
  --border: oklch(0.86 0.01 260);
  --elevation-popover: 0 16px 40px oklch(0 0 0 / 0.12);
}

See Theming for the full palette and light and dark overrides.

Interaction and accessibility