Local Studio

Design Specification — Local Studio

Overview

This design system was extracted programmatically from the source page. It is built on a dark canvas (#181818), ink text (#000000), a muted accent (#FFFFFF). All type is set in Geist Mono. Detected font weights: 100, 520, 560, 650. Detected style signatures: gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://localstudio.ai/icon.svg?icon.05p35wt39nr9c.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Gradients

• radial-gradient(circle at 50% 38%,#ffffff0b,#0000 25%),linear-gradient(#ffffff04 1px,#0000 1px) 0 0/96px 96px,linear-gradient(90deg,#ffffff04 1px,#0000 1px)
• linear-gradient(#000 0%,#0000 72%)
• radial-gradient(circle,#ffffff2e,#ffffff09 38%,#0000 70%)
• linear-gradient(#0000,#ffffff2e,#0000)
• linear-gradient(#000 82%,#0000 100%)
• linear-gradient(90deg,#0000,#ffffff4d,#0000)
• conic-gradient(from 360deg, transparent 0deg 304deg, #ffffff0d 320deg, #ffffffc2 344deg, transparent 360deg)
• linear-gradient(#000 0 0),linear-gradient(#000 0 0)
• linear-gradient(90deg,#0000,#ffffff38,#0000)

Typography

Primary typeface: Geist Mono — stack: Geist Mono

Font stacks (most used first)

• Geist Mono
• Geist
• var(--font-geist-mono), ui-monospace, monospace
• var(--font-geist-sans), system-ui, sans-serif
• Geist Fallback
• Geist Mono Fallback

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 520, 560, 650

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 14px #fff3
• 0 0 7px #ffffffe6
• 0 0 9px #ffffffe6
• 0 0 18px #ffffff8c
• 0 0 64px #ffffff1f
• 0 0 24px #ffffffd9
• 0 0 0 8px #ffffff03,0 0 0 9px #ffffff0b,0 36px 120px #000000ad
• inset 0 1px #ffffff09
• 0 0 0 7px #ffffff03,0 0 0 8px #ffffff09,0 30px 100px #00000085
• 0 20px 48px #00000061

Layout

Container max-width: 900px

Grid columns (largest detected grid): 2

Breakpoints

• 620px
• 900px
• 980px

Animation & Motion

Transitions

• border-color .15s,background .15s,color .15s,transform .15s
• transform .16s

Easing curves

• cubic-bezier(.16,1,.3,1)

Keyframes

@keyframes landing-module__1Cyv6W__signalRotate { to{transform:rotate(360deg)} }
@keyframes landing-module__1Cyv6W__signalBreathe { 0%,to{opacity:.52;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)} }
@keyframes landing-module__1Cyv6W__heroRise { 0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)} }
@keyframes landing-module__1Cyv6W__signalEnter { 0%{opacity:0;scale:.72}to{opacity:1;scale:1} }
@keyframes landing-module__1Cyv6W__signalFloat { 0%,to{translate:0}50%{translate:0 -10px} }
@keyframes landing-module__1Cyv6W__signalRipple { 0%{opacity:0;scale:.72}35%{opacity:.5}to{opacity:0;scale:1.24} }
@keyframes landing-module__1Cyv6W__axisSweep { 0%{transform:rotate(22deg)}to{transform:rotate(47deg)} }
@keyframes landing-module__1Cyv6W__gridDrift { to{background-position:50%,0 96px,96px 0} }
@keyframes landing-module__1Cyv6W__screenReveal { 0%{opacity:0;transform:translate(-50%,44px)scale(.985)}to{opacity:1;transform:translate(-50%)scale(1)} }
@keyframes landing-module__1Cyv6W__borderShine { to{--shine-angle:360deg} }

Animations

• 3.8s ease-in-out infinite landing-module__1Cyv6W__signalBreathe
• 24s linear infinite landing-module__1Cyv6W__gridDrift
• .82s cubic-bezier(.16,1,.3,1) both landing-module__1Cyv6W__heroRise
• 1.35s cubic-bezier(.16,1,.3,1) .36s both landing-module__1Cyv6W__signalEnter,7s ease-in-out 1.7s infinite landing-module__1Cyv6W__signalFloat
• 5.5s ease-in-out infinite landing-module__1Cyv6W__signalBreathe
• 26s linear infinite landing-module__1Cyv6W__signalRotate
• 4.8s cubic-bezier(.16,1,.3,1) infinite landing-module__1Cyv6W__signalRipple
• 9s ease-in-out infinite alternate landing-module__1Cyv6W__axisSweep
• 1.2s cubic-bezier(.16,1,.3,1) .42s both landing-module__1Cyv6W__screenReveal
• 7s linear infinite landing-module__1Cyv6W__borderShine

CTA labels found on page

• Download for macOS

Effects

• backdrop-filter: blur(20px)

Source Design Tokens (CSS custom properties)

:root {
  --font-geist-sans: "Geist", "Geist Fallback";
  --font-geist-mono: "Geist Mono", "Geist Mono Fallback";
  --lightningcss-dark: initial;
  --ui-scale: 1;
  --space-base: 4px;
  --radius-base: 10px;
  --bg: #181818;
  --fg: #fff;
  --dim: #ffffffb3;
  --surface: #212121;
  --border: #ffffff14;
  --hover: #ffffff0d;
  --accent: #fff;
  --ok: #40c977;
  --color-background: #181818;
  --color-border-hover: #ffffff29;
  --color-foreground-subtle: #ffffffb3;
  --color-foreground-subtlest: #ffffff80;
  --color-foreground-inverse: #000;
  --composer-shadow: 0 10px 28px #0000002e, inset 0 0 0 1px #ffffff0e;
  --fs-xs: calc(11px * var(--ui-scale));
  --fs-sm: calc(12px * var(--ui-scale));
  --fs-base: calc(14px * var(--ui-scale));
  --fs-lg: calc(16px * var(--ui-scale));
  --fs-xl: calc(18px * var(--ui-scale));
  --fs-2xl: calc(20px * var(--ui-scale));
  --fs-4xl: calc(28px * var(--ui-scale));
  --rad-sm: calc(var(--radius-base) * .6);
  --rad-lg: var(--radius-base);
  --rad-full: 9999px;
  --shine-angle: 360deg;
  --body-bg: var(--bg);
}

Do's and Don'ts

Do

• Do reserve the accent #FFFFFF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #181818; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 520, 560, 650.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #181818;
  --color-surface: #212121;
  --color-border: #FFFFFF;
  --color-accent: #FFFFFF;
  --color-primary: #40C977;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #050505;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --font-sans: Geist Mono;
  --font-size-display: 51.2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 18px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 14px #fff3;
  --shadow-md: 0 0 64px #ffffff1f;
  --shadow-lg: 0 20px 48px #00000061;
  --space-xs: 5px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-xl: 110px;
  --tracking-display: -.055em;
  --tracking-label: .14em;
  --container-max: 900px;
}