New Season

Summer Collection

Effortless style for warmer days. Lightweight fabrics, natural tones, timeless silhouettes.

Shop Now

Featured

View all →

Relaxed linen shirt

Linen Blend Shirt

$68

Flowing wide leg trousers

Wide Leg Trousers

$89

Everyday canvas tote

Canvas Tote Bag

$42

Handcrafted leather sandals

Leather Sandals

$95

Shop by Category

Stay in the Loop

Subscribe for exclusive offers, new arrivals, and 10% off your first order.

Free Shipping

On orders over $75

Easy Returns

30-day return policy

Secure Payment

SSL encrypted 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