A visual and interaction system for lsdias.dev.

01 · Color

The palette the holographic shell actually uses.

Every color comes from src/components/brand/holographic/holographic-site.module.css. No parallel scale was created for this page.

Light shell (project pages, tour, 404)

02 · Type

Six roles, each with a real use on the site.

Not a dump of Tailwind classes, but the roles the site already uses, with each one's real weight and font family.

Scale

• Display

  Websites and digital products.

  clamp(3.5rem, 2.3vw + 2.25rem, 5.25rem) / 500
• Section Title

  From websites to complete systems.

  clamp(2.25rem, 1.5vw + 1.9rem, 3.75rem) / 600
• Title

  Scope and proposal

  1.5rem / 600
• Body

  I turn businesses, services and ideas into digital experiences that are clear, well built and ready to evolve.

  1.0625rem / 400
• Label

  HOW IT WORKS

  0.75rem / 600
• Mono

  STRUCTURE LD / 001

  0.5625rem / 500

03 · Space

A primitive scale, on purpose.

Spacing has no named token scale. design-system.md documents that as a decision, not an open item. What exists are conventions: how Tailwind's primitive scale gets used consistently.

• 4pxIcon/text gap, dense rows
• 8pxContactTrustBlock icon gap
• 12pxCluster / tight (design-system.md §Spacing)
• 16pxProjectPanel body padding (mobile) (+1)
• 24pxCluster / default (design-system.md §Spacing) (+1)
• 32pxProjectPanel body padding (desktop) (+1)
• 40pxContainer gutter, lg breakpoint
• 48pxCluster / loose (design-system.md §Spacing)
• 80pxSection / py, base
• 112pxSection / py, sm
• 128pxSection / py, lg

Conventions

section

py-20 sm:py-28 lg:py-32

Section.tsx, every homepage section

container

px-5 sm:px-8 lg:px-10, max-w-7xl

Container.tsx

cluster

12 / 24 / 48px (tight / default / loose)

Icon groups, tag rows, nav items

card

p-5–8 (compact / default / spacious)

ProjectPanel, ContactForm, SystemPanel

04 · Grid

One container, three gutter breakpoints.

The site doesn't use a 12-column grid. It uses a container with a max width and a gutter that changes at three points. The overlay below is the same one from Inspect Mode, activated here directly.

Gutter by width

< 640px

20px

640–1023px

32px

≥ 1024px

40px

How the composition changes

05 · Radius

Four roles, one decision each.

From square to pill. The slider below only affects this section's own example. To change the whole site, see the Playground further down.

• control-default

  0.5rem

  Used by: No real consumer yet

  Exists in config, but no component uses it yet; it's reserved for a future control (tailwind.config.ts).

• control-pill

  9999px

  Used by: Button (every variant), SystemFooterTrigger

• surface

  var(--section-radius, 0.625rem)

  Used by: ProjectPanel, LD System panel

• hud

  0px

  Used by: Hero HUD chrome, corner marks

Try it

06 · Motion

Four durations, two named curves.

Ambient motion (600ms+ loops, like the monogram's retrace) is left out on purpose. Every ambient effect has its own hand-tuned timing, and forcing a token onto it would invent a consistency that isn't there.

Curves

07 · Components

Real components, not copies.

What's here is exactly what runs on the site: the same Button, the same Project Card, the same contact form. Without a configured endpoint, the form can never actually send anything.

<Button href="#contact" variant="holographic-gradient">
  {label}
</Button>

08 · Global Playground

Change the system, watch lsdias.dev react.

Not a copy of the site. This changes real radius, spacing, type scale and motion across the page you're on, temporarily. Reset returns everything to the shipped default, and nothing here is saved.