Shopping Cart

Wrap dress

Midi Wrap Dress

Size: M · Color: Sage

$112

Linen shirt

Linen Blend Shirt

Size: S · Color: White

$136

Leather sandals

Leather Sandals

Size: 8 · Color: Tan

$95

← Continue Shopping

Order Summary

Subtotal$343

ShippingFree

Tax$27

Total$370

Free shipping applied

Secure SSL Checkout

Theme Config

Edit the CSS custom properties below and click Apply to see changes live. Copy the config to use in your own project.

:root {
  /* Colors — vibrant blue, trust-building */
  --background: 0 0% 99%;
  --foreground: 220 15% 10%;
  --card: 0 0% 100%;
  --card-foreground: 220 15% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 15% 10%;
  --primary: 220 80% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 220 10% 96%;
  --secondary-foreground: 220 10% 40%;
  --accent: 220 40% 94%;
  --accent-foreground: 220 80% 40%;
  --muted: 220 10% 96%;
  --muted-foreground: 220 8% 46%;
  --destructive: 0 80% 50%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 65% 38%;
  --success-foreground: 0 0% 100%;
  --warning: 38 90% 50%;
  --warning-foreground: 220 15% 10%;
  --border: 220 10% 91%;
  --input: 220 10% 91%;
  --ring: 220 80% 50%;
  --chart-1: 220 80% 50%;
  --chart-2: 160 60% 42%;
  --chart-3: 38 90% 50%;
  --chart-4: 340 60% 52%;
  --chart-5: 280 50% 50%;

/* Sidebar */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 220 15% 10%;
  --sidebar-primary: 220 80% 50%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 220 40% 94%;
  --sidebar-accent-foreground: 220 80% 40%;
  --sidebar-border: 220 10% 91%;
  --sidebar-ring: 220 80% 50%;

/* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

/* Shadows */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-md: 0 2px 6px -1px rgb(0 0 0 / 0.06), 0 1px 3px -1px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 8px 16px -3px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-xl: 0 14px 24px -5px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);

/* Glass & overlay */
  --overlay-opacity: 0.5;
  --backdrop-blur: 8px;
  --glass-bg: rgba(252, 252, 253, 0.8);
  --glass-border: rgba(255, 255, 255, 0.15);

/* Spacing & density — medium */
  --spacing-scale: 1;
  --container-max-width: 1280px;
  --container-padding: 2rem;
  --card-padding: 1.5rem;
  --input-height: 2.5rem;
  --button-height: 2.25rem;
  --section-gap: 4rem;

/* Typography tokens */
  --letter-spacing-tighter: -0.04em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --heading-weight: 700;
  --heading-letter-spacing: -0.02em;
  --heading-line-height: 1.2;

/* Shape */
  --radius: 0.5rem;
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  --avatar-radius: 9999px;
  --badge-radius: 9999px;
  --button-radius: 0.5rem;
  --input-radius: 0.5rem;
  --card-radius: 0.5rem;
  --tooltip-radius: 0.375rem;

/* Component shadows */
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04);
  --dropdown-shadow: 0 8px 16px -3px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --dialog-shadow: 0 14px 24px -5px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);
  --button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);

/* Borders & dividers */
  --border-width: 1px;
  --border-style: solid;
  --divider-style: solid;
  --divider-opacity: 0.12;

/* Inputs */
  --input-style: bordered;
  --input-border-on-focus: 0;
  --placeholder-opacity: 0.5;

/* Buttons */
  --button-style: filled;
  --button-weight: 500;
  --hover-effect: darken;
  --active-effect: scale-down;
  --disabled-opacity: 0.5;

/* Links */
  --link-style: color-only;
  --link-weight: 500;

/* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-style: ring;

/* Icons */
  --icon-style: outlined;
  --icon-stroke-width: 1.5;
  --icon-size: 1.25rem;

/* Scrollbar */
  --scrollbar-style: thin;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 0, 0, 0.12);

/* Selection */
  --selection-background: 220 80% 50%;
  --selection-foreground: 0 0% 100%;

/* Tooltips */
  --tooltip-style: dark;

/* Tables */
  --table-style: clean;
  --table-header-weight: 600;

/* Loading */
  --spinner-style: circle;

/* Motion */
  --transition-duration: 150ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-speed: fast;
  --hover-transition: 150ms ease;
  --enter-transition: 200ms ease-out;
  --exit-transition: 150ms ease-in;
}

RBuilt with Refraction UI