RAULI Brand Guidelines

Logo

The RAULI logo is a white wordmark in a R'EDORANGE box. On dark surfaces, use the inverse version. Always keep a clear space of at least the height of the letter R.

Primary: R'EDORANGE box on light backgrounds.

Inverse: white wordmark on dark backgrounds.

The A icon can be used on its own, with or without the main logo. Variants: All In One, All Black.

Small logo in the corner of social visuals (top left or top right, roughly 6% margin). Let it act as a quiet signature. The logo can share the layout with a large product name.

One logo per surface. No repetition, no watermarks, no stretching, no drop shadows.

Don't

Don't recolor the logo. Only the two approved versions exist: R'EDORANGE box with white text, and white box with black text.

Keep clear space around the logo: at least the height of the letter R on every side.

Colors

Black and white with a dash of R'EDORANGE. High contrast gives a powerful, strong impact. Per surface: about 60% black or white, 30% grays and imagery, under 10% R'EDORANGE.

Black Almost

#0F0F0F · var(--black-almost) · Main dark backgrounds

Dark Grey

#202020 · var(--dark-grey) · Elevated dark surfaces, cards on black

Gray

#3C3C3B · var(--gray) · Secondary text on light, borders

Warm White

#ACACAC· var(--silverish · Text and surfaces on dark

White

#FFFFFF · var(--white) · Light backgrounds and text on dark

R'edorange

#E94E1B · var(--orange-red) · The accent. Use sparingly.

One orange

R'EDORANGE is always #E94E1B, the same value the website uses. Older files may contain #CC4B1D or #CD4F2A: replace them with #E94E1B when you touch those assets. For print, convert from #E94E1B (CMYK approximately 0,80,95,0).

Typography

Two typefaces cover everything: Bebas Neue Pro for headers, always uppercase with tight line height, and Acumin Pro ExtraCondensed for everything else. Fallback: Verdana. Fonts load from Adobe Fonts.

Header level one

H1-H2 · bebas-neue-pro 600 · uppercase · line height 0.9 · 6rem

Second level heading

H3 · bebas-neue-pro 600 · uppercase · 3rem

Subheader and leads use Acumin Pro ExtraCondensed in normal case.

Subheader · acumin-pro-extra-condensed · 1.6rem

Body text uses Acumin Pro ExtraCondensed. Short, punchy sentences. One idea at a time, facts first.

Body · acumin-pro-extra-condensed · 1.2rem

Make impact with white space

Keep it simple and modern. Empty space is the strongest tool in the RAULI look: three pages or three slides beat one crowded layout every time. Images speak, text condenses.

One idea per surface

Every slide, page or post carries one main message. The rest moves to the next surface.

Max 3 text elements

Header, subline and one optional highlight. No data dumps: a couple of figures at most.

Generous margins

Content breathes: at least 8-10% from the edges in social visuals, clear gaps between elements.

Elements

A small set of recurring elements keeps the look recognizable. Use with restraint: one accent per surface is enough.

Accent line

Short R'EDORANGE line (about 60 x 4 px). Always short, always max one per surface. A long thin line does not work. Leave clear space between the line and the text.

Highlight box

THIS IS THE BOX WITH TEXT

Bebas uppercase in an orange box. Only for special cases and section openers, not for every header.

Word highlight

KING OF the North.

The 1-2 most important words of a header can be in R'EDORANGE. The most effective way to bring color in without extra elements.

icons

Main icons are simple and thin with roundness in them; they soften the strong typography. Ready-made SVG and Lottie versions exist for EasyClick, EasySlide, Telescopic, Made in Finland and the 30-year warranty. Use them instead of drawing new ones.

Photography

Three photo worlds. Try to pick one world per publication, do not mix them.

Clean & Bright

Natural. References, installations, people and buildings: daylight, real situations, no heavy processing.

Dark & Sophisticated

Product shots on dark backgrounds, directed dramatic light, clean surfaces. Premium without gloss.

Authentic

Real photos from real sites: installers at work, tools, weather, drone views. Credibility beats polish.

Web

Base values picked directly from the production styles of raulibrackets.com so that new pages and embeds stay in line.

Buttons

Primary: R'EDORANGE background, white text, 4 px corner radius, 12 x 40 px padding, Acumin 19 px. Secondary: transparent with a thin light border. On this site: classes "submit-button" and "button".

Base values

H1/H2: bebas-neue-pro 600, uppercase, 6rem / line height 0.9. H3: 3rem. Body: acumin-pro-extra-condensed 400, 1.2rem. Dark backgrounds: #0F0F0F and #1D1D1D. Light text tone on dark: warm white #EBE8E7.

Sizing

Radius, spacing and layout are now Webflow variables (Base collection). Use them instead of typing pixel values, so rounding and rhythm stay consistent everywhere.

Corner radius

Radius/sm

4px · buttons, inputs, chips

Radius/md

8px · cards, image tiles

Radius/lg

20px · large containers, hero

Radius/pill

999px · pills, round chips

Spacing scale

Spacing/xs · 8px

Spacing/sm · 16px

Spacing/md · 20px

Spacing/lg · 40px

Spacing/xl · 80px

Layout

Layout/container-max 1440px · Layout/container-pad 40px · Layout/section-pad-y 8vw · Border/width 1px · Accent line 60 × 4px. Content sits in a 1440px max-width container with 40px side padding, exactly like the rest of the site.

Social templates

Four recurring templates cover almost everything. Every post works on its own, the language is English, and every slide follows the rule: one idea, max 3 text elements, one accent.

