link,[object Object]
ACQM Docs

Appearance

UI Style Guide ​

Overview ​

AcqMarketplace uses shadcn/ui components built on Radix primitives with Tailwind CSS for styling. This guide covers component patterns, design tokens, and best practices.

Design System ​

Color Tokens (HSL Format) ​

css
/* Primary Colors */
--primary: 221 83% 53%;
--primary-foreground: 210 40% 98%;

/* Secondary Colors */
--secondary: 210 40% 96%;
--secondary-foreground: 222.2 84% 4.9%;

/* Semantic Colors */
--destructive: 0 84% 60%;
--success: 142 76% 36%;
--warning: 48 96% 53%;

Design Tokens (Reference) ​

TokenValue
gray-50#F5F7FA
gray-100#EEF1F6
gray-200#E0E5EB
gray-300#CAD0D9
gray-400#9CA3AF
gray-500#6C727F
gray-600#4E5562
gray-700#333D4C
gray-800#1D2735
gray-900#111827
gray-950#030712
primary#DB5151
danger#F03D3D
success#33B36B
warning#FC9231
info#3D7A81

Typography Scale ​

  • Headings: font-sans with font-semibold
  • Body: text-sm or text-base
  • Captions: text-xs with text-muted-foreground

Component Patterns ​

Form Components ​

typescript
// Standard form pattern
<Form {...form}>
  <FormField
    control={form.control}
    name="fieldName"
    render={({ field }) => (
      <FormItem>
        <FormLabel>Field Label</FormLabel>
        <FormControl>
          <Input placeholder="Enter value..." {...field} />
        </FormControl>
        <FormMessage />
      </FormItem>
    )}
  />
</Form>

Table Components ​

typescript
// Data table pattern
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Column 1</TableHead>
      <TableHead>Column 2</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {data.map((item) => (
      <TableRow key={item.id}>
        <TableCell>{item.name}</TableCell>
        <TableCell>{item.value}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>
typescript
<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Description text</DialogDescription>
    </DialogHeader>
    {/* Content */}
    <DialogFooter>
      <Button type="submit">Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Button Variants ​

  • default: Primary actions
  • secondary: Secondary actions
  • outline: Tertiary actions
  • ghost: Minimal actions
  • destructive: Delete/remove actions

See visuals: UI Assets → Buttons

Responsive Design ​

  • Mobile-first approach with Tailwind breakpoints
  • sm: (640px+), md: (768px+), lg: (1024px+), xl: (1280px+)

More visuals:

Related: Badge System · Accessibility Guide · UI Assets Gallery · UI Wireframes