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

blue-25

--color-blue-25resolving

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

gray-25

--color-gray-25resolving

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

Variant

Normal

Active

Disabled

default

primary

secondaryDark

secondaryWhite

iconPrimary

iconSecondary

iconBlock

linkDefault

linkReversed

linkBrandedSmall

linkMenu

Form controls

Inputs and controls

Default input

Helper text and field spacing.

Input with value

Hover input

Focus

Invalid

Enter a valid value.

Disabled

Disabled with helper

Helper text and field spacing.

Textarea

Input with unit

Number input

Phone input

NIP input

Select

LabelStandalone label

Choice controls

Checked checkbox

Field description stays readable under the label.

Invalid

This field requires confirmation.

Switch

Active state uses the blue token.

Example form error displayed below the field section.

Shadcn components

Feedback

defaultsecondaryoutlinesuccesswarningerror

Helpful information for the user.

Operation completed successfully.

Warning before continuing.

Blocking error before the action can continue.

Table

Example component table.
Component	State	Owner
button.tsx	Ready	drukksiazek
input.tsx	Selected	drukksiazek
field.tsx	Review	drukksiazek

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

Calendar

June 2026

Skeleton and spinner

Loading component

Stepper

Wgrywanie plików
2
Metoda dostawy
3
Termin realizacji i faktura
4
Metoda płatności
5
Podsumowanie zamówienia

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

Su	Mo	Tu	We	Th	Fr	Sa

Visual audit of storefront components and tokens

UI component inventory

Fonts and typography

Font family

shared-ds-* contract

ds-* compatibility layer

Colors

blue

gray

Semantic tokens

text

background

border

icon

shadcn

Spacing

Buttons and states

Buttons and states

Inputs and controls

Inputs and controls

Shadcn components

Feedback

Table

Navigation

Layers

Accordion

Component states

Catalogue data

Carousel

Calendar

Skeleton and spinner

Stepper

Scroll area