unbelievablycrap.com

Overview

Liubomyr Ulytskyi presents his practice as a surveillance console: a designer's portfolio staged as a tracked subject. The aesthetic is a deliberate HUD-noir, closest to Scanline Brutalism crossed with a monochrome CRT readout. A scanned, scanline-striped human figure stands in a pure black void, framed by corner brackets, coordinate tags, and monospace telemetry, and the interface reads as if it were logging the viewer. The emotional response is watchfulness and mild unease, delivered with a dry joke rather than menace.

The voice is deadpan, self-aware and literary. Sentences are short, declarative and slightly theatrical ("He wasn't.", "Attention is not given. It is taken."), with case-file phrasing ("CASE FILE: THE MAN BEHIND THE IMAGE") and the brand's name carried in its URL. Copy lines are staggered in alternating left and right columns and revealed one line at a time. Example sentence: "He preferred the uncomfortable one. The one that made the room quieter."

Colors

The canvas is pure black (#000000) with light grey ink (#c8c8c8) for body and about copy; the wheel and photography pages instead use a white-to-fog gradient (#ffffff to #afafaf at 162.59%). Primary (#e8271c, the --ui-red token) is the only chromatic accent and is reserved for interactive elements: the primary CTA text on black, the active index marker, the text selection fill and the red-over-grey saturation effect on the figure. Secondary (#c8c8c8) carries structural copy and hairline HUD labels. Tertiary (#636363 and #afafaf) is the muted label tier for coordinates, clock digits and disabled telemetry, and never carries a fill. Do not introduce any second hue; the figure's own colour fringing is the only other colour on screen.

Surface stack: a single black base with no elevated contai

Typography

The entire system runs on PP Supply Sans for display and copy and PP Supply Mono for telemetry, both at weight 400 with a light Ultralight (200) variant reserved for the largest decorative numerals. The display tier is 128px with line-height 0.5 (glyphs overflow the line box by design) and letter-spacing -0.04em (-5.12px), uppercase. Apply the gradient fill described above to display lines so the second line sits in the lighter stop range. Small labels at 10px with line-height 10px and letter-spacing -0.04em read as instrument markings; set them in uppercase and never above 14px. Body copy is 16px to 18px with normal leading. The pairing communicates a neutral grotesk voice (the designer) overlaid on a monospace instrument readout (the surveillance frame).

Layout

The layout is a fixed single-screen model at 100svh with overflow hidden on body; content is positioned absolutely around a central figure canvas rather than flowed in a grid. The reference container is 1280px wide with a 12-column rhythm and a 16px gutter. Corner brackets, coordinate tags and clock sit at 10px to 33px insets from the viewport edges. Section rhythm uses the sm (6px) and md (10px) steps between HUD elements and lg (16px) to xl (24px) between columns of copy. Copy columns stagger horizontally by 662px translate offsets on alternating lines to create the zig-zag reading path.

Elevation & Depth

There are no shadows and no blur. Depth is conveyed by layering and by scanline texture: the grain overlay sits above all content as a persistent noise layer, and the figure carries a red-over-grey saturation effect (#e8271c applied to a dithered grey) plus horizontal scanline striping. Hierarchy is communicated by brightness steps (#c8c8c8 for primary copy, #636363 for labels, #393939 for rules) instead of elevation tokens. Do not add box-shadow to any component.

Shapes

Shape philosophy: Architectural Sharpness. Every radius is 0px, so buttons, cards and inputs are hard-edged rectangles. The only rounded forms are circular status dots (9999px) used in the clock indicator. Hairline corner brackets (roughly 8px legs at 1px stroke) substitute for container borders, framing the figure and the photographic tiles.

Components

Action Elements The primary CTA is the small uppercase label "DON'T CONTACT ME +" rendered at 10px with letter-spacing -0.4px, background #000 and text #ff0000, padded 0 0 0 10px with a trailing plus glyph. On hover the background flips to #e8271c with text switching to #000 over a 120ms linear transition. The secondary navigation items (INDEX +, WORK +, GALLERY +, ERROR +) use the same type scale in #c8c8c8 and reveal their plus glyph rotating 90deg over 200ms on hover.

Containers & Surfaces Cards are flat #111111 rectangles with no radius and no border; the active project tile is marked with a 1px #393939 rule and four corner brackets rather than a fill change. Card hover raises the surface to #1a1a1a over 240ms ease-out. HUD readout panels are transparent with 1px #393939 rules

Do's and Don'ts

**Do**

• Do reserve #e8271c for interactive and active states only, so the red keeps its signal value.
• Do keep every radius at 0px and separate content with 1px #393939 rules or corner brackets.
• Do stagger copy lines in alternating columns with 662px offsets and a 1600ms reveal, as the intro does.
• Do pair PP Supply Sans display headlines with PP Supply Mono telemetry at 10px for every HUD label.

**Don't**

• Don't add box-shadow, blur or gradient fills to containers; depth comes from brightness steps and scanlines.
• Don't introduce a second accent hue; the only colour is #e8271c plus the figure's own fringe.
• Don't render HUD labels above 14px or below 10px, or change their letter-spacing away from -0.04em.
• Don't show a hand or grab cursor on the wheel or sphere, since the interaction is scroll-driven.