We are a team of 12 designers, developers, and strategists based in San Francisco. Founded in 2018, we have helped over 80 companies transform their digital presence.

Our approach is collaborative and iterative. We believe great design comes from understanding the problem deeply, exploring many solutions, and refining relentlessly.

80+

Projects Shipped

Team Members

Years Active

Services

Brand Strategy

We define your brand voice, visual identity, and positioning to stand out in the market.

Web Design

Pixel-perfect interfaces that convert. From landing pages to complex web applications.

Development

Full-stack engineering with modern technologies. Performance and scalability built in.

Marketing

Data-driven campaigns that reach your audience. SEO, social, content, and paid media.

Let's work together

Have a project in mind? We would love to hear about it. Drop us a line and let's create something amazing.

hello@studiox.co

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 — black primary, dramatic, minimal */
  --background: 240 10% 4%;
  --foreground: 0 0% 95%;
  --card: 240 10% 6%;
  --card-foreground: 0 0% 95%;
  --popover: 240 10% 6%;
  --popover-foreground: 0 0% 95%;
  --primary: 0 0% 95%;
  --primary-foreground: 240 10% 4%;
  --secondary: 240 5% 12%;
  --secondary-foreground: 240 5% 65%;
  --accent: 240 5% 16%;
  --accent-foreground: 0 0% 90%;
  --muted: 240 5% 12%;
  --muted-foreground: 240 5% 55%;
  --destructive: 0 63% 40%;
  --destructive-foreground: 0 0% 95%;
  --success: 142 71% 45%;
  --success-foreground: 0 0% 95%;
  --warning: 38 92% 50%;
  --warning-foreground: 240 10% 4%;
  --border: 240 5% 14%;
  --input: 240 5% 14%;
  --ring: 0 0% 95%;
  --chart-1: 0 0% 85%;
  --chart-2: 173 60% 50%;
  --chart-3: 38 80% 55%;
  --chart-4: 330 55% 55%;
  --chart-5: 200 70% 50%;

/* Sidebar */
  --sidebar-background: 240 10% 3%;
  --sidebar-foreground: 0 0% 90%;
  --sidebar-primary: 0 0% 95%;
  --sidebar-primary-foreground: 240 10% 4%;
  --sidebar-accent: 240 5% 10%;
  --sidebar-accent-foreground: 0 0% 90%;
  --sidebar-border: 240 5% 12%;
  --sidebar-ring: 0 0% 95%;

/* Typography — clean, dramatic */
  --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 — subtle in dark */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.2);
  --shadow-lg: 0 6px 10px -2px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.2);
  --shadow-xl: 0 12px 20px -4px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.2);

/* Glass & overlay */
  --overlay-opacity: 0.6;
  --backdrop-blur: 12px;
  --glass-bg: rgba(10, 10, 14, 0.8);
  --glass-border: rgba(255, 255, 255, 0.06);

/* Spacing & density — generous, dramatic */
  --spacing-scale: 1.15;
  --container-max-width: 1280px;
  --container-padding: 2rem;
  --card-padding: 1.5rem;
  --input-height: 2.5rem;
  --button-height: 2.25rem;
  --section-gap: 5rem;

/* Typography tokens */
  --letter-spacing-tighter: -0.06em;
  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.03em;
  --letter-spacing-wider: 0.08em;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --heading-weight: 700;
  --heading-letter-spacing: -0.04em;
  --heading-line-height: 0.95;

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

/* Component shadows */
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2);
  --dropdown-shadow: 0 6px 10px -2px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.2);
  --dialog-shadow: 0 12px 20px -4px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.2);
  --button-shadow: none;

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

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

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

/* Links */
  --link-style: underline;
  --link-weight: inherit;

/* 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(255, 255, 255, 0.1);

/* Selection */
  --selection-background: 0 0% 95%;
  --selection-foreground: 240 10% 4%;

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

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

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

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

RBuilt with Refraction UI