Frasurbane

---
name: frasurbane
description: Apply the Frasurbane visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Frasurbane, mentions frasier aesthetic, 90s upscale apartment, urbane 90s, or describes warm cream and beige neutrals, muted jewel tones: burgundy, hunter, brass, high-contrast Deco-serif display type — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Frasurbane Design System

The quietly affluent 1990s sophistication named after Frasier's Seattle apartment: warm cream and beige grounds, muted jewel accents — burgundy, hunter green, brass — serif and Deco-hybrid typography, and tasteful postmodern flourishes. The look of upscale coffee-table books, jazz CD liners, boutique hotels, and bookstore cafés circa 1988–1998.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Frasurbane.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (frasier aesthetic, 90s upscale apartment, urbane 90s, nineties sophisticate), or describes its traits: warm cream and beige neutrals; muted jewel tones: burgundy, hunter, brass; high-contrast Deco-serif display type; postmodern classical flourishes; quiet, furniture-like composition; sepia and parchment textures.

## Design tokens

### Color palette

- Warm cream background, gallery-wall beige: `#f0e9dc` (--color-bg)
- Deeper parchment panel: `#e7ddc9` (--color-surface)
- Espresso-brown primary text: `#31281f` (--color-text)
- Secondary text, aged umber: `#61543f` (--color-text-muted)
- Muted burgundy — links, actions, and accent blocks: `#6f3040` (--color-accent)
- Hunter green for secondary accents: `#34584c` (--color-accent-2)
- Brass/antique gold for rules and details (decorative): `#a9853d` (--color-brass)
- Soft tan hairlines and frames: `#d3c5aa` (--color-border)

### Typography

- Display / headings: Cormorant Garamond (fallback: Garamond, Georgia, serif) (ideal: Bernhard Modern, premium — use Cormorant Garamond as the free substitute)
- Body: Lora (fallback: Georgia, serif)
- Type scale: 1.333 ratio, base 17px — computed steps: 17px / 23px / 30px / 40px / 54px / 72px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.15, letter-spacing 0.04em
- Body: line-height 1.7, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 20, 32, 48, 72, 104 — Composed like a well-furnished room — each element has space to be admired, with thin rules acting as shelving between sections.
- Border radius: none 0px, sm 3px, arch 999px 999px 0 0 — Predominantly square with occasional arched tops (postmodern classical nod) on feature panels and imagery.
- Border treatment: 1px solid #d3c5aa — Thin refined rules; feature elements may take a double rule or a single brass (#a9853d) hairline.

### Shadows

- gallery: `0 10px 28px rgba(49, 40, 31, 0.14)` — Framed images and feature cards — soft, like gallery lighting
- ledge: `0 2px 6px rgba(49, 40, 31, 0.10)` — Subtle rest shadow for buttons and small panels

### Layout

- Max content width: 1080px
- Editorial symmetry: centered title blocks over thin brass rules, like book frontispieces
- Arched image frames and column-like vertical rules as postmodern classical accents
- Two-column body text on wide sections, generous indents and drop caps
- Jewel-tone blocks used like upholstery — one large calm field per view

### Effects

- Faint parchment/sepia texture over the cream background
- Thin double-rule dividers (1px, 3px gap, 1px) in brass
- Drop caps in the display face for editorial passages
- Arch-topped image masks for featured photography

### Motion

- Easing: cubic-bezier(0.33, 0, 0.2, 1); durations 180ms / 320ms / 560ms
- Understated fades and small vertical settles — nothing bounces
- Hover states deepen color like polished wood catching light
- Rules draw themselves in on section entry (disable under prefers-reduced-motion)

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f0e9dc;
  --color-surface: #e7ddc9;
  --color-text: #31281f;
  --color-text-muted: #61543f;
  --color-accent: #6f3040;
  --color-accent-2: #34584c;
  --color-brass: #a9853d;
  --color-border: #d3c5aa;
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-arch: 999px 999px 0 0;
  --shadow-gallery: 0 10px 28px rgba(49, 40, 31, 0.14);
  --shadow-ledge: 0 2px 6px rgba(49, 40, 31, 0.10);
  --border-default: 1px solid #d3c5aa;
  --font-display: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-body: Lora, Georgia, serif;
  --text-base: 17px;
  --leading-heading: 1.15;
  --leading-body: 1.7;
  --tracking-heading: 0.04em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.33, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 560ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Lora:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Cream bar with a single brass hairline below; small-caps serif wordmark centered or left, links in letter-spaced small caps that turn burgundy when active
- **Hero:** Centered Cormorant headline with wide tracking over a double brass rule, one-paragraph serif intro, burgundy CTA; optional arch-framed photo to the side
- **Card:** Parchment panel with 1px tan border and gallery shadow; serif title, thin rule, body in Lora; feature cards get the arch top
- **Button (primary):** Burgundy rectangle (3px radius) with cream small-caps label and ledge shadow; deepens toward #5a2634 on hover
- **Button (secondary):** Transparent with 1px espresso border and espresso small-caps label; fills parchment on hover
- **Form fields:** Cream field with 1px tan border, 3px radius, serif input text; focus swaps to a burgundy border with a brass underline accent

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

A high-contrast Deco-flavored serif headline in espresso on warm cream, sitting above a thin brass rule and a burgundy accent block — like the title page of a 1994 jazz compilation or an upscale apartment brochure. Spend boldness here; keep everything else quiet.

## Do

- Keep it quietly affluent — muted jewel tones on warm neutrals, never loud
- Use thin rules, small caps, and drop caps as the ornament system
- Let the Deco-serif display face carry personality; everything else stays reserved
- Reference the classical sparingly: one arch or column motif per view

## Don't

- No bright saturated colors or pure black-on-white — warmth is structural
- Avoid minimalist sans-serif sterility; this style is bookish, not clinical
- Don't stack multiple ornaments — pick rule, arch, or drop cap, not all three
- No distressed grunge textures; surfaces are polished, not worn

## Accessibility notes

- Espresso text and burgundy accent both clear 4.5:1 on the cream background; hunter green (#34584c) also passes, but brass (#a9853d) is decorative-only and fails as text on cream — use it exclusively for rules and details
- Cormorant Garamond is delicate at small sizes; keep display use at 24px+ and set all body copy in Lora
- Small-caps letter-spaced labels should retain accessible names without spacing hacks (use font-variant or letter-spacing, never spaced characters)

## Reference sites

- CARI — Frasurbane: https://cari.institute/aesthetics/frasurbane
- Aesthetics Wiki — Frasurbane: https://aesthetics.fandom.com/wiki/Frasurbane
- Graphicality — Graphic Design Trend: Frasurbane: https://eaedgington.wixsite.com/graphicality/post/frasurbane

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip frasurbane.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/frasurbane.json

Settings → Capabilities → Skills → Upload skill → frasurbane.zip