Alche Studio — Dark Immersive Design SystemLegacy format
Monochromatic black (#000000) canvas with white (#ffffff) text — the page acts as a dark stage for the real product: 3D WebGL content. Single accent: #d7ff00 (lime), used sparingly. Built with Astro v5.13.3, scroll-driven WebGL transitions, Lenis smooth scrolling.
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxMonochromatic black (#000000) canvas with white (#ffffff) text — the page acts as a dark stage for the real product: 3D WebGL content. Single accent: #d7ff00 (lime), used sparingly. Built with Astro v5.13.3, scroll-driven WebGL transitions, Lenis smooth scrolling.
Components
Buttons
Loading Screen
default
News Panel
default
Do's & Don'ts
Do
Don't
Visual Identity
| Token | Value | Usage |
|-------|-------|-------|
| --bg-primary | #000000 | Main background |
| --text-primary | #ffffff | Body/heading text |
| --text-secondary | #bababa | Metadata (~7.0:1 contrast) |
| --text-tertiary | #7e7e7e | Muted text (~3.4:1 contrast) |
| --accent-lime | #d7ff00 | Works impression badges only |
| --text-light-primary | #000000 | Text on light/inverted sections |
Breakpoints
| Name | Value |
|------|-------|
| --bp-mobile | 375px |
| --bp-tablet | 768px |
| --bp-desktop | 769px |
| --bp-xl | 950px |
Component Inventory
### Sound Toggle
• 40×40px circle, hover: rgba(255,255,255,.1) background + scale(1.05)
• 3 vertical bars icon, darkens on light sections
### SlotButton
• Text slides up 100% on hover, hover copy slides in from below
• Contact variant: border-radius: 999px, border: 1px solid rgba(255,255,255,.5), hover → #fff background
### Hamburger Menu
• 3-line → X animation on open
• Mobile only (769px-)
• Side menu: backdrop-filter: blur(10px), line-indicator items
### Loading Screen
• Full black overlay, z-index: 9999
• Center tagline, Lottie animation container
### News Panel
• Fixed bottom-right, border-radius: 8px
• Visible only on KV section, shows latest 2 items
### Scroll Indicator
• Left side, mix-blend-mode: difference
• 6 section labels with line indicators
• Hidden on mobile (769px-)
Motion & Interaction
| Token | Value |
|-------|-------|
| Default transition | opacity 0.3s ease |
| Button easing | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| Header transitions | 0.5s ease |
| Page transitions | 1.5s |
| Section reveals | opacity + pointer-events switch driven by [data-current_section] |
| "More" link underline | scaleX(0) → scaleX(1) with transform-origin flip |
Accessibility
• #7e7e7e on #000000 → ~3.4:1 (fails WCAG AA for body text)
• #bababa on #000 → ~7.0:1 (passes)
• No prefers-reduced-motion found
• No visible :focus-visible styles
• Images use empty alt="" (decorative only)
• No skip navigation detected
Cross-Page Consistency
✅ System holds consistently across all pages (/, /about, /works, /stellla, /news). Same typographic scale, color tokens, and section-based architecture site-wide. No deviations found.
Design Principles (Portable)
| # | Principle | Application |
|---|-----------|-------------|
| 1 | Infinite canvas | Pure black background makes 3D content feel boundless |
| 2 | Scroll as narrative | Sections fade/slide/transition based on precise scroll position |
| 3 | Sparing accent | One lime-green accent, used once per view, maximizes impact |
| 4 | Mono-texture hierarchy | 4 levels of grey create depth without color |
| 5 | Attribute-driven state | [data-current_section] powers all visibility — clean, JS-decoupled |
| 6 | Stage, not page | The UI steps back so the content (3D/WebGL) is the star |
Files
• design-tokens.css — Full CSS custom properties token file
• Screenshots: homepage (desktop + mobile 375px), about page, works page
Use with MCP
Don't have the MCP? Install it here