Outerbase UX/UI Design and Copywrinting Examples

Stack

Outerbase Studio is built with Next.js 14 (App Router, RSC), TypeScript, and Tailwind CSS v4. Component primitives come from shadcn/ui ("new-york" style, slate base color, CSS variables mode). The internal design system is called Orbit, exposing semantic ob-\* utility classes and CSS custom properties. CodeMirror powers the SQL editor. The marketing site (outerbase.com) is also Next.js, deployed via Cloudflare Workers (open-next).

Typography

Primary font: Inter (self-hosted WOFF2, weights 400/500/600/700, font-display: swap). Falls back to Helvetica → ui-sans-serif → system-ui. Monospace stack: ui-monospace → SFMono-Regular → Menlo → Monaco → Consolas.

xs: 10px / line-height ~2.0
sm: 12px / line-height ~1.33
base: 14px / line-height ~1.43 — default body size (compact for a data tool)
Larger display sizes on the marketing site use standard Tailwind scale (xl, 2xl, 3xl…)

The scale is intentionally tight — optimised for information-dense database UIs, not editorial reading.

Color Philosophy

Outerbase uses a neutral-dominant, near-monochrome palette. Pure black (#000) and white (#fff) anchor the system. Accent color is almost absent — the primary brand action is rendered in dark charcoal (light mode) or near-white (dark mode), keeping the focus on user data rather than chrome. The only chromatic accent is a blue focus ring (oklch(0.707 0.165 254.624)) and red destructive states. SQL table names in the editor use a distinctive hot pink (#e84393 / #fd79a8 dark) — a deliberate pop of color as a code-syntax cue. OKLCH is used throughout the Orbit token palette for perceptually uniform steps.

Spacing

Tailwind CSS v4 default spacing scale (base unit 4px / 0.25rem). Key component heights are codified as Orbit size utilities:

ob-size-sm: h-6.5 (26px), px-2, rounded
ob-size-base: h-8 (32px), px-2.5, rounded-md
ob-size-lg: h-9 (36px), px-3, rounded-md

Container max-width is 1400px with 2rem horizontal padding. Scrollbars are 6px wide/tall with transparent-until-hover thumbs.

Component Defaults

Border radius (--radius): 0.5rem (8px) → lg. md = 6px, sm = 4px.
Buttons: 4 semantic variants — primary (dark fill), secondary (white/light fill), ghost (no background), destructive (red fill). All require .interactive class wrapper to enable hover/active states and cursor-pointer.
Focus: .ob-focus applies a 1px ring in --color-ob-focus (blue) via focus-visible, no outline flash.
Transitions: 100ms default (snappier than Tailwind's 150ms default). Custom bounce easing: cubic-bezier(0.2, 0, 0, 1.5).
Accordion: 200ms ease-out height animation via Radix UI CSS variable.
Shadows: shadow-xs on primary and secondary buttons.
Scrollbars: Custom thin (6px) webkit scrollbars, visible only on parent hover.

Layout

The app uses a panel/window metaphor with tab-based navigation (.libsql-window-tab). The marketing site is a single-column scroll layout with full-width sections and a max-width container. Dark/light mode is toggled via the .dark class on a parent element (not prefers-color-scheme media query alone), enabling user-controlled switching. overscroll-behavior-x: none is applied globally to prevent horizontal pull-to-refresh.

/\* ============================================
   OUTERBASE / ORBIT DESIGN SYSTEM — CSS VARIABLES
   Source: github.com/outerbase/studio
   Framework: Tailwind CSS v4 + shadcn/ui (new-york)
   ============================================ \*/

:root {
  /_ ── Typography ── _/
  --font-sans: Inter, Helvetica, ui-sans-serif, system-ui, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /_ Type scale (compact — data UI) _/
  --text-xs:   10px;   /_ line-height ≈ 2.0  _/
  --text-sm:   12px;   /_ line-height ≈ 1.33 _/
  --text-base: 14px;   /_ line-height ≈ 1.43 _/

  /_ ── Spacing / Radius ── _/
  --radius: 0.5rem;          /_ 8px  — lg _/
  /_ --radius-md = calc(var(--radius) - 2px) → 6px _/
  /_ --radius-sm = calc(var(--radius) - 4px) → 4px _/

  /_ ── Easing & Motion ── _/
  --ease-bounce: cubic-bezier(0.2, 0, 0, 1.5);
  --default-transition-duration: 100ms;

  /_ ── Semantic tokens (light mode) ── _/
  --background:           #fff;
  --foreground:           #444;
  --card:                 #fff;
  --card-foreground:      #444;
  --popover:              #fff;
  --popover-foreground:   #444;
  --primary:              #000;
  --primary-foreground:   #fff;
  --secondary:            #f5f5f5;
  --secondary-foreground: #444;
  --muted:                #eee;
  --muted-foreground:     #888;
  --accent:               #f1f5f9;
  --accent-foreground:    #444;
  --destructive:          #f1f5f9;
  --destructive-foreground: red;
  --border:               #e5e5e5;
  --input:                #e2e8f0;
  --ring:                 #ccc;
  --selected:             #e2e8f0;

  /_ Surface _/
  --color-surface:        #fff;
  --color-surface-hover:  #eee;

  /_ Scrollbars _/
  --scroll-bar:           #d4d4d4;
  --scroll-bar-hover:     #ccc;

  /_ Table grid & cell colors _/
  --color-table-grid:          #eee;
  --color-table-change:        #f6e58d;
  --color-table-cell-number:   #2980b9;
  --color-table-cell-code:     #95a5a6;
  --color-table-row-selected:  #e4e6f1;
  --color-table-row-removed:   #ff8b81;
  --color-table-row-new:       #7bed9f;

  /_ ── ORBIT base palette (light) ── _/
  --color-ob-base-100: #fff;                      /_ oklch(0.985 0 0) _/
  --color-ob-base-200: oklch(0.985 0 0);
  --color-ob-base-300: oklch(0.97 0 0);
  --color-ob-base-400: oklch(0.922 0 0);
  --color-ob-base-500: oklch(0.87 0 0);
  --color-ob-base-1000: oklch(0.205 0 0);

  --color-ob-border:        oklch(0.922 0 0);
  --color-ob-border-active: oklch(0.708 0 0);

  /_ ORBIT text _/
  --text-color-ob-base-100: oklch(0.556 0 0);
  --text-color-ob-base-200: oklch(0.439 0 0);
  --text-color-ob-base-300: oklch(0.205 0 0);
  --text-color-ob-destructive: oklch(0.577 0.245 27.325); /_ red-600 _/
  --text-color-ob-inverted: #fff;

  /_ ORBIT buttons (light) _/
  --color-ob-btn-primary-bg:             oklch(0.31 0 0);
  --color-ob-btn-primary-bg-hover:       oklch(0.23 0 0);
  --color-ob-btn-primary-border:         oklch(0.556 0 0);
  --color-ob-btn-primary-border-hover:   oklch(0.439 0 0);

  --color-ob-btn-secondary-bg:           #fff;
  --color-ob-btn-secondary-bg-hover:     oklch(0.985 0 0);
  --color-ob-btn-secondary-border:       oklch(0.922 0 0);
  --color-ob-btn-secondary-border-hover: oklch(0.87 0 0);

  --color-ob-btn-ghost-bg-hover:         oklch(0.96 0 0);

  --color-ob-btn-destructive-bg:         oklch(0.577 0.245 27.325);
  --color-ob-btn-destructive-bg-hover:   oklch(0.55 0.238 27.4);
  --color-ob-btn-destructive-border:     oklch(0.704 0.191 22.216); /_ red-400 _/
  --color-ob-btn-destructive-border-hover: oklch(0.645 0.246 16.439); /_ red-500 _/

  /_ Focus _/
  --color-ob-focus: oklch(0.707 0.165 254.624); /_ blue-400 _/
}

/_ ── Dark mode overrides ── _/
.dark {
  --background:           #0a0a0a;
  --foreground:           #aaa;
  --card:                 #222;
  --card-foreground:      #eee;
  --popover:              #111;
  --popover-foreground:   #eee;
  --primary:              #fff;
  --primary-foreground:   #000;
  --secondary:            #171717;
  --secondary-foreground: #eee;
  --muted:                #333;
  --muted-foreground:     #888;
  --accent:               #2a2d2e;
  --accent-foreground:    #eee;
  --destructive:          red;
  --destructive-foreground: #fff;
  --border:               #262626;
  --input:                #333;
  --ring:                 #444;
  --selected:             #222;

  --color-surface:        #000;
  --color-surface-hover:  #3f3f3f;
  --scroll-bar:           #353535;
  --scroll-bar-hover:     #444;

  /_ ORBIT dark overrides _/
  --color-ob-base-100: oklch(0.145 0 0);
  --color-ob-base-200: oklch(0.205 0 0);
  --color-ob-base-300: oklch(0.23 0 0);
  --color-ob-base-400: oklch(0.269 0 0);
  --color-ob-base-500: oklch(0.31 0 0);
  --color-ob-base-1000: oklch(0.985 0 0);

  --color-ob-border:        oklch(0.269 0 0);
  --color-ob-border-active: oklch(0.371 0 0);

  --text-color-ob-base-100: oklch(0.556 0 0);
  --text-color-ob-base-200: oklch(0.708 0 0);
  --text-color-ob-base-300: oklch(0.985 0 0);
  --text-color-ob-destructive: oklch(0.704 0.191 22.216); /_ red-400 _/
  --text-color-ob-inverted: oklch(0.205 0 0);

  --color-ob-btn-primary-bg:             oklch(0.87 0 0);
  --color-ob-btn-primary-bg-hover:       oklch(0.9 0 0);
  --color-ob-btn-primary-border:         oklch(0.97 0 0);
  --color-ob-btn-primary-border-hover:   #fff;

  --color-ob-btn-secondary-bg:           oklch(0.205 0 0);
  --color-ob-btn-secondary-bg-hover:     oklch(0.23 0 0);
  --color-ob-btn-secondary-border:       oklch(0.269 0 0);
  --color-ob-btn-secondary-border-hover: oklch(0.31 0 0);

  --color-ob-btn-ghost-bg-hover:         oklch(0.23 0 0);

  --color-ob-btn-destructive-bg:         oklch(0.424 0.199 265.638); /_ reuses blue-800 slot for red-800 _/
  --color-ob-btn-destructive-bg-hover:   oklch(0.46 0.195 27.2);
  --color-ob-btn-destructive-border:     oklch(0.396 0.141 25.723); /_ red-700 _/
  --color-ob-btn-destructive-border-hover: oklch(0.577 0.245 27.325);

  --color-ob-focus: oklch(0.424 0.199 265.638); /_ blue-800 _/
}

Color Tokens

Token	Value (light)	Usage
--background	#fff	Page / app canvas
--foreground	#444	Default body text
--primary	#000	Primary button fill, strong text
--primary-foreground	#fff	Text on primary button
--secondary	#f5f5f5	Secondary button background
--muted	#eee	Dividers, disabled backgrounds
--muted-foreground	#888	Placeholder / hint text
--accent	#f1f5f9	Hover highlights, subtle fills
--border	#e5e5e5	Default borders
--ring	#ccc	Generic focus ring fallback
--destructive-foreground	red	Error / delete text
--color-ob-focus	oklch(0.707 0.165 254.6) — blue-400	Keyboard focus ring (Orbit)
--color-table-cell-number	#2980b9	Numeric cell values
--color-table-row-new	#7bed9f	Newly inserted rows
--color-table-row-removed	#ff8b81	Deleted / staged-remove rows
--color-table-change	#f6e58d	Edited (unsaved) cells
.cm-table-name (SQL editor)	#e84393 / dark: #fd79a8	Table name syntax highlight

Spacing Tokens

Token	Value	Usage
Base unit	4px (0.25rem)	Tailwind spacing scale base
Container padding	2rem (32px)	Horizontal page padding
Container max-width	1400px	Marketing site cap
ob-size-sm height	h-6.5 = 26px	Small buttons, compact inputs
ob-size-base height	h-8 = 32px	Default button/input height
ob-size-lg height	h-9 = 36px	Large interactive elements
Scrollbar width/height	6px	Custom webkit scrollbar

Typography Tokens

Token	Value	Usage
--font-sans	Inter, Helvetica, ui-sans-serif…	All UI text
--font-mono	ui-monospace, SFMono-Regular, Menlo…	Code, SQL, query editor
--text-xs	10px / lh ~2.0	Labels, badges, tiny metadata
--text-sm	12px / lh ~1.33	Secondary labels, captions
--text-base	14px / lh ~1.43	Primary body / UI text
Font weights used	400, 500, 600, 700	Regular → Bold (Inter)

Border Radius Tokens

Token	Value	Usage
--radius (lg)	0.5rem (8px)	Cards, modals, larger panels
--radius-md	calc(--radius - 2px) = 6px	Buttons (base, lg), inputs
--radius-sm	calc(--radius - 4px) = 4px	Small buttons, chips
rounded-full	9999px	Circular icon buttons (.circular)
Scrollbar thumb	8px	Custom scrollbar rounding

Shadow & Motion Tokens

Token	Value	Usage
shadow-xs	Tailwind xs shadow	Primary & secondary buttons
--default-transition-duration	100ms	All transition-colors (snappier than TW default)
--ease-bounce	cubic-bezier(0.2, 0, 0, 1.5)	Springy open/close motions
accordion-down/up	0.2s ease-out (Radix height var)	Accordion expand/collapse
shake	0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97)	Error shake on invalid input
refresh spin	0.5s ease-in-out infinite + scale(0.9)	Loading/refresh indicator
float	5s linear infinite alternate, translate(5px,15px)	Marketing hero astronaut image

Framework & tooling: Next.js 14 (App Router) + TypeScript + Tailwind CSS v4. shadcn/ui components in "new-york" style with CSS-variable mode enabled. The internal system is named Orbit — it surfaces as ob-_ prefixed CSS custom properties and utility classes (.ob-btn, .ob-focus, .ob-disable, .ob-size-_).

Theme support: Full light/dark mode via .dark class on a parent element. Both modes are fully specified — not just inverted. Dark mode is notably darker than most SaaS products: background is #0a0a0a (near-true black), card is #222, popover is #111. This suits a terminal/data-tool audience.

Data confidence: High — CSS extracted directly from the open-source repository (github.com/outerbase/studio, src/app/globals.css). The studio app and the marketing site share the same design system. Marketing site uses Next.js static output served from the same Cloudflare deployment.

OKLCH throughout Orbit palette: All neutral steps use OKLCH for perceptual uniformity. Custom steps (150, 250, 450, 750, 850, 925) fill gaps in Tailwind's default scale — Outerbase extended the neutral ramp to 14 stops for fine-grained UI differentiation.
Chromatic color is nearly absent: The only hues in the system are blue (focus ring), red (destructive), and hot pink (SQL syntax highlight). Everything else is achromatic neutral. This is a deliberate choice for a data-display tool — user data takes visual priority.
Orbit button architecture: Buttons require two classes — the base .ob-btn plus a variant (.btn-primary, .btn-secondary, .btn-ghost, .btn-destructive). Hover/active states are gated behind an .interactive parent class, and toggle states via .toggle. Square and circular shape variants are via .square / .circular parents. This context-class pattern is unusual and worth noting for implementation.
Acquired by Cloudflare: As of 2025, Outerbase joined Cloudflare. The studio is deployable as a Cloudflare Worker (wrangler.jsonc present) and Cloudflare D1 is a first-class supported database. The design system may evolve toward alignment with Cloudflare's design language.
Marketing site vs. app: The marketing site (outerbase.com) is a Next.js static/SSR site sharing the same token system, with larger display typography for hero sections and additional animated elements (floating astronaut, star background WebP). These are decorative only and not part of the Orbit system.
CodeMirror SQL editor: Custom syntax token for table names (.cm-table-name) uses hot pink — the only saturated color in the app UI layer — making it a recognisable brand-adjacent signature color for the product.