0_Intro

BRAND BOOK

A Swiss / tech-brutalist system (after nickdimatteo.com) that holds the landing, dashboard, login and this page together. Free fonts: Space Grotesk + Space Mono. A living lab of every effect variant lives in the repo: docs/design/demo.html.

dropqt.rs•swiss / brutalist•matrix paradise• dropqt.rs•swiss / brutalist•matrix paradise•

1_Palette

Colors

Most used: black, canvas (#f1f1f1), signal red. The rest are category accents.

#f1f1f1 canvas

#000 ink

#fb1b15 signal

#ceff1a lime

#ffc914 yellow

#27bb60 green

#2672e2 blue

#a365f2 purple

#f3743f orange

2_Typography

Scale

Display / Space Grotesk 700 Heading / Space Grotesk 500 Body / Space Grotesk regular - running text. Label / Space Mono uppercase tracking .15em

3_Cut-corner cards (clip-path)

2024 - w/ Studio

Project A

cut bottom-right corner (.cut)

2023 - w/ Agency

Project B

cut bottom-left corner (.cut-l)

4_Signature moves

moveLines - animated diagonals as a semi-transparent layer (.movelines)

HERO + LINIJE

mix-blend-mode: difference - white text inverts over any color

INVERT

flicker - CRT flickering (accents, indicators)

■ REC - flickers on a loop

toWidth - a progress bar that fills up (loading, progress)

band-lines - a thin animated band separating sections

5_moveLines lab

Variants

Every diagonal-line variant from demo.html - pick to taste (direction, density, speed, color).

V1 · 45° thin / slow

V2 · 45° bold / fast

V3 · 90° vertical

V4 · 0° falling

V5 · -45° reverse

V6 · dense / very fast

V7 · lime on black

V8 · red on black

V9 · crosshatch (2 layers)

6_Circular / black hole

Radial and conic variants: vortex, concentric rings, dark core (accretion disk).

C1 · rings / pulse

C2 · vortex + core

C3 · 2-layer vortex

C4 · dense / fast

C5 · rings suck-in

7_Code / matrix black hole (pure CSS)

Text layer + radial mask + rotation. Cheap: 1 element, transform animation only.

01ｱ10ﾊ01ｳ110ﾐ01ｦ10ｴ＜＞01ﾝ10ｷ01ﾘ10ﾆ01ﾍ10ﾋ＝01ｾ10ﾂ／01ﾌ10ｿ＼01ﾙ10ﾚ01ｱ10ﾊ01ｳ110ﾐ01ｦ10ｴ＜＞01ﾝ10ｷ01ﾘ10ﾆ01ﾍ10ﾋ＝01ｾ10ﾂ／01ﾌ10ｿ＼01ﾙ10ﾚ01ｱ10ﾊ01ｳ110ﾐ01ｦ10ｴ＜＞01ﾝ10ｷ01ﾘ10ﾆ01ﾍ10ﾋ＝01ｾ10ﾂ／01ﾌ10ｿ＼01ﾙ10ﾚ01ｱ10ﾊ01ｳ110ﾐ01ｦ10ｴ＜＞01ﾝ10ｷ01ﾘ10ﾆ01ﾍ10ﾋ＝01ｾ10ﾂ／01ﾌ10ｿ＼01ﾙ10ﾚ

H1 · swirl (brand, light)

10ﾊ01ｳ110ﾐ01ｦ10ｴ＜＞01ﾝ10ｷ01ﾘ10ﾆ01ﾍ10ﾋ＝01ｾ10ﾂ／01ﾌ10ｿ＼01ﾙ10ﾚ01ｱ10ﾊ01ｳ110ﾐ01ｦ10ｴ＜＞01ﾝ10ｷ01ﾘ10ﾆ01ﾍ10ﾋ＝01ｾ10ﾂ／01ﾌ10ｿ＼01ﾙ10ﾚ01ｱ10ﾊ01ｳ110ﾐ01ｦ10ｴ＜＞01ﾝ10ｷ01ﾘ10ﾆ01ﾍ10ﾋ＝01ｾ10ﾂ／01ﾌ10ｿ＼01ﾙ10ﾚ01ｱ10ﾊ01ｳ110ﾐ01ｦ10ｴ＜＞01ﾝ10ｷ01ﾘ10ﾆ01ﾍ10ﾋ＝01ｾ10ﾂ／01ﾌ10ｿ＼01ﾙ10ﾚ

H2 · matrix rain (dark, lime)

110ﾐ01ｦ10ｴ＜＞01ﾝ10ｷ01ﾘ10ﾆ01ﾍ10ﾋ＝01ｾ10ﾂ／01ﾌ10ｿ＼01ﾙ10ﾚ01ｱ10ﾊ01ｳ110ﾐ01ｦ10ｴ＜＞01ﾝ10ｷ01ﾘ10ﾆ01ﾍ10ﾋ＝01ｾ10ﾂ／01ﾌ10ｿ＼01ﾙ10ﾚ01ｱ10ﾊ01ｳ110ﾐ01ｦ10ｴ＜＞01ﾝ10ｷ01ﾘ10ﾆ01ﾍ10ﾋ＝01ｾ10ﾂ／01ﾌ10ｿ＼01ﾙ10ﾚ01ｱ10ﾊ01ｳ110ﾐ01ｦ10ｴ＜＞01ﾝ10ｷ01ﾘ10ﾆ01ﾍ10ﾋ＝01ｾ10ﾂ／01ﾌ10ｿ＼01ﾙ10ﾚ

H3 · swirl (dark, red ring)

8_Matrix rain (canvas, light)

White background, greyish glyphs, darker head + trail. ~40 lines of JS, pauses off-screen.

MATRIX RAIN / LIGHT

9_Usage rules

- Section labels: mono uppercase in the format 0_Intro, 1_Palette (gray, subtle).
- Labels/nav/numbers: Space Mono uppercase, tracking .1em-.15em. Headings: Space Grotesk, tracking-tight.
- Red (signal) is an accent: hover, indicators, one element per screen - not a background for large areas.
- Cut-corner direction alternates (.cut bottom-right / .cut-l bottom-left) so cards "breathe".
- Full-width sections, separated by a thin black line; the first has no top line.
- Matrix paradise (Pixi) is background atmosphere (landing/login), never under small text without a readability layer.