Room 17 · Independent creative practice · Concept
Pigment & Static
Colour with the volume up.
Pigment & Static, a fictional creative practice whose headline reshapes letter by letter under the cursor, with eight projects shown as drawn colour plates.
Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.
01 The brief
- The brand
- Pigment & Static is a fictional independent creative practice working in identity, digital and experimental projects. Its tagline is "Colour with the volume up."
- The problem
- A studio is judged on taste and range. The site has to look unlike a template and still be readable, filterable and usable for sending a brief.
02 The idea
Living type that leans toward the cursor
- What you see
- The home headline changes width and slant letter by letter as the pointer moves over it, and the letter nearest the pointer takes the ochre accent. Width and Slant sliders do the same job without a pointer.
- How it works
- Each letter is its own span driven by one animation loop, using the width axis of Anybody and a per-letter skew, since the font has no slant axis. The full text sits in the heading for assistive technology and the letter spans are hidden from it.
03 Design system
- Darkroom black#0E0E0E groundPage ground.
- Paper ink#F4F1EA inkAll text and primary buttons.
- Ochre#D99A2B accentFocus ring, pressed chips and the letters near the pointer.
- Muted grey#9A968D mutedSecondary text and resting borders.
- Panel #19191B. Flat container tone.
- Bar mint #9FE3C1. Footer colour bar and band.
- Bar violet #4B2E83. Footer colour bar.
- Type
- Anybody
Headlines and project titles, wide and heavy, set lowercase. - Ubuntu Sans
All reading text, labels and forms.
- Anybody
- Edges
- Square corners everywhere, 2 px bordered controls, no shadows or gradients. Saturated colour lives in the project plates, with a grain layer over each.
- Motion
- Only display type and plate backgrounds move. Body copy and controls stay still, and motion freezes when the tab is hidden or the user prefers reduced motion.
04 Process
Pre-production
Pre-production weighed seven art directions and pinned the variable-type specimen. It also set guards against flat black plus neon and against resembling Artlogic, then specified the living headline and its fallbacks.
Build
The site was built from the plan: 6 route templates, a filterable work page, eight project stories, services, studio and a brief form.
Finish review
Impeccable finish-review rounds checked the built pages against the direction and the guards.
Fixes
The review produced an ordered list of fixes, applied and then checked again.
05 Technology and accessibility
- Stack
- Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
- Particular to this site
- Variable-font width axis with per-letter skew
- Project plates authored as inline SVG from data
- SVG feTurbulence grain
- Access
- Full headline text for assistive technology, letter spans aria-hidden
- Width and Slant range sliders as a pointer-free alternative
- Filter chips are buttons with aria-pressed and a status region
- Skip link and visible focus styles
- Reduced-motion media query turns the type effect off
- Tests
- Covered by its own Playwright end-to-end spec and a unit test file for its logic.
06 Honest notes
Pigment & Static is a fictional brand and this is a concept project by Artlogic. Every project, client and result is invented, and the practice is deliberately unlike Artlogic.
The brief form is a demo. It says so on the page and stores nothing.
There is no photography, stock or generated. Stock photos would imply real client relationships, so all work is original SVG plates made in code. No video file has been produced.
07 See it
Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.