lucis.life – Design System Reference

1. Visual Theme & Atmosphere

Warm editorial softness. GT Alpina light weight humanist letterforms establish an intimate, personal register. The typography carries the emotional weight while generous spacing ensures a comfortable reading experience.

The overall mode is light, with a editorial, serif-driven typographic identity. Shadows and elevation are used sparingly to separate key surfaces.

2. Color Palette & Roles

Computed Roles

• background (body): rgb(255, 255, 255)
• text (button): rgb(39, 45, 43)
• text (h1): rgb(56, 65, 61)
• background (div.w-2.5): rgb(0, 199, 30)
• background (div.w-2.5): rgb(254, 83, 0)
• surface (div.flex): rgba(253, 253, 252, 0.2)
• surface (div.flex): rgb(249, 249, 246)
• surface (div.relative): rgb(241, 241, 241)
• surface (div.w-px): rgb(234, 235, 223)
• surface (div.intercom-lightweight-app-launcher): rgb(39, 50, 51)

Key observations: No token layer exists. Colours emerge from context and browser defaults. Light-mode-first palette.

3. Typography Rules

h1 – gtAlpinaLight, 75px, weight 400, line-height 93.75px, tracking -1.875px

h3 – rationalText, 18px, weight 400, line-height 22.5px, tracking -0.45px

h4 – gtAlpina, 22px, weight 400, line-height 27.5px, tracking -0.55px

body – ui-sans-serif, 16px, weight 400, line-height 24px

button – abcDiatype, 14px, weight 400, line-height 20px

Hierarchy principle: gtAlpinaLight carries the primary voice. Scale and weight – not typeface changes – create hierarchy.

What is absent: No monospace or system-UI fallback. The serif identity is deliberate – do not substitute.

4. Component Styling

Border radii: No border radii detected – corners are sharp throughout.

Interactive states:

• button: tag: button.font-family-abc “What we test”, default: [object Object], hover: [object Object], focus: null
• button: tag: button.font-family-abc “How it works”, default: [object Object], hover: [object Object], focus: null
• button: tag: button.font-family-abc “Gift Lucis”, default: [object Object], hover: [object Object], focus: null

Buttons & controls: Match the typographic register – serif labels, generous line-height, understated borders.

5. Layout Principles

Spacing is minimal and relies on default browser margins. No grid or flex gap patterns are strongly expressed.

No dominant padding pattern – spacing is contextual.

Avoid introducing grid lines, dividers, or decorative rules unless absolutely necessary. Let whitespace do the structural work.

6. Depth & Elevation

• element: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 4px 4px -2px, rgba(0, 0, 0, 0.04) 0px 12px 16px 4px, rgba(0, 0, 0, 0.08) 0px 8px 32px 0px"

Use shadows conservatively – reserve elevation for interactive feedback (dropdowns, modals), not decorative layering.

7. Do’s and Don’ts

Do:

• Respect the editorial, serif-driven typographic voice – every element should speak the same typeface language.
• Use whitespace as a primary design tool. When in doubt, add space rather than elements.
• Stay within the established colour range – no additional palette colours.
• Keep interactions subtle: micro-transitions at 150-200ms maximum.

Don’t:

• Do not swap the serif for a sans-serif alternative. The editorial register depends on it.
• Do not add drop shadows, gradients, or decorative textures unless they are already present in the system.
• Do not use colour to communicate hierarchy – spacing and scale do that work here.
• Avoid centring body text. The layout has a strong left-anchored reading rhythm.

8. Responsive Behavior

No explicit CSS breakpoints extracted. The layout relies on fluid units, CSS Grid auto-fit, or a single-column mobile-first approach.

Build mobile-first. Use fluid type and spacing where the existing CSS suggests it (clamp(), vw units). Avoid rigid pixel breakpoints if the system uses fluid scaling.

On small screens, collapse multi-column layouts to a single column without compromising the typographic scale. The type should remain readable – never below 14px rendered size.

9. Agent Prompt Guide

When generating UI components, extensions, or page sections for lucis.life, instruct the agent as follows:

“Build in the style of lucis.life: warm editorial softness. Use gtAlpinaLight as the primary typeface. Light background, dark text. Shadows only for modal-level elevation. Minimal palette, no custom tokens. No animations – immediate state changes only. Generous whitespace, strong typographic scale. Sharp corners throughout.”

Generated by Sparkbites – extracted from live CSS analysis