Room Twenty Two / Living brand guidelines

Brand guidelines.

A clear visual identity for an independent creative production studio — rebuilt as a living, moving system.

Enter the guidelines
Room Twenty Two / Creative production Experimental first version · 2026

03 / Colour

Black first.
Orange with intent.

A distinctive palette designed to frame the work, never compete with it. Explore a colour to immerse the whole chapter in it.

Six colours, exactly as documented. Band widths are illustrative of “black first” — not a prescribed ratio.

Contrast laboratory

Every pairing in the palette, measured with the WCAG 2.2 contrast formula. Select a cell to preview it.

Made for ambitious ideas.

We bring the craft, flexibility and production experience to deliver everything from a single hero asset to a complex campaign rollout.

Ratio
—
Body text
—
Large text
—

04 / Typography

Clear,
confident type.

A considered mix of bold, contemporary typography creates a clear hierarchy and a distinctive tone across all applications.

Aa

Aeonik Pro Bold

Headlines and key statements.

Aa

Aeonik Pro Regular

Introductions and supporting titles.

Aa

Manrope Regular

Body copy and practical information.

Checking which typefaces this device can render…

PlaygroundType directly into the specimen.

Made for ambitious ideas.

Hierarchy
Presets

05 / Functional UI

Distinctive
by design.

Simple, modern components built from our core colours, type and rounded corners. Each one is fully working, and each motion demonstrates a single principle. Keep interactions simple and purposeful.

Magnetic pull + arrow relayDraw attention without shouting. The arrow leaves and returns — forward motion, made literal.
Character rollText rolls through itself on hover or focus, confirming intent before the click.
Direction-aware fillOrange floods in from wherever you arrive — the interface responds to you, not a fixed script.
Drawn outlineThe border traces itself in one continuous stroke, borrowing the language of the light-trace study.
Expanding affordanceThe card arrow from the guidelines expands to reveal its label: compact at rest, explicit on intent.
Geometric transformationThe mark’s two shapes part and rejoin. Experimental
Selectable tags with drawn checkState is never colour alone: a check draws in as the pill fills, and the change is announced.

We’ll only use this to reply. (Demo — nothing is sent.)

Input with live validationPersistent label, orange focus, a short shake and a written message on error — never colour alone.
Spring switchThe thumb stretches as it travels, then settles — physical, but quick. State is written, not just coloured.
Copy confirmationThe icon hands over to a drawn check, so the result of the action is visible where your eye already is.

Icon motion studies

The six icon roles from the guidelines, drawn with genuine Lucide outline icons — 24px grid, 2px stroke, rounded caps and joins, Room Orange. Hover, focus or tap each one to replay its motion.

Icons: Lucide · ISC licence
Third-party artwork — kept separate from the R_22 mark.

06 / Applications

One system.
Any surface.

The same seven elements — lockup, headline, line, image, mark, action and detail — recompose themselves for each surface. Every element travels; nothing is redrawn.

Room Twenty Two / Creative production

Made for ambitious ideas.

Creative production. Thoughtfully delivered.

Explore our work

roomtwentytwo.com.au

Concept

—

07 / Closing

Built for
what’s next.

Creative thinking. Technical craft. Thoughtful delivery.

Typefaces, libraries & licences

Brand artwork
Room Twenty Two logos and dimensional imagery are the studio’s own approved assets, copied unaltered from the brand folders (imagery resized for web).
Headings
Aeonik Pro Bold and Regular — the studio’s supplied WOFF2 web-font files, self-hosted. Licensed by the studio for web use. Inter Tight (SIL Open Font Licence 1.1) is held only as a fallback.
Body
Manrope — SIL Open Font Licence 1.1, self-hosted.
Icons
Lucide — ISC licence. © Lucide Icons and Contributors.
Motion
GSAP 3 with ScrollTrigger, Flip, SplitText, DrawSVG, MorphSVG and ScrambleText — GreenSock Standard “No Charge” Licence.

Full notices are in LICENSES.md in the project folder.