---
name: 3dopen-design-system
description: Build pages and components in the 3dopenwebsite.com visual language — dark cinematic ground with a fire-orange accent, warm paper light theme, glass surfaces, restrained motion. Use when asked to "make it look like 3dopen", to extend the 3dopen site, or to apply its tokens, spacing and motion rules to a new section or component.
---

# 3dopen Design System

Everything below is what the live site at https://www.3dopenwebsite.com actually does. Copy the tokens, follow the rules, and new work will sit next to existing sections without looking bolted on.

## Tokens (HSL triplets, consumed as `hsl(var(--x))`)

```css
:root {                       /* dark — the brand default */
  --background: 0 0% 0%;
  --foreground: 0 0% 100%;
  --muted-foreground: 0 0% 60%;
  --surface: 20 16% 4%;       /* elevated panels: nav, sidebars, dialogs */
  --fire-orange: 16 100% 50%;
  --fire-orange-light: 25 100% 60%;
  --glass-bg: 0 0% 100% / 0.05;
  --glass-border: 0 0% 100% / 0.1;
  --radius: 1rem;
}
.light {                      /* opt-in paper theme */
  --background: 36 40% 97%;
  --foreground: 20 16% 9%;
  --muted-foreground: 20 10% 40%;
  --surface: 0 0% 100%;
  --glass-bg: 0 0% 100% / 0.72;
  --glass-border: 20 30% 12% / 0.08;
}
```

Tailwind names: `bg-fire`, `text-fire`, `bg-surface/70`, `bg-glass-bg`, `border-glass-border`, `text-foreground`, `text-muted-foreground`. Register `surface` with an alpha slot: `'hsl(var(--surface) / <alpha-value>)'`.

## Rules

1. **One accent.** Fire orange is for the primary action, the active state, the eyebrow label and small glyph tiles. Never for body text, never for two competing elements in one view.
2. **Black is the ground, not a colour.** Sections sit directly on `bg-background`; separation comes from glass cards, not from alternating band colours.
3. **Glass, not borders.** Cards are `bg-glass-bg border-glass-border backdrop-blur` with `rounded-3xl`. Hairlines at 10% white (dark) / 8% ink (light). No drop shadows in dark mode; warm shadows only in light mode.
4. **Type.** Manrope. Headlines `font-bold tracking-tight leading-[1.05]`, sizes `text-4xl md:text-6xl`. Eyebrow: `text-xs font-semibold uppercase tracking-[0.2em] text-fire`. Body `text-lg md:text-xl text-muted-foreground max-w-3xl`.
5. **Pills everywhere.** Buttons are `rounded-full`. Primary: `bg-fire text-white`. Secondary: `border border-glass-border hover:bg-foreground/5`.
6. **Spacing rhythm.** Sections `py-24 px-6`, content `max-w-7xl mx-auto`, headers centred with `mb-16`. Card grids `gap-8`.
7. **Motion is earned.** Entrance = `reveal-hidden → reveal-visible` (opacity + 24px rise, 700ms, once, via IntersectionObserver). Hover = scale 1.03 or a 300ms colour change, nothing else. Subtitles use the decrypt-then-settle text effect at 12 ms/char. Respect `prefers-reduced-motion`: animations resolve instantly.
8. **Hero stays dark in both themes.** Wrap cinematic sections in `.force-dark` so tokens re-pin to the dark set.
9. **Adaptive by default.** Every layout is tested at 375, 768, 1024 and 1440. Grids collapse 4→2→1; no fixed pixel widths on text containers.

## Building a new section (template)

```tsx
<section className="relative z-10 px-6 py-24">
  <div className="mx-auto max-w-7xl">
    <div className="mb-16 text-center">
      <p className="mb-3 text-xs font-semibold uppercase tracking-[0.2em] text-fire">Eyebrow</p>
      <h2 className="mb-5 text-4xl font-bold tracking-tight text-foreground md:text-6xl">Headline</h2>
      <p className="mx-auto max-w-3xl text-lg text-muted-foreground md:text-xl">One sentence that earns the section.</p>
    </div>
    <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
      <article className="rounded-3xl border border-glass-border bg-glass-bg p-8 backdrop-blur-glass">…</article>
    </div>
  </div>
</section>
```

## Checklist before you call it done

- Works on black AND on paper (toggle the theme).
- Fire appears at most once per card.
- No hard-coded `#0b0908` / `text-white` on surfaces — use tokens (white text only on fire or on video).
- Keyboard focus visible; contrast ≥ 4.5:1 for body text.