E | T DIGITAL · DESIGN SYSTEM

Clear systems. Dreamlike experiences.

Editorial structure connects dark ink, restrained collage, and selective tactility. ARCH // GLITCH CORE remains a distinct project theme.

Brand foundations

E | T Digital is the global portfolio brand: a professional editorial base, dreamlike material accents, and a very rare signal. UI, text, and data remain native HTML, CSS, or SVG.

70–80% of the canvas uses ink and quiet opaque surfaces.
Texture is local to an image, CRT, or transition—never across the reading core.
Acid lime marks an active or verified state and is always paired with shape or a label.

E | T Digital colour system

Samples and displayed values are read directly from the same CSS token file that powers the interface.

InkPrimary canvas#0f1116Canvas reference

CreamPrimary text and paper#e6e1d614.48:1 on ink

Powder blueInformation accent#8fa8bf7.66:1 on ink

LavenderInteraction and focus#9688ca6.00:1 on ink

BlushEditorial craft accent#b87a875.55:1 on ink

Dusty roseDecorative secondary accent#c46a7e5.13:1 on ink

Moss rawLarge shapes and decoration#657a403.97:1 on ink · not for normal text

Moss UIAccessible text and icons#738a494.91:1 on ink

Acid limeRare active or verified signal#c4ff6616.04:1 on ink

Editorial voice, technical precision

Fraunces is limited to short portfolio headings. Manrope carries UI and body copy; JetBrains Mono carries labels and code. The manual keeps Manrope for its headings too.

Clear systems.

Legible copy for complex products.

ARCH_LINUX / SYSTEM_READY

type-editorialclamp(3rem, 7.5vw, 7.5rem)

type-displayclamp(2.75rem, 5vw, 5rem)

type-h2clamp(1.75rem, 2.7vw, 2.7rem)

type-h3clamp(1.18rem, 1.55vw, 1.48rem)

type-body-lgclamp(1.04rem, 1.3vw, 1.2rem)

type-body1.0125rem

type-small0.875rem

type-caption0.75rem

4px rhythm

Spacing is limited to the documented scale. Controls are at least 44px high and body copy stays near 60–75 characters per line.

1 / 0.25rem

2 / 0.5rem

3 / 0.75rem

4 / 1rem

6 / 1.5rem

8 / 2rem

12 / 3rem

16 / 4rem

24 / 6rem

↳

Grid and shared geometry

12 columns on desktop, 8 on tablet, and 4 on mobile. Narrow layouts follow document order.

grid-columns12

grid-gap1.5rem

page-gutter2rem

control-height2.75rem

radius-control0.25rem

radius-card0.25rem

card-padding1.5rem

Quiet surfaces

Cards share one radius, padding scale, and opaque surface. Elevation is reserved for overlays.

CONTENT

A quiet content card without decorative elevation.

Contrast and an edge are required.

PROJECT

Title, description, metadata, and one clear action.

Contrast and an edge are required.

CONTROL

An explicit boundary and minimum height from shared tokens.

Contrast and an edge are required.

OVERLAY

Elevation is reserved for open navigation.

Contrast and an edge are required.

Decorative motif system with a flower, moss arch, pink star, paper, CRT, wildflowers, and cables — Motifs are individual atmospheric materials; UI and data remain HTML, CSS, or SVG.

Components and states

Every interactive family shares border, radius, elevation, and focus tokens. Active state is never communicated by colour alone.

Primary action Secondary action

Motion explains state

Micro feedback runs 110–220ms, page swaps use 300ms, and the portal is capped at 420ms. Reduced motion removes spatial movement.

110ms / PRESS140ms / HOVER180ms / CONTROL220ms / REVEAL300ms / PAGE420ms / PORTAL MAX

Accessibility is a contract

Normal text reaches 4.5:1; large labels and essential boundaries reach 3:1. Focus uses a 3px offset outline and every control remains keyboard accessible.

TEXT ≥ 4.5:1UI ≥ 3:1TARGET ≥ 44pxFOCUS = OUTLINE + OFFSET

ARCH // GLITCH CORE

The indigo–lime system is the case-study and manual project theme, not the global E | T Digital identity. The manual Theme page documents the real external desktop system, so its values intentionally differ from these web UI tokens.

ARCH inkProject token#10162a

Glitch indigoProject token#34365b

System lavenderProject token#a79fca

System limeProject token#b7ee35