Raulji Technologies

Brand
Guidelines

A single source of truth for the website's colour, type, spacing and components. Every value below lives as a CSS token in rt-brand-tokens.php and loads site-wide, so you reference it, never re-type it.

Oswald · display Inter · body #2272BA · brand blue 1320px · container 96 / 128px · rhythm
02 · Palette

Colour

Raulji Blue is the primary voice; ink and neutral greys carry the reading. Sub-brand accents (gold, emerald, Shopify green) appear sparingly and never displace blue. Click any swatch to copy its hex.

Brand blue · primary
Ink & text
Surfaces & borders
Dark sections & sub-brand accents
Gradients
--rt-grad-btnlinear-gradient(135deg,#2272ba,#1650a0)
--rt-grad-btn-hoverlinear-gradient(135deg,#1a5a96,#123f80)
--rt-grad-darklinear-gradient(135deg,#071A2F,#0A2240,#0D2B4F)
03 · Type

Typography

Two families, one voice. Oswald sets every heading and eyebrow, always UPPERCASE. Inter carries body copy and UI. All of h1–h6 inherit the display font globally, so the type voice never drifts.

What We BuildOswald · 12px · 600 · .34em tracking · uppercase · --rt-blue
Grow Your RevenueOswald · 700 · clamp(2.4–4rem) · --rt-ink
End-To-End ServicesOswald · 700 · clamp(2.2–3.6rem) · uppercase
Process & DeliveryOswald · 600 · 1.5rem · uppercase
We build measurable growth systems for ambitious brands. Clean engineering, honest reporting, and design that carries the work.Inter · 400 · 16.5px · 1.85 lh · --rt-muted
Do · plain eyebrow

An eyebrow is plain uppercase Oswald text only, in brand blue (or light blue on dark). It stands on its own.

Our Approach
Don't · pills & dashes

No rounded pill/chip fill, no decorative bar before the kicker. Both read as a generic template site and were removed site-wide.

Our Approach Our Approach
04 · Space

Layout & Spacing

Consistent vertical rhythm is what makes the site feel engineered. Sections breathe at 96px on mobile and 128px on desktop; the header block keeps a fixed 24px cadence.

1320px
--rt-container
Content max-width. Always pair with the theme's .wgl-container so widths match the real header.
96px
--rt-section-py
Section top/bottom padding on mobile.
128px
--rt-section-py-lg
Section top/bottom padding, desktop ≥1024px.
24px
eyebrow → title → sub
Fixed gap for the section header rhythm (mb-6 / mt-6).
What We Build
24px
End-To-End Services
24px

One paragraph of supporting copy sits below the heading, then the header block clears the content by 64–80px.

05 · Form

Radius & Shadow

Soft, generous corners and low-slung shadows keep surfaces calm. Shadows are tinted, never flat black.

--rt-radius
16px
--rt-radius-lg
20px
--rt-shadow-card
0 26px 70px -28px rgba(12,14,18,.22)
--rt-shadow-btn
0 18px 45px -16px rgba(34,114,186,.7)
06 · Parts

Components

Opt-in .rtg- helper classes assemble the brand without re-declaring tokens. They apply only where you add them, so existing pages are never touched.

Primary button · .rtg-btn

Oswald, .18em tracking, blue gradient. Hover deepens to the 700→900 gradient.

Card · .rtg-card

SEO Services

Bordered surface that lifts to a tinted shadow and blue hairline on hover.

Hover me, border warms to blue, card lifts on the soft shadow.

ClassDoes
.rtg-sectionStandard 96 / 128px vertical section padding
.rtg-section--soft / --darkSoft-grey or dark-gradient section background
.rtg-containerCentered container (pair with .wgl-container)
.rtg-eyebrowBrand eyebrow label
.rtg-h2Section heading
.rtg-subSub-paragraph under a heading
.rtg-btnPrimary brand button
.rtg-cardLight bordered card with hover
07 · Use

How To Use

Reference a token directly, or drop in a helper class. Prefer var(--rt-…) over hard-coded hex so the whole site stays consistent and easy to re-theme.

/* reference a token directly */
.my-thing{ color:var(--rt-blue); background:var(--rt-bg-soft); border:1px solid var(--rt-border); }
.my-cta{ background:var(--rt-grad-btn); font-family:var(--rt-font-head); }

<!-- or use the opt-in helpers -->
<section class="rtg-section rtg-section--soft">
  <div class="rtg-container wgl-container">
    <span class="rtg-eyebrow">What We Build</span>
    <h2 class="rtg-h2">End-To-End Services</h2>
    <a href="/contact-us/" class="rtg-btn">Start Your Project →</a>
  </div>
</section>
Copied