// Design System

GRAPHICAL CHART

Visual identity guidelines for the RXMN creative studio.

01

Colors

A restrained palette built on deep blacks and precise accent tones. Every color serves a purpose — obsidian grounds, signal communicates, UV activates.

Obsidian #080808 Primary background
Carbon #141414 Secondary surfaces
Graphite #262626 Borders & dividers
Signal #FFFFFF Primary text & headings
Steel #B3B3B3 Body text
Muted #666666 Captions & metadata
UV #4200FF Accent & interactions
Void #180033 Deep accent background
Alert #FF2D2D Critical actions & errors
02

Typography

One typeface defines the RXMN voice. Helvetica Neue handles everything — from display to interface — with quiet precision.

Display / Body / Interface Helvetica Neue
Light 300 Roman 400 Bold 700

PRECISION IS NOT ABOUT CONTROL

Precision is not about control — it's about letting creativity breathe within constraints. Every pixel, every frame, every decision serves the vision.

Type Scale
display Aa 96px / 1.0 / 0.02em
h1 Aa 48px / 1.1 / 0.04em
h2 Aa 32px / 1.2 / 0.05em
h3 Aa 20px / 1.4
body Aa 16px / 1.6 / -0.01em
tech Aa 12px / 1.5 / 0.05em / uppercase
03

Spacing & Layout

Fluid spacing using CSS clamp() ensures consistency across viewports. The grid uses a 10-column layout with 2vw gutters. Generous whitespace is a core principle — content breathes within the obsidian canvas.

01 10-Column Grid Navigation and layout built on a 10-col system with 2vw gap
02 Fluid Sizing clamp() for all spacing and typography to scale smoothly
03 Thin Borders 0.5px lines at 6-10% white opacity define structure
04 Crosshair Cursor Precision cursor reinforces the studio's technical identity
04

Visual Language

The RXMN aesthetic is rooted in technical precision and cinematic minimalism. Dot-matrix patterns, monochromatic photography, and controlled motion define the visual vocabulary.

01 Dot Matrix Canvas-rendered point grids as decorative texture, referencing CRT displays
0.5px
02 Thin Borders 0.5px lines at 6–10% white opacity define structure without weight
// Navigation
03 Glass & Blur backdrop-filter blur for overlays and navigation, layered transparency
original
→
grayscale(10%)
04 Monochrome First Photography desaturated with subtle contrast adjustments: grayscale(10%) + contrast(1.05)
01 // Projects
02 // Experimentation
03 // Team
04 // Contact
05 Index & Labels Systematic 01, 02... numbering with // prefix syntax, uppercase tech font at 12px
06 GSAP Motion Staggered fade-ins, text scramble effects, and ScrollTrigger reveals on all pages

This system is a living document — it evolves with the studio.

← Back to home