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)))

: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)

<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.