Untitled Design System

Layout follows a flex composition with reusable spacing tokens. Preserve the flex, full bleed structural frame before changing ornament or component styling. Use 6px as the base rhythm and let larger gaps step up from that cadence instead of introducing unrelated spacing values.

Treat the page as a flex / full bleed composition, and keep that framing stable when adding or remixing sections.

• Layout type: Flex

• Content width: Full Bleed

• Base unit: 6px

• Scale: 1px, 6px, 8px, 10px, 12px, 16px, 24px, 32px

• Section padding: 32px

• Card padding: 9px

• Gaps: 8px, 12px, 16px, 20px

Shapes rely on a tight radius system anchored by 5px and scaled across cards, buttons, and supporting surfaces. Icon geometry should stay compatible with that soft-to-controlled silhouette.

Use the radius family intentionally: larger surfaces can open up, but controls and badges should stay within the same rounded DNA instead of inventing sharper or pill-only exceptions.

• Corner radii: 5px, 6px, 9999px

• Icon treatment: Linear

• Icon sets: Solar

Motion feels controlled and interface-led across text, layout, and section transitions. Timing clusters around 150ms and 300ms. Easing favors ease and cubic-bezier(0.4. Hover behavior focuses on text and color changes. Scroll choreography uses GSAP ScrollTrigger for section reveals and pacing.

Motion Level: moderate

Durations: 150ms, 300ms, 500ms

Easings: ease, cubic-bezier(0.4, 0, 0.2, 1)

Hover Patterns: text, color

Scroll Patterns: gsap-scrolltrigger

Reconstruct the graphics as a inset 3d accent using webgl, renderer, alpha, antialias, dpr clamp, custom shaders. The effect should read as retro-futurist, technical, and meditative: dot-matrix particle field with green on black and sparse spacing. Build it from dot particles + soft depth fade so the effect reads clearly. Animate it as slow breathing pulse. Interaction can react to the pointer, but only as a subtle drift. Preserve dom fallback.

Id: webgl

Label: WebGL

Stack: ThreeJS, WebGL

Insights:

• Scene:

• Value: Inset 3D accent

• Effect:

• Value: Dot-matrix particle field

• Primitives:

• Value: Dot particles + soft depth fade

• Motion:

• Value: Slow breathing pulse

• Interaction:

• Value: Pointer-reactive drift

• Render:

• Value: WebGL, Renderer, alpha, antialias, DPR clamp, custom shaders

Techniques: Dot matrix, Breathing pulse, Pointer parallax, Shader gradients, DOM fallback

Code Evidence:

• HTML reference:

• Language: html

• Snippet:

```html

```

• JS reference:

• Language: html

• Snippet:

```html

```

Reconstruct the Three.js layer as a inset 3d accent with layered spatial depth that feels retro-futurist, volumetric, and technical. Use alpha, antialias, dpr clamp renderer settings, perspective, ~60deg fov, custom buffer geometry geometry, shadermaterial materials, and ambient + key + rim lighting. Motion should read as timeline-led reveals, with poster frame + dom fallback.

Id: threejs

Label: ThreeJS

Stack: ThreeJS, WebGL

Insights:

• Scene:

• Value: Inset 3D accent with layered spatial depth

• Render:

• Value: alpha, antialias, DPR clamp

• Camera:

• Value: Perspective, ~60deg FOV

• Lighting:

• Value: ambient + key + rim

• Materials:

• Value: ShaderMaterial

• Geometry:

• Value: custom buffer geometry

• Motion:

• Value: Timeline-led reveals

Techniques: Shader materials, Particle depth, Timeline beats, alpha, antialias, DPR clamp, Poster frame + DOM fallback

Code Evidence:

• HTML reference:

• Language: html

• Snippet:

```html

```

• JS reference:

• Language: html

• Snippet:

```html

```