name: luxe-pos-design
version: alpha
description: >
  A boutique point-of-sale interface set on a warm pearl paper (#F0EDE4) and
  drawn in deep midnight navy (#1A2A46), with brushed brass (#B2944A) as the
  single luxury voltage and a muted rose (#C87878) reserved for refunds and
  alerts. The signature move is liquid-glass: nearly every panel is a frosted,
  backdrop-blurred surface with inset top-light highlights and a soft brass/
  white refraction wash, floating over ambient blurred color blobs. The type
  story pairs Fraunces (an optical serif) for every heading and price headline
  with Inter for UI body and JetBrains Mono for SKUs, prices, and keypads.
  Geometry is generously rounded — 2xl/3xl glass cards and full-pill chips —
  and finished with couture details: hairline borders, a scalloped receipt
  edge, and a tape-paper texture.
colors:
  # Surface
  pearl: '#F0EDE4'        # page background (bg-pearl), inverted text on navy
  white: '#FFFFFF'        # product image plates, raw input fills (bg-white)
  # Brand / Voltage
  navy: '#1A2A46'         # primary brand ink, dark KPI tile, nav glyphs
  brass: '#B2944A'        # luxury accent: CTAs, active dots, hero bar, checks
  brass-hover: '#bf9f54'  # cta-brass:hover fill
  brass-deep: '#8e7538'   # brass gradient bottom, badge text on brass tint
  # Text
  ink: '#111018'          # near-black headings, prices, primary values (text-ink)
  # Semantic
  rose: '#C87878'         # refunds, discounts, offline/error states (text-rose)
  rose-deep: '#a86060'    # low-stock badge text
  # Hairlines
  hairline: '#d6d2c5'     # neutral 1px border (.hairline)
  brass-hairline: 'rgba(178,148,74,0.45)'  # brass-tinted 1px border
  navy-hairline: 'rgba(26,42,70,0.10)'     # rail/glass-dark border, dividers
  # Glass (translucent fills)
  glass-fill: 'rgba(255,255,255,0.42)'     # primary glass panel
  glass-card-fill: 'rgba(255,255,255,0.55)' # secondary glass card
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: 44px            # h1 'Point of Sale'; ranges 14px–68px headlines
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 13px            # default UI text; item names, labels
    fontWeight: 400
    lineHeight: 1.4
  mono:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 12px            # SKUs, prices, keypad, clock; tabular-nums
    fontWeight: 400
  eyebrow:
    fontFamily: "'Inter', sans-serif"
    fontSize: 10px            # uppercase section eyebrows / table heads
    fontWeight: 400
    letterSpacing: 0.24em
    textTransform: uppercase
rounded:
  sm: 4px       # kbd, ribbon swatch (rounded-sm)
  md: 12px      # rail buttons, inputs, image plates (rounded-xl)
  lg: 16px      # cart item rows, payment pads (rounded-2xl)
  xl: 24px      # glass panels, hero KPI tile (rounded-3xl)
  full: 9999px  # pills, chips, avatars, dots (rounded-full)
spacing:        # base unit 4px; common steps 4/8/12/16/20/28/40
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 28px
  xxl: 40px
components:
  glassPanel:
    backgroundColor: '{colors.glass-fill}'
    textColor: '{colors.ink}'
    rounded: '{rounded.xl}'
    padding: '24px'
    # backdrop-blur(22px) saturate(140%); inset top-light + 0 12px 40px navy shadow; brass refraction wash
  glassCard:
    backgroundColor: '{colors.glass-card-fill}'
    textColor: '{colors.ink}'
    rounded: '{rounded.lg}'
    padding: '16px'
    # backdrop-blur(14px); inset top highlight + 0 8px 24px navy shadow
  productCard:
    backgroundColor: '{colors.glass-card-fill}'
    textColor: '{colors.ink}'
    typography: '{typography.display}'
    rounded: '{rounded.lg}'
    padding: '12px'
    # 4:5 image plate; hover translateY(-3px) + 0 18px 40px navy shadow
  ctaBrass:
    backgroundColor: '{colors.brass}'
    textColor: '{colors.ink}'
    typography: '{typography.display}'
    rounded: '{rounded.lg}'
    padding: '0 24px'        # h-14 (56px) primary / h-12 (48px) secondary
    # hover -> brass-hover fill, translateY(-1px), brass glow shadow
  pillTab:
    backgroundColor: '{colors.navy}'   # active; inactive transparent
    textColor: '{colors.pearl}'        # active label
    typography: '{typography.body}'
    rounded: '{rounded.full}'
    padding: '0 16px'        # h-9 (36px)
  railItem:
    backgroundColor: 'transparent'
    textColor: '{colors.navy}'         # active full ink; idle navy/60
    rounded: '{rounded.md}'
    padding: '0'             # 48x48 square; active rail-dot = brass
  clientChip:
    backgroundColor: 'rgba(255,255,255,0.30)'
    textColor: '{colors.ink}'
    rounded: '{rounded.lg}'
    padding: '12px'
    # brass-hairline border
  input:
    backgroundColor: 'rgba(255,255,255,0.60)'
    textColor: '{colors.ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.md}'
    padding: '0 12px'        # h-10 (40px); hairline or brass-hairline border
  keypadKey:
    backgroundColor: '{colors.glass-card-fill}'
    textColor: '{colors.ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.md}'
    padding: '0'             # h-11 (44px)
  badge:
    backgroundColor: 'rgba(178,148,74,0.15)'  # brass tint; navy/rose tints vary
    textColor: '{colors.brass-deep}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.full}'
    padding: '4px 8px'
  heroKpiTile:
    backgroundColor: '{colors.navy}'
    textColor: '{colors.pearl}'
    typography: '{typography.mono}'
    rounded: '{rounded.xl}'
    padding: '28px'
    # blurred brass glow blob top-right; mini bar chart w/ brass top bar
motion:
  cartDropIn: 'cart items spring in on load: y [-30,0], opacity [0,1], stiffness 300 damping 25, staggered delay 0.15 + i*0.08 (motion.dev)'
  ctaHover: 'cta-brass hover spring lift y -2 (stiffness 400 damping 25); CSS also lifts translateY(-1px) + brass glow'
  prodCardHover: 'transform .3s + box-shadow .3s; translateY(-3px) on hover'
  pulseDot: 'live status dot @keyframes pulse 2.2s ease-in-out infinite (opacity 0.4->1, scale 1->1.35)'
  microTransitions: 'stepper/rail/ribbon hover background+color .15–.2s ease'
icons:
  library: Tabler Icons (webfont, ti)
  style: outline
  sizes: { xs: 12px, sm: 14px, md: 16px, lg: 20px, xl: 22px }
  color: '{colors.navy}'   # idle navy/60; ink when active; brass/rose for accent/alert

Luxe POS — Maison Lévrier

luxe-pos-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Luxe POS is a boutique point-of-sale dashboard for a fictional Parisian maison ("Maison Lévrier · Place Vendôme"). It lives on a warm pearl paper surface (#F0EDE4) and is drawn almost entirely in deep midnight navy (#1A2A46), with brushed brass (#B2944A) as the one luxury voltage — it powers the primary CTAs, the active-tab fill's counterpart accents, the live status dot, the hero bar in the sales chart, and every confirmation check. A muted rose (#C87878) is held in reserve strictly for the negative register: discounts, refunds, void, and the "terminal offline" warning. The signature visual move is liquid glass: the search bar, category rail, cart, checkout panels, and KPI cards are all frosted translucent surfaces (.glass, .glass-card) built from rgba(255,255,255,0.42– 0.55) with backdrop-filter: blur(14–22px), inset top-light highlights, and a .refraction overlay that washes a white-to-brass radial sheen across each panel. Beneath everything float three large blurred color blobs (rose, brass, navy at low opacity) for ambient depth. Typography is couture: Fraunces, an optical serif, sets every heading and big price (down to -0.02em tracking), Inter carries UI body text, and JetBrains Mono — tabular — handles SKUs, prices, the clock, and the numeric keypad. Geometry is soft and generous (rounded-2xl/3xl panels, full-pill chips and avatars), then dressed with maison details: thin hairline borders, a scalloped thermal-receipt edge, dashed receipt rules, and a tape-paper line texture.

Colors

Surface. The page is pearl #F0EDE4 (.bg-pearl); pearl also serves as the inverted text color on dark fills. Plain white #FFFFFF backs product image plates and the "raw" input fills (often at 60% opacity, bg-white/60).

Brand / Voltage. Navy #1A2A46 is the dominant ink — nav glyphs, the active pill tab fill, the hero KPI tile, table type, and tinted dividers (navy/8–12). Brass #B2944A is the single luxury accent: the .cta-brass button fill, active rail-dot, the hero chart's top bar (.bar-brass, gradient down to #8e7538), selection checks, the live pulse dot, and brass-tinted badges. Hover brass is #bf9f54; brass gradients and badge text deepen to #8e7538.

Text. Headings, prices, and primary values use near-black ink #111018 (.text-ink). Secondary/muted text is navy at reduced alpha (navy/40 … navy/70) rather than a separate gray.

Semantic. Rose #C87878 (.text-rose) marks every negative or alert state — clientèle discount, refunds, the Void button, "terminal offline," and the SMS "no number on file" warning; low-stock badge text deepens to #a86060.

Hairlines. Three hairline systems coexist: neutral #d6d2c5 (.hairline), brass rgba(178,148,74,0.45) (.brass-hairline) for premium/selected rows, and navy rgba(26,42,70,0.08–0.12) for table rules and panel dividers.

Glass. Translucent fills define the chrome: primary glass rgba(255,255,255,0.42), glass-card rgba(255,255,255,0.55), and a dark variant rgba(26,42,70,0.06).

Typography

Three families, all loaded from Google Fonts (Tabler is the icon webfont). Fraunces (@import …family=Fraunces:opsz,wght@9..144,300;400;500;600) is the display serif — optical sizing on, -0.02em tracking — used for every heading and the large price/total numerals. Inter (@import …family=Inter:wght@300;400;500;600) is the UI body face. JetBrains Mono (…family=JetBrains+Mono:wght@300;400;500) is the monospaced numeric face with tabular-nums / tnum for SKUs, prices, keypad keys, and the clock. No bespoke fonts — all three are open-source and load directly.

Token	Size	Weight	Line-height	Tracking	Usage
display	44px (14–68px range)	400	1	-0.02em	h1, panel titles, prices, hero KPI numeral
body	13px	400	1.4	normal	item names, labels, descriptions
mono	12px (10–32px range)	400	—	normal	SKUs, prices, keypad, clock, totals
eyebrow	10–11px	400	—	0.18–0.24em	uppercase section eyebrows, table heads, footer

Layout

Base spacing unit is 4px; common steps are 4 / 8 / 12 / 16 / 20 / 28 / 40px (Tailwind p-3 through p-7). The page is a full-height flex shell: a fixed 72px left icon rail (logo monogram, five primary actions, settings + avatar pinned to the bottom) beside a flex-1 main column padded px-10 py-7. Main is a vertical stack of sections. The top header is a baseline-aligned title + glass utility cluster (search, bell, clock). The hero work area is a 12-column grid (gap-7): an 8-column product zone (pill category tabs over a 3-column product card grid) and a 4-column sticky glass cart (min-height 720px). Below, a Checkout Flow section splits 12 columns into 4/5/3 glass panels (Giftwrap / Payment / Receipt). A Daily Summary section runs a KPI row (a 6-col dark hero tile + two 3-col glass stat cards) above a full-width glass Top-SKUs table. A hairline footer closes it. Whitespace is airy and editorial; the dark hero KPI tile is the only solid-fill block, deliberately anchoring the analytics zone against the otherwise translucent page.

Elevation & Depth

Depth is layered, not flat. Ambient .float-shine blobs (420–520px, blur(50px), ~0.10–0.18 opacity) sit behind everything. Panels are glass: .glass = blur(22px) saturate(140%), a white inset top-light (inset 0 1px 0 rgba(255,255,255,0.9)), a faint navy inset bottom, and a soft drop 0 12px 40px -12px rgba(26,42,70,0.18). .glass-card is lighter (blur(14px), 0 8px 24px -10px rgba(26,42,70,0.10)). .refraction adds a white→brass radial sheen pseudo-element on top. Hover deepens cards (0 18px 40px -16px navy) and the CTA gains a brass glow (0 10px 26px -10px rgba(178,148,74,0.6)). Borders/hairlines do most of the structural separation; true shadows are reserved for floating glass and hovers.

Shapes

Rounding is soft and consistent. Major glass panels and the hero tile are rounded-3xl (24px); cart rows, payment pads, and CTAs are rounded-2xl (16px); rail buttons, inputs, image plates, and keypad keys are rounded-xl (12px); the kbd chip and ribbon swatches are rounded-sm (4px). Pills are everywhere — category tabs, badges, status dots, avatars, and circular icon buttons all use rounded-full. The one bespoke shape is the scalloped receipt edge (.scallop-bottom, a CSS mask of 8px radial scallops) plus a dashed total rule, evoking torn thermal tape.

Components

• Glass panel (.glass.refraction) — rgba(255,255,255,0.42) fill, white inset highlight + navy drop shadow, rounded-3xl, p-6. Hosts cart, checkout panels, stat cards, table.
• Glass card (.glass-card) — lighter 0.55 fill, smaller shadow, rounded-2xl. Used for sub-tiles, sort/filter chips, keypad keys.
• Product card (.prod-card) — glass-card with a 4:5 white image plate, mono SKU, Fraunces name, mono price (e.g. "€18,400"), "In Stock · 3" pill; hovers up 3px.
• CTA brass (.cta-brass) — brass fill, ink text, Fraunces label ("Proceed to Checkout" h-14 / "Authorize €31,907.20" h-12), rounded-2xl; hover → #bf9f54 + brass glow + lift.
• Pill category tab — active = navy fill / pearl label; idle = transparent / navy/70, hover bg-white/40. Inside a glass pill container.
• Rail item — 48px square rounded-xl, Tabler glyph; idle navy/60, active full ink with a brass rail-dot; hover faint navy wash.
• Client chip — brass-hairline row on bg-white/30, avatar + name + "Edit" in brass eyebrow caps.
• Cart row — avatar/thumb, name + mono SKU, a glass-card pill stepper (− qty +), right-aligned mono price; hover bg-white/40.
• Input — bg-white/60, hairline or brass-hairline, rounded-xl h-10, mono text (card number "4242 8821 ····", "MM / YY", CVC, ZIP).
• Keypad key — glass-card rounded-xl h-11, mono numeral; backspace key in rose.
• Badge — pill with tinted fill + matching deep text: brass (Hero/Rising/"Or member"), navy (Steady), rose (Low Stock).
• Hero KPI tile — solid navy, pearl text, blurred brass glow blob, big mono "€184,520", 7-bar mini chart with a brass top bar, "▲ 18.4%" brass pill.
• Receipt tape — white/70 card with scalloped bottom, .tape line texture, mono line items, dashed total rule.

Motion

Powered by motion.dev (motion@12 ESM). On load, cart items spring-drop in (y: [-30,0], opacity: [0,1], stiffness 300 / damping 25, staggered 0.15 + i*0.08). .cta-brass gets a JS hover spring lift (y: -2, stiffness 400) layered over a CSS translateY(-1px) + brass glow. Product cards transition transform + shadow over .3s (lift 3px). A live status dot pulses via @keyframes pulse (2.2s, opacity 0.4→1, scale 1→1.35). Stepper, rail, and ribbon hovers are quick .15–.2s background/color eases. All durations are short and restrained — the only "playful" motion is the cart spring on entry.

Iconography

Tabler Icons as a webfont (ti ti-*), outline style throughout. Sizes run 12 / 14 / 16 / 20 / 22px. Default color is navy (idle glyphs navy/60, active ink); brass marks confirmation/premium (checks, gift, receipt, settings dot) and rose marks alerts (backspace, offline terminal, missing SMS). Icons are functional UI (rail nav, search, stepper ±, payment methods, delivery options) rather than decorative — the only "decorative" graphics are CSS swatches (striped brass ribbon, color chips) and the bar chart, not icons.

Do's and Don'ts

• Do keep brass as a scarce accent — CTAs, active states, confirmations, and premium tints only; let navy and pearl carry the bulk.
• Do reserve rose strictly for negatives (discounts, refunds, void, offline, errors). Never use it as a decorative color.
• Do build panels as glass + refraction over the ambient blobs; preserve the inset top-light highlight that makes the glass read.
• Do set every heading and large price in Fraunces, and every SKU/number in tabular JetBrains Mono.
• Don't introduce opaque gray panels or hard borders where glass + hairlines belong — it flattens the depth.
• Don't add new hues; the palette is pearl / navy / brass / ink / rose plus their tints only.
• Don't square off the geometry or drop the maison details (scalloped receipt, hairlines, tape texture) — they carry the boutique character.

Known Gaps

• All hex values are read directly from class rules and inline styles; muted text shades like navy/40–70 are alpha variants of #1A2A46, not distinct tokens.
• Display fontSize is the h1 value (44px); actual headlines span 14px (panel sub-labels) to 68px (hero KPI numeral) — captured as a range in the table.
• The glass appearance depends on backdrop-filter; rendered look varies by browser support. Exact perceived blur/saturation values are taken from the CSS, not from a screenshot.
• Spacing scale is inferred from the Tailwind utility classes used (4px base); not every step is exercised in the markup.