Book a call

Branding

The brand, on one page.

A brand is how a company behaves, written down. The voice came first, and the visual system was built from it, not chosen and retrofitted.

  • Luxury

    enough to feel exceptional

  • Technical

    enough to feel capable

  • Art-directed

    enough to feel memorable

  • Unexpected

    enough to feel like Ravoren

Foundation

What it stands on.

Six facts that don’t move. Everything else on this page is downstream of them.

Name

Ravoren

RAV-or-en. Never Raveron.

Descriptor

An independent product and systems lab

Essence

Build with intent. Deliver with certainty.

Promise

Give us the problem. We’ll figure out the rest.

Belief

We figure it out.

The rule behind everything, not a tagline.

Founded

2026

The name

It means nothing. That’s the point.

Rauron lost on the phone test. Nobody could spell what they heard.

  1. Ra
  2. Rauron
  3. Avoren
  4. Ravoren

Ra

Light, radiance, creation.

vor

Forward motion.

en

An ending that sounds established.

Ravoren has no dictionary meaning, deliberately. Figma, Vercel and Notion all built their own. Ours is radiant progress: building with clarity, and systems in motion.

The mark

The orbit is the O.

The orbit is the O. Not an icon next to the word, not a monogram: the letter itself.

  • Two elliptical paths, crossing at an angle.
  • Two planets: the larger upper right, the smaller lower left.
  • Hairline paths. One or two points, never a solar system.
  • The O never rotates. The orbit is the part that moves.

What it isn’t

  • A falcon
  • An R monogram
  • Gradients
  • A sun
  • Wings

The voice

Measured, not vibed.

Four traits in fixed proportion, over a base of competence. Without the competence, flamboyance reads as arrogance and the humour stops landing.

Base: competence

35Flamboyant
Bold, expressive, a little unexpected. Presence, not volume.
30Witty
Sharp, dry, occasionally absurd. Never trying.
25Reliable
Calm competence. Ownership. We’ve got it.
10Effortless
No over-explaining. No ceremony.

How it’s written

Direct, then clever, then sideways.

One thought in three moves. Most Ravoren paragraphs are this shape.

  1. Direct

    Say the thing.

    Your website isn’t broken. It’s just having a bad day.

  2. Intelligent

    Show the thinking.

    We could redesign it. Or we could figure out why it’s not working first.

  3. Unexpected

    Land it sideways.

    Turns out, pretty isn’t a conversion strategy.

  1. Confident, never arrogant

    Not this

    We are a leading digital transformation company delivering cutting-edge solutions.

    This

    We build things that work.

  2. Intelligent, never complicated

    Not this

    Leveraging next-generation AI-powered infrastructure.

    This

    We make complicated things feel simple.

  3. Warm, never corporate

    Not this

    Please feel free to contact our team regarding your requirements.

    This

    Got something worth building? Talk to us.

  4. Premium, never pretentious

    Not this

    Where innovation meets unparalleled excellence.

    This

    Thoughtfully built. Made to last.

  5. Witty, but controlled

    Not this

    We’re a fun bunch. Work hard, play harder.

    This

    We like complicated problems. They’re more interesting.

How far it goes

Confident, up to a point.

The same claim at six strengths. Too quiet is as much a failure as too loud, and the brand book keeps one rung past the last of these for our own writing.

  1. We make websites.

    Too flat to use

  2. We make websites. Occasionally, we make them very good.

    Too flat to use

  3. We make the sort of websites your competitors quietly bookmark.

    In range

  4. We could make your website prettier. We could also fix the reason it’s not selling.

    In range

  5. Your website probably isn’t the problem. The person who built it might be.

    In range

  6. Another beautiful website nobody knows how to use. Lovely.

    The far edge

Personality

Funny is nowhere near the top.

The order matters. Humour is a behaviour the competence allows, not the personality itself.

  1. Observant

    Sees what everyone else missed.

  2. Gets it done

    Doesn’t discuss the problem forever.

  3. Trusted

    People hand it the complicated thing.

  4. Smart

    Knows why something shouldn’t be built.

  5. Charismatic

    Interesting to work with.

We are

  • Observant
  • Capable
  • Magnetic
  • Fast-thinking
  • Problem-oriented
  • Honest when it’s a bad idea
  • Comfortable saying no
  • Calm under pressure

We are not

  • Your trusted digital partner
  • We empower brands
  • Startup bro
  • Forced memes
  • Pretentious luxury
  • Look how creative we are
  • Desperate for the work
  • Buzzword-heavy

Humour

Never tell anyone you’re being funny.

Say something serious in a way that happens to be funny. The joke comes from confidence and absurdity, never from reaching for a joke.

  • We throw experience at problems. An unreasonable amount of coffee helps.
  • This is going to be a pain in the ass. We’ll love it.
  • Yes, it’s possible. The question is whether it should be.
  • We’ve built harder things.

