Drukksiazek design system

Visual audit of storefront components and tokens

A broad visual audit of local shadcn components, typography, colors, fields, and interaction states used by the active Drukksiazek storefront.

Preview route

/design-system

This page is noindex and loaded through the storefront mockup contract.

Scope

UI component inventory

accordion.tsxdemo
alert-dialog.tsxdemo
alert.tsxdemo
badge.tsxdemo
breadcrumb.tsxdemo
button.tsxdemo
calendar-button.tsxlisted
calendar.tsxdemo
carousel.tsxdemo
checkbox.tsxdemo
collapsible.tsxdemo
command.tsxdemo
dialog.tsxdemo
field.tsxdemo
form-errors.tsxdemo
input-group.tsxdemo
input.tsxdemo
label.tsxdemo
navigation-menu.tsxdemo
nip-input.tsxdemo
number-input.tsxdemo
pagination.tsxdemo
phone-input.tsxdemo
popover.tsxdemo
product-attributes.tsxlisted
product-image.tsxlisted
progress.tsxdemo
radio-group.tsxdemo
scroll-area.tsxdemo
select.tsxdemo
shared-variant-overrides.tslisted
sheet.tsxdemo
skeleton.tsxdemo
sonner.tsxdemo
spinner.tsxdemo
stepper.tsxdemo
switch.tsxdemo
table.tsxdemo
tabs.tsxdemo
textarea.tsxdemo

Typography

Fonts and typography

Font family

Geist

--font-brand-sans

Fallback font-family

Geist, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif

typography-h1

Aa book printing

80 / 96 / 500

typography-h2

Aa book printing

56 / 72 / 500

typography-h2-sm

Aa book printing

48 / 64 / 500

typography-h3

Aa book printing

32 / 44 / 500

typography-h4

Aa book printing

28 / 40 / 500

typography-h5

Aa book printing

24 / 36 / 500

typography-body

Aa book printing

18 / 32 / 500

typography-body-sm

Aa book printing

16 / 28 / 500

typography-body-xs

Aa book printing

14 / 24 / 500

typography-button-lg

Aa book printing

20 / 20 / 500

typography-button

Aa book printing

18 / 18 / 500

typography-caption

Aa book printing

16 / 24 / 500

typography-tagline

Aa book printing

18 / 28 / 500 / 3px

Tokens

Colors

blue

25

blue-25

--color-blue-25resolving
50

blue-50

--color-blue-50resolving
100

blue-100

--color-blue-100resolving
200

blue-200

--color-blue-200resolving
300

blue-300

--color-blue-300resolving
400

blue-400

--color-blue-400resolving
500

blue-500

--color-blue-500resolving
600

blue-600

--color-blue-600resolving
700

blue-700

--color-blue-700resolving
800

blue-800

--color-blue-800resolving
900

blue-900

--color-blue-900resolving
950

blue-950

--color-blue-950resolving

gray

25

gray-25

--color-gray-25resolving
50

gray-50

--color-gray-50resolving
100

gray-100

--color-gray-100resolving
200

gray-200

--color-gray-200resolving
300

gray-300

--color-gray-300resolving
400

gray-400

--color-gray-400resolving
500

gray-500

--color-gray-500resolving
600

gray-600

--color-gray-600resolving
700

gray-700

--color-gray-700resolving
800

gray-800

--color-gray-800resolving
900

gray-900

--color-gray-900resolving
950

gray-950

--color-gray-950resolving

Semantic tokens

text

primary

--color-text-primaryresolving

secondary

--color-text-secondaryresolving

tertiary

--color-text-tertiaryresolving

quaternary

--color-text-quaternaryresolving

white

--color-text-whiteresolving

disabled

--color-text-disabledresolving

placeholder

--color-text-placeholderresolving

error

--color-text-errorresolving

warning

--color-text-warningresolving

success

--color-text-successresolving

inactive

--color-text-inactiveresolving

background

primary

--color-bg-primaryresolving

secondary

--color-bg-secondaryresolving

tertiary

--color-bg-tertiaryresolving

quaternary

--color-bg-quaternaryresolving

active

--color-bg-activeresolving

disabled

--color-bg-disabledresolving

disabled-subtle

--color-bg-disabled-subtleresolving

error-primary

--color-bg-error-primaryresolving

warning-primary

--color-bg-warning-primaryresolving

success-primary

--color-bg-success-primaryresolving

border

primary

--color-border-primaryresolving

secondary

--color-border-secondaryresolving

tertiary

--color-border-tertiaryresolving

disabled

--color-border-disabledresolving

disabled-subtle

--color-border-disabled-subtleresolving

error

--color-border-errorresolving

error-subtle

--color-border-error-subtleresolving

icon

primary

--color-icon-primaryresolving

secondary

--color-icon-secondaryresolving

tertiary

--color-icon-tertiaryresolving

quaternary

--color-icon-quaternaryresolving

white

--color-icon-whiteresolving

disabled

--color-icon-disabledresolving

error

--color-icon-errorresolving

warning

--color-icon-warningresolving

success

--color-icon-successresolving

shadcn

background

--color-backgroundresolving

foreground

--color-foregroundresolving

card

--color-cardresolving

popover

--color-popoverresolving

primary

--color-primaryresolving

secondary

--color-secondaryresolving

muted

--color-mutedresolving

accent

--color-accentresolving

destructive

--color-destructiveresolving

border

--color-borderresolving

input

--color-inputresolving

ring

--color-ringresolving

Spacing

--spacing-cxs
0.25remresolving
--spacing-csm
0.5remresolving
--spacing-cmd
0.625remresolving
--spacing-clg
0.75remresolving
--spacing-cxl
1remresolving
--spacing-c2xl
1.25remresolving
--spacing-c3xl
1.5remresolving
--spacing-c4xl
2remresolving
--spacing-c5xl
2.5remresolving
--spacing-c6xl
3remresolving
--spacing-c7xl
4remresolving
--spacing-c8xl
5remresolving
--spacing-c9xl
6remresolving
--spacing-c10xl
8remresolving
--spacing-c11xl
10remresolving

Actions

Buttons and states

Buttons and states

Variant
Normal
Active
Disabled
Loading
default
primary
secondaryDark
secondaryWhite
iconPrimary
iconSecondary
iconBlock
linkDefault
linkReversed
linkBrandedSmall
linkMenu

Form controls

Inputs and controls

Inputs and controls

Helper text and field spacing.

Helper text and field spacing.

mm
Choice controls

Field description stays readable under the label.

Active state uses the blue token.

UI

Shadcn components

Feedback

defaultsecondaryoutlinesuccesswarningerror

Table

Example component table.
ComponentStateOwner
button.tsxReadydrukksiazek
input.tsxSelecteddrukksiazek
field.tsxReviewdrukksiazek

Navigation

Colors, typography, and spacing from globals.css.

Layers

Accordion

This section shows default behavior, active state, and contrast against Drukksiazek tokens.

Collapsible content uses the same spacing rhythm and type scale as the other panels.

Carousel

1
2
3

Calendar

June 2026

Skeleton and spinner

Loading component

Stepper

  1. 2
  2. 3
  3. 4
  4. 5

Scroll area

Scrollable area row 1

Scrollable area row 2

Scrollable area row 3

Scrollable area row 4

Scrollable area row 5

Scrollable area row 6

Scrollable area row 7

Scrollable area row 8

Scrollable area row 9

Scrollable area row 10

Scrollable area row 11

Scrollable area row 12