Impulse Kiosk

About Impulse Kiosk

Overview

Impulse Kiosk is for online shops that want to look deliberate rather than polished. Product pages are built from 2px borders, 0px corners and heavy Epilogue headlines, so the product photo and the primary action carry the weight. Every surface is either a warm neutral slab (background, card, muted) or a single violet primary block. No gradients, blur or decorative fills are used.

Color

One action color, Orchid (brand, hue about 288), is used for the primary button, selected states and the focus ring. In light mode, primary is brand.600 (#7340c9), which gives 6.4:1 with white text and 5.9:1 against the background. In dark mode, primary is brand.400 (#a67ef0), which gives 5.9:1 with brand.950 text. Neutrals are a warm grey-beige ramp that runs from #faf7f2 to #15130f, so high contrast does not feel clinical. Destructive uses a crimson danger ramp held at one hue from 50 to 950, so the mid-steps do not drift toward orange. The ramp is far from violet in hue: danger.600 is used in light mode (6.9:1 with white) and danger.400 in dark mode (5.7:1 with danger.950). Success is a mid green and warning is a mustard amber. Both share the warm undertone of the neutral ramp and are used only for stock and shipping status.

Typography

The type scale uses a √2 ratio (about 1.414) from a 16px body: 16, 22, 32, 45 and 64. Epilogue sets display-lg (64/1.0, 800, -0.035em), display-md (45/1.05, 800, -0.03em) and heading-lg (32/1.1, 700, -0.02em). Karla 700 takes over from heading-md (22px) downward, and Karla 400 sets body text at 1.5 line height (1.55 for body-lg). Label (14px) and caption (12px) are set in Karla 700 with +0.04em and +0.05em tracking for short uppercase strings. IBM Plex Mono 400 and 500 are reserved for SKUs, order numbers, dimensions and spec tables.

Layout

Comfortable density on a 4px base grid (space.1 = 4px). Product grids use 24px gutters (space.6) so each item reads as a separate block. Content columns cap at 1280px. Buttons and inputs are 44px tall to meet touch-target size on mobile checkout.

Elevation

Shadows are hard and offset with zero blur, drawn in neutral.950: shadow.sm is 2px, shadow.md 4px and shadow.lg 8px. Cards use shadow.md together with a 2px border. Popovers and dialogs use shadow.lg so layering is obvious. In dark mode the neutral.950 shadow disappears into the background, so the neutral.600 border (3.3:1 against the background) and the card step from neutral.950 to neutral.900 carry the edge instead.

Shapes

Buttons, inputs and cards use 0px radius (radius.none). Badges use radius.sm (2px). Nothing in the system uses radius.full, because pill shapes would soften the brutalist look.

Do

• Use the primary token for exactly one main action per view, such as Add to bag or Checkout. Render every other action as secondary or as an outline with a 2px border.
• Give every card and button a 2px border in the border token. Use shadow.md on cards and shadow.lg on popovers and dialogs.
• In dark mode, rely on the neutral.600 border and the step from background to card (neutral.950 to neutral.900) to show edges, because the neutral.950 shadow is not visible there.
• Set SKUs and order numbers in IBM Plex Mono 400 at the code style (14px). Set prices in Karla with tabular figures, right-aligned in cart tables.
• Use Epilogue only at heading-lg (32px) and larger, for product titles and section headers. Switch to Karla 700 at heading-md (22px) and below.
• Pair every status color with a text label, for example a success badge reading 'In stock' or a warning badge reading 'Low stock'.
• Keep interactive targets at least 44px tall, matching the button and input heights, and show focus as a 2px ring in the ring token.

Don’t

• Don't use primary or brand colors for errors, out-of-stock states or removals. Use destructive (danger.600 in light, danger.400 in dark) for those.
• Don't apply any radius to buttons, inputs or cards; they stay at radius.none (0px). Only badges may use radius.sm (2px).
• Don't add blur to shadows. Use only shadow.sm, shadow.md and shadow.lg.
• Don't use pure #000000 or cool greys for text, borders or shadows. Pull them from the warm neutral ramp.
• Don't set product descriptions or other body copy in IBM Plex Mono. Reserve it for codes, SKUs and spec values.
• Don't place multi-line body text on the accent surface (brand.100 in light, brand.900 in dark). Use accent only for selected rows and short highlights.