Collekton UI System

Design system and component library for art inventory management. Built with HTMX and Alpine.js for dynamic, server-driven interfaces.

Color Palette

Design tokens for the Collekton color system

Primary

100

300

500

700

900

Accent (Gold)

100

300

500

700

900

Semantic

Success

Warning

Error

Info

Typography

Font families, sizes, and text styles

Headings (Cormorant Garamond)

Heading 1 - Gallery Exhibition

Heading 2 - Artist Collection

Heading 3 - Artwork Details

Heading 4 - Price Information

Heading 5 - Provenance

Heading 6 - Condition Report

Display Text

Display 1

Display 2

Body Text (DM Sans)

Lead paragraph for introductory text that needs more emphasis.

Regular body text for standard content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Small muted text for secondary information and metadata.

Artwork Text Styles

Pablo Picasso

Les Demoiselles d'Avignon

1907

Oil on canvas

243.9 × 233.7 cm

USD179,000,000

Links

Default Link Subtle Link Underlined Link

Code (JetBrains Mono)

Inline code snippet in text.

// API response
{
  "artwork_id": "AWK-2024-001",
  "title": "Starry Night",
  "artist": "Vincent van Gogh"
}

Forms & Inputs

Form elements with validation states and HTMX integration

Text Inputs

Input Sizes & Groups

Select & Textarea

Checkboxes & Radios

Availability

Available for sale Available for loan On exhibition

Condition

Excellent Good Fair

Featured Show on homepage

Buttons

File Upload

Click to upload artwork images PNG, JPG up to 10MB

HTMX Loading States

Simulated HTMX Request

Click button to see loading state

Components

Reusable UI patterns for the Collekton platform

Badges

Default Primary Available On Loan Sold New

In Stock Pending Reserved

Avatars

XS SM MD LG XL

A B C +3

Alerts

Information

New artwork import feature is now available.

Artwork successfully added to inventory.

Insurance certificate expires in 30 days.

Failed to sync with external database.

Cards

Collection Overview

This is a standard card component with header, body, and footer sections.

Last updated 2 hours ago

Artwork Card

Georgia O'Keeffe

Jimson Weed/White Flower No. 1

1932 • Oil on canvas

$44,405,000

Stat Cards

Total Artworks

1,284

↑ 12% from last month

Total Value

$4.2M

↓ 3% from last month

Tabs

Artwork details and specifications would appear here.

Ownership history and provenance information.

Exhibition history and display records.

Related documents, certificates, and media.

Accordion

Artwork is in excellent condition. No visible damage or restoration.

Covered under policy #INS-2024-0892 with $5M coverage.

Currently located in Storage Vault A, Rack 12.

Progress

Cataloging Progress 75%

Loading States

Pagination

Breadcrumbs

Dropdown

Modal

Toasts

Data Tables

Tables for displaying artwork, sales, and inventory data

Inventory Table

Artwork	Artist	Category	Status	Value
Water Lilies 1906 • Oil on canvas	Claude Monet	Painting	Available	$84,687,500
The Persistence of Memory 1931 • Oil on canvas	Salvador Dalí	Painting	On Loan	$125,000,000
Girl with a Pearl Earring 1665 • Oil on canvas	Johannes Vermeer	Painting	Sold	$30,000,000

Showing 1-3 of 1,284 artworks

Empty State

No artworks found

Get started by adding your first artwork to the inventory.

Compact Table

ID	Event	Date	User
`LOG-001`	Artwork viewed	Jan 9, 2026	admin
`LOG-002`	Price updated	Jan 9, 2026	curator
`LOG-003`	Location changed	Jan 8, 2026	admin
`LOG-004`	Document uploaded	Jan 8, 2026	registrar

Admin Layout

Complete admin interface layout with sidebar navigation

Dashboard

Welcome back! Here's an overview of your collection.