eu4nzaeu4nza

Design System

The foundation of eu4nza.me. A strict monochrome aesthetic combined with squircle geometry, floating contextual overlays, and fluid, state-anchored motion interactions.

Foundations

Colors

Strict Black
Strict White
Structural Dark
Structural Light

Strictly black and white theme. Neutrals are used purely for depth, disabled states, and borders. No accent colors.

Typography

Primary Font • Inter/System substitute
Heading 136px / Medium
Heading 224px / Medium
Body text16px / Regular
Small secondary14px / Regular

Page Components

Previews of structural components designed for the upcoming About, Socials, Blogs, and Contact pages.

About Structure

Layout designed for the profile and experience section. Removed ambient hover per review update.

Socials Link Banner

A wide button-like card. Removed ambient hover per review update.

Scroll Indicator

A contextual sticky overlay. Appears gracefully at the very top of a page with an ambient bounce array, naturally fading via AnimatePresence when a user scrolls down.

Blog Layout

Writing minimal components

Blog posts will utilize a very narrow column width (max 65ch) for optimal readability, relying heavily on typography scale rather than structural boxes.

Mar 15, 2026

Contact Form Layout

hello@example.com
Your message here...

Motion & Physics

Motion should feel physically grounded and responsive. We rely heavily on spring configurations to avoid linear/abrupt stops.

Spring Scaling

Hover and click to feel the mass and tension of the spring. It overshoots naturally.

Breathing State

Elements in a resting state should have a subtle, slow sinusoidal pulse indicating readiness.

Fluid Interaction

Hovering between elements transfers state fluidly without waiting for animations to resolve.

Chain Response

Neighboring items react in quick succession to keep motion cohesive and avoid isolated, robotic transitions.

Damped Loop

Long-running ambient loops stay smooth and controlled, emulating the subtle breathing cadence of premium interfaces.

UI Toolkit

Interactive

Data Display

1

Feedback

DefaultOutline
Action successComponent copied to clipboard.

Overlays & Selection

Dialog
Popup Menu
Select
Tooltip
Hover Card Trigger

Tables

ComponentStatus
ButtonsLive
Contact FormDraft

Large data table with fixed viewport and both-axis scroll behavior.

IDProjectEnvironmentResource GroupOwnerStatusBuild IDPriorityETARegionTagsUpdated
#1000Core Infrastructure Revamp 1Productionrg-core-infra-1E. ChuaLive35abHighQ1 2026APACeu4nza10m ago
#1001Core Infrastructure Revamp 2Developmentrg-core-infra-2E. ChuaIn Progress6b56MediumQ2 2026APACsys11m ago
#1002Core Infrastructure Revamp 3Stagingrg-core-infra-3E. ChuaIn Progressa101HighQ3 2026APACeu4nza12m ago
#1003Core Infrastructure Revamp 4Productionrg-core-infra-4E. ChuaLived6acMediumQ4 2026APACsys13m ago
#1004Core Infrastructure Revamp 5Stagingrg-core-infra-5E. ChuaIn Progress10c57HighQ1 2026APACeu4nza14m ago
#1005Core Infrastructure Revamp 6Developmentrg-core-infra-1E. ChuaIn Progress14202MediumQ2 2026APACsys15m ago
#1006Core Infrastructure Revamp 7Productionrg-core-infra-2E. ChuaLive177adHighQ3 2026APACeu4nza16m ago
#1007Core Infrastructure Revamp 8Developmentrg-core-infra-3E. ChuaIn Progress1ad58MediumQ4 2026APACsys17m ago
#1008Core Infrastructure Revamp 9Stagingrg-core-infra-4E. ChuaIn Progress1e303HighQ1 2026APACeu4nza18m ago
#1009Core Infrastructure Revamp 10Productionrg-core-infra-5E. ChuaLive218aeMediumQ2 2026APACsys19m ago
#1010Core Infrastructure Revamp 11Stagingrg-core-infra-1E. ChuaIn Progress24e59HighQ3 2026APACeu4nza20m ago
#1011Core Infrastructure Revamp 12Developmentrg-core-infra-2E. ChuaIn Progress28404MediumQ4 2026APACsys21m ago
#1012Core Infrastructure Revamp 13Productionrg-core-infra-3E. ChuaLive2b9afHighQ1 2026APACeu4nza22m ago
#1013Core Infrastructure Revamp 14Developmentrg-core-infra-4E. ChuaIn Progress2ef5aMediumQ2 2026APACsys23m ago
#1014Core Infrastructure Revamp 15Stagingrg-core-infra-5E. ChuaIn Progress32505HighQ3 2026APACeu4nza24m ago
#1015Core Infrastructure Revamp 16Productionrg-core-infra-1E. ChuaLive35ab0MediumQ4 2026APACsys25m ago
#1016Core Infrastructure Revamp 17Stagingrg-core-infra-2E. ChuaIn Progress3905bHighQ1 2026APACeu4nza26m ago
#1017Core Infrastructure Revamp 18Developmentrg-core-infra-3E. ChuaIn Progress3c606MediumQ2 2026APACsys27m ago
#1018Core Infrastructure Revamp 19Productionrg-core-infra-4E. ChuaLive3fbb1HighQ3 2026APACeu4nza28m ago
#1019Core Infrastructure Revamp 20Developmentrg-core-infra-5E. ChuaIn Progress4315cMediumQ4 2026APACsys29m ago
#1020Core Infrastructure Revamp 21Stagingrg-core-infra-1E. ChuaIn Progress46707HighQ1 2026APACeu4nza10m ago
#1021Core Infrastructure Revamp 22Productionrg-core-infra-2E. ChuaLive49cb2MediumQ2 2026APACsys11m ago
#1022Core Infrastructure Revamp 23Stagingrg-core-infra-3E. ChuaIn Progress4d25dHighQ3 2026APACeu4nza12m ago
#1023Core Infrastructure Revamp 24Developmentrg-core-infra-4E. ChuaIn Progress50808MediumQ4 2026APACsys13m ago