Home / Brand guidelines

Brand Guidelines

Everything a designer needs to work on the Rasesh Koirala brand - logo, colours, typography, buttons and layout. The brand is built on a deep navy, an antique-gold flourish, and a serif-plus-sans pairing. The personality is authoritative and editorial: squared corners, generous whitespace, warm paper backgrounds, and gold used sparingly for emphasis.

Logo

The brand mark is an “RK” monogram in heavy sans-serif, set white on a navy rounded badge with a small gold underline. Use it as the primary site logo (header, favicon, social avatar).

File: /assets/images/logo-rk.png (96×96 PNG). Favicon: /favicon.ico.

In the header it renders at 52×52px. The badge is already rounded, so it sits cleanly on any background.

Logo variants

The badge is the primary mark. For horizontal spaces use the lockup; for tight or overlay uses, the transparent monogram. All variants are transparent PNGs.

Horizontal lockup
logo-rk-rect.png – light backgrounds

Lockup (reversed)
logo-rk-rect-white.png – dark backgrounds

Transparent monogram
logo-rk-mark-navy.png – light backgrounds

Monogram (reversed)
logo-rk-mark-white.png – dark / black backgrounds

Backgrounds

The badge is self-contained and reads cleanly on white, warm paper, navy or black. Use the reversed monogram or lockup only when you need a transparent mark on a dark colour.

Featured / social image

The default share image (Open Graph / Twitter card) for the brand - 1200×630, navy with the monogram and tagline.

/assets/images/featured-rasesh.png - use as the featured image on new pages and social shares.

Logo rules

Clear space. Keep padding around the badge equal to at least the height of the “R”. Don’t crowd it with text or other logos.
Minimum size. Never below 24×24px on screen so the letters stay legible.
Colour. White RK on the navy #0F2238 badge with a gold #A87D2E underline. The badge works on light or dark backgrounds as-is; don’t recolour the letters or drop the badge.
Don’t. No stretching, rotating, drop shadows, gradients, or swapping the typeface.

Colour palette

Every colour is a CSS custom property in /assets/css/style.css (:root). Use the variable names so the brand stays consistent. Navy is the foundation, blue drives actions, and gold is the signature flourish - used only for small accents.

Core

#0F2238

Navy / Primary
--brand-primary / --ink
Headings, dark sections, footer, the logo badge.

#1B4F8A

Accent Blue
--brand-accent
Links, buttons, active states.

#143A66

Accent Blue (dark)
--brand-accent-dark
Hover and pressed states for the accent.

#A87D2E

Antique Gold
--brand-gold
Signature flourish: eyebrows, numbers, dividers, the header top rule, logo accent.

Supporting

#8A651F

Gold (dark)
--brand-gold-dark
Gold text on light backgrounds - keeps contrast accessible.

#D8C08A

Gold (soft)
--brand-gold-soft
Gold on navy - badges and accents on dark sections.

#EEF2F7

Tint
--brand-tint
Soft cool backgrounds, chips, active nav.

#1D4060

Slate
--brand-slate
Dark UI surfaces, inputs and borders on navy.

#39B54A

Success Green
--brand-success
Positive / correct states.

Neutrals

#FAF8F3

Warm Paper
The page canvas (body background). The warmth signals credibility.

#2C2C2C

Text
--text
Body copy.

#6B7280

Muted Text
--text-muted
Captions, secondary copy.

#E6E6E6

Line
--line
Borders and dividers.

#F6F3EC

Warm off-white
Alternating section bands. Pair with #f7f4ed.

Typography

Two families work together: Fraunces (a modern serif) for display headings, and Poppins for UI and body. Both load from Google Fonts. The serif headlines carry the authority; Poppins keeps the interface clean.

Display typeface: Fraunces - used on h1 and h2 (and the pull-quote). Weights 500, 600, 700.
UI / body typeface: Poppins - used on h3-h6, body copy, buttons, labels and nav. Weights 400-800.
Body: 17px, line-height 1.7, weight 400, colour #2C2C2C.
Headings: Fraunces (h1/h2) weight 600, navy #0F2238, tight negative letter-spacing.
Display font token: --font-display: 'Fraunces', Georgia, 'Times New Roman', serif.
Logo typeface: the “RK” monogram is heavy Arial (system sans), not Fraunces or Poppins.

Google Fonts import (already in the stylesheet):
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Poppins:wght@400;500;600;700;800&display=swap");

Heading scale

Two contexts: the marketing hero (oversized serif) and standard article/page headings. Live examples:

Hero H1 - 54px

Fraunces / weight 600 / line-height 1.1. Steps down to ~33px on phones.

Page H1 - 42px

Fraunces / weight 600. One per page.

H2 - 28px

Fraunces / weight 600. Section headings.

H3 - 21px (Poppins)

Poppins / weight 700. Sub-sections and card titles.

Buttons & CTAs

Buttons are squared (0px radius), weight 600, with a 1px border matching the fill. Three variants:

Primary - accent fill Secondary - outline Nav CTA - compact

Primary: fill #1B4F8A, white text; hover darkens to #143A66.
Secondary: white fill, navy text + 1px navy border; hover inverts to navy fill / white text.
Nav CTA: the compact accent button in the header (“Work with me”).
Gold is not a button colour. Keep gold for small accents (eyebrows, numbers, rules), never for button fills.

Layout & details

Canvas: warm paper #FAF8F3, with white and navy full-bleed bands over it.
Max content width: 1180px, centered, with comfortable side padding (a single gutter on mobile).
Corners: squared - border-radius 0 on cards, buttons and inputs. The rounded RK badge is the one deliberate exception.
Gold flourishes: a 3px gold rule sits at the very top of the header; gold also marks eyebrows, section numbers, card top-edges and dividers.
Borders & dividers: 1px solid #E6E6E6.
Tone: authoritative, editorial, calm. Serif headlines, restrained gold, no gradients on content, no rounded “bubble” UI.

Assets

Primary badge: /assets/images/logo-rk.png (96×96)
Horizontal lockup: /assets/images/logo-rk-rect.png (light) · logo-rk-rect-white.png (dark)
Transparent monogram: /assets/images/logo-rk-mark-navy.png (light) · logo-rk-mark-white.png (dark)
Favicon: /favicon.ico
Featured / social image: /assets/images/featured-rasesh.png (1200×630)
Stylesheet (source of truth for colours & type): /assets/css/style.css