1. Statement

Dark product photo as background, big Bebas claim, 1-2 words in orange, short accent line, subline. For hero use and carousel openers.

2. Product list

Product names in Bebas uppercase, descriptive subline, orange line as separator.

3. Quote / reference

Reference photo as background, short quote in Bebas, name and place as the subline.

4. Fact

Light Clean & Bright base, one figure or claim, fact-based subline. For technical highlights and carousel inner slides.

Formats

Feed post 1:1 (1080x1080) or 4:5 (1080x1350), story 9:16 (1080x1920). Carousel: open with a statement slide, 3-5 inner slides, close with a CTA and the logo. Story safe zone: keep 250 px clear at the top and bottom.

"Campaign layer"

King of the North

A campaign layer on top of the design system: same typography, same logo, same rules, but the base message is that we are KING OF THE NORTH. Cold and toughness comes from photography and texture (snow, frost, low winter sun), never from color. The claim is earned with facts: SSAB steel, storm tested, Nordic snow loads, 30-year warranty etc.

Concept / Not Final

1. Statement. White base, snow photo fading in at the bottom or top, black headline.

Concept / Not Final

2. Winter photo. Full-bleed winter shot, black text on clean snow over a soft white scrim.

Concept / Not Final

3. Dark product. For product-focused KOTN posts: dark photo, white headline.

Single-color headlines only: black on light, white on dark. Orange appears only in the logo chip and the short accent line, as the one warm point in the cold.

King means being the best, king of the hill. Working lines: "King of the North.", "Best in the North.", "Built for exactly that."

Don't

No ice blue or any new campaign color in graphics. Cold lives in the photos, the palette stays black, white and R'EDORANGE.

Don't

No crowns and no royalty wordplay. And on photo backgrounds, text goes on clean snow or over a scrim: readability first.

Do & Don't

A summary of rules that are already proven to work, and mistakes we do not repeat.

One idea per slide. Less data, more space. Let the images speak.

Fact-based superlatives. "The most elegant flat roof system on the market" works when the claim holds: 30-year warranty, tested strength, SSAB steel.

Use the slogan: "Trusted by professionals, chosen by installers." or "King of the north".

In Finnish copy: FLAT brackets are "paistetaan" into the bitumen membrane, never "poltetaan".

Don't

No long thin lines. The accent line is always short (~60 px) and there is at most one.

Don't

No em dashes and no AI cliches in any copy. Keep technical facts straight: heat welding belongs to FLAT and BLACK bitumen installs, WALL mounts with EasySlide.

Voice

Professional but approachable. From installers to installers: direct, concrete, confident. Main language on social is English; Finnish is used in the home market.

Slogan

KING OF THE NORTH. Trusted by professionals, chosen by installers.

Key messages

Quick to install · made in Finland · 30-year warranty · SSAB Nordic high-strength steel · Designed by installers · Built for northern conditions

Sentence structure

Short, punchy sentences. One idea at a time. No long explanations, no nested clauses.

Product family

BLACK (pitched roofs) · FLAT (flat roofs) · WALL (facades) · TAILOR-MADE · RAULI APP · NOVA (pitched roofs, Central Europe, 25-year warranty)

Features

EasyClick · EasySlide · Telescopic · Double Safety. Always written exactly like this.

Certifications

Proof, not adjectives. Lead with the marks that back the claims. Place badges on white or light surfaces, keep them un-recolored, and give them room to breathe.

Certifications held: CE · ISO 9001 · ISO 14001 · EPD · EMI · TÜV SÜD (PV mounting). Warranty: 30 years, 25 years on NOVA. Steel: SSAB Nordic high-strength steel, corrosion class C3.

Certified Partner program

Four partner tiers, each with its own metal color and badge. Use the official badge; the tier color belongs to the badge only, not to general layouts.

Bronze

#A06D00

Silver

#B1B1B1

Gold

#FFD000

Platinum

#9699AA

Design tokens

These are the site's existing Webflow variables (Base collection). Use them for everything on the site; use the same values outside Webflow.

/* Webflow Base collection, existing variables */
--black-almost: #0F0F0F; /* main dark backgrounds */
--dark-grey: #202020; /* elevated dark surfaces */
--dark-gray: #1D1D1D; /* alt dark surface */
--gray: #3C3C3B; /* secondary text on light */
--warm-white: #EBE8E7; /* text and surfaces on dark */
--white: #FFFFFF;
--gainsboro: #E2E2E2; /* light borders */
--silverish: #ACACAC; /* captions on dark */
--orange-red: #E94E1B; /* the one and only orange */

/* Typography */
font-head: 'bebas-neue-pro', Verdana; /* 600, uppercase, lh 0.9 */
font-body: 'acumin-pro-extra-condensed', Verdana;

/* Elements */
accent line: 60px x 4px, max 1 per surface;
button: radius 4px, padding 12px 40px;

/* Size variables, Base collection */
--radius--sm: 4px; --radius--md: 8px; --radius--lg: 20px; --radius--pill: 999px;
--spacing--xs: 8px; --spacing--sm: 16px; --spacing--md: 20px; --spacing--lg: 40px; --spacing--xl: 80px;
--layout--container-max: 1440px; --layout--container-pad: 40px; --layout--section-pad-y: 8vw;
--border--width: 1px; --accent-line--width: 60px; --accent-line--height: 4px;
--font--heading: bebas-neue-pro; --font--body: acumin-pro-extra-condensed;