Every click, considered.
44px minimum target · 160ms press · 240ms hover
One identity.
Infinite possibility.
A shared language for a creative house.
Rooted in the Onihaus identity. Made to move.
Deep greens. Warm golds. Room to breathe.
Clear words, bold scale and thoughtful interaction.
01 / COLOUR & MATERIAL
A familiar feeling.
The original Onihaus palette, extended for an editorial website. Select a swatch to copy its value.
FROSTED / 16PXA little depth.
A little depth.
A clear purpose.
For floating labels and navigation.
PAPER / SOLIDSpace for
Space for
the story.
For readable content, forms and project detail.
02 / TYPOGRAPHYSay more.
Say more.
With less.
Inter carries the identity. Weight 400 for display, 500 for actions, 600 for emphasis. Monospace labels add structure.
DISPLAY / 122 → 64
Big ideas.
HEADING / 84 → 42
A creative home.
SUBHEADING / 32 → 24
Your next chapter.
BODY / 16 · 1.7
From your first impression to your next enquiry, thoughtful marketing connects every part of your story.
LABEL / 10 · 0.12EM
INDEPENDENT THINKING. CONNECTED MARKETING.
03 / SPACE & SHAPE
Room to breathe.
A 4px foundation. Generous editorial spacing. Soft corners that stay consistent across every touchpoint.
04
08
12
16
24
32
48
64
8pxSmall controls
16pxProject cards
24pxPanels & dialogs
PillActions & filters
04 / COMPONENTSSame family.
Same family.
Different roles.
Real interactions. Shared tokens. Native semantics and visible keyboard focus.
A clear change of mind.
Start with the right question. Find the idea that gives everything a direction.
Make the next step easy.
Details, when needed.
What makes a component feel right?+
A useful default, instant feedback, keyboard support and consistent spacing. Small decisions add up.
How does this adapt to mobile?+
Columns stack, touch targets stay comfortable and hover effects remain optional.
05 / MOTION LAB
Made to respond.
Motion reveals relationships and gives feedback. Test the same timing language used throughout the website.
A little certainty.
Immediate response, followed by a clear confirmation.
One step at a time.
01 — Find the focus
02 — Make it matter
03 — Keep moving
An invitation to explore.
Explore the work ↗Mouse hover and keyboard focus share the same response.
A change of context.
Focus stays inside. Escape closes it. Your place is preserved.
--ease: cubic-bezier(.23, 1, .32, 1);
--press: 160ms;
--transition: 240ms;
--reveal: 800ms;GSAP + ScrollTrigger for page sequences.
Lenis for desktop scroll smoothing.
CSS for component feedback. Native video for the cinematic opening.
Reduced motion disables decorative animation.
06 / GUIDELINES
Built with intention.
01 / Voice
Clear Australian English. Warm, direct and specific. Explain the offer. Avoid invented results, testimonials or guarantees.
02 / Imagery
Real client work takes centre stage. Full creatives remain available inside the project view. Keep source attribution with every asset.
03 / Access
Visible focus. Labelled controls. Keyboard navigation. Respect reduced motion. Gold is an accent; green carries small text on paper.
04 / Responsive
Fluid type and gutters. One shared portfolio stage with six logo selectors. A large media preview and thumbnail mosaic sit side by side on larger screens and stack on mobile. Use natural scrolling and keep contact actions within reach.