Never

  • Memes
  • Pop culture
  • Slang
  • Emoji in headlines
  • Jokes in the hero

Vocabulary

Words we use, words we won’t.

If a LinkedIn guru would put it in a carousel, we don’t say it.

Use

  • Figure out
  • Build
  • Engineer
  • Systems
  • Problems
  • Ideas
  • Reliable
  • Work
  • Experience
  • Direction
  • Craft
  • Momentum
  • Clarity
  • Ship

Avoid

  • Empower
  • Transform
  • Innovative
  • Cutting-edge
  • Digital partner
  • Holistic
  • Seamless
  • Disrupt
  • Synergy
  • Solutions
  • Passionate
  • Crafting experiences
  • Best-in-class
  • End-to-end

Lines

Territory, not taglines.

None of these is the tagline. The tagline gets chosen once we know exactly what the brand is trying to own.

  • Give us the problem. We’ll figure out the rest.
  • If we’re handling it, you don’t have to worry about it.
  • Outsource the stress.
  • We build the things that shouldn’t be this difficult.
  • You point. We ambush.
  • You don’t need to know how. That’s our job.
  • Good work shouldn’t require supervision.
  • The less you have to worry about, the better we’ve done our job.
  • Beautiful is nice. Useful is better.

The edges

Trustworthy up front. Personality at the edges.

The first impression is confidence, the second is personality. These are this site’s own strings, not examples.

Loading
Loading…
Making pixels earn their keep…
404
Page not found.
Well, this page ghosted us too. Let’s get you somewhere better.
Empty state
No results.
Nothing here yet. The internet finally found some peace and quiet.
Success
Form submitted successfully.
Nice. That went smoother than most Monday mornings.
Contact form
Fill in the form below and we will be in touch.
Tell us what you’re building. We’ll bring the coffee. (Metaphorically.)
Submit
Submit
Let’s build.

Colour

Seven colours. Gold is earned.

Text is ink. Radiance and copper are for graphics and whole-element hover states, never for splitting a line into two colours.

  • obsidian

    #0b0b0b

    depth, focus

  • graphite

    #1e1e1c

    structure

  • earth

    #2e2a25

    warmth

  • radiance

    #c9a968

    energy: the accent, used sparingly

  • stone

    #e7e1d9

    clarity

  • copper

    #8a5e3b

    heat: decorative on dark, never small text

  • orbit

    #3f4a46

    the unexpected note

Text-safe tints, contrast checked

  • stone-soft#b5afa69.0:1 on obsidian
  • stone-muted#8c877f5.5:1 on obsidian, 4.7:1 on graphite
  • ink-soft#3a36319.2:1 on stone
  • ink-muted#5f5a535.3:1 on stone
  • copper-ink#7a4e2e5.5:1 on stone
  • alert#e8a283form errors, 9:1 on obsidian

Type

Three faces. No italics.

A highlighted phrase changes face, never colour. Nothing is ever set in italics, so the browser is told not to fake any.

  • Cormorant Garamond

    Display. Headlines, the wordmark, editorial moments.

    Figure. Build. Ship.

  • Manrope

    Everything you read, metadata included.

    We build the things that shouldn’t be this difficult.

  • Suhon

    Highlights only, one phrase at a time. Cormorant Garamond Light stands in until the files land.

    systems in motion

The scale, as the browser computes it

  • fs-heroclamp(3.1rem, 1.35rem + 7.2vw, 10.25rem)Ra
  • fs-h1clamp(2.75rem, 1.4rem + 5.4vw, 7.5rem)Ravoren
  • fs-h2clamp(2.25rem, 1.3rem + 3.9vw, 5.5rem)Ravoren
  • fs-h3clamp(1.6rem, 1.15rem + 1.7vw, 2.75rem)Figure. Build. Ship.
  • fs-leadclamp(1.125rem, 1rem + 0.55vw, 1.5rem)The lead that carries a section.
  • fs-bodyclamp(1rem, 0.97rem + 0.15vw, 1.0625rem)Body copy, which is most of what anyone reads.
  • fs-small0.875remSmall print and notes.
  • fs-meta0.75remMetadata · 23.0225° N

Motion

Long decelerations. No bounce.

Motion carries hierarchy and feedback, not decoration. Ask for reduced motion and the site renders its final state instead of a shorter animation.

  • ease-out

    cubic-bezier(0.22, 1, 0.36, 1)

  • ease-orbit

    cubic-bezier(0.32, 0.72, 0, 1)

  • ease-in-out

    cubic-bezier(0.65, 0, 0.35, 1)

Durations

  • dur-1160ms
  • dur-2320ms
  • dur-3600ms
  • dur-4900ms

The six principles behind all of this, and what working with us feels like, are on thestudio page.

Next

Got something worth building?

Bring us the difficult one.

Talk to us