v1.0Brand system · Contour

The Contour identity.

How nitinsaini.in looks, reads and feels. One heading voice, one data voice, two accents and a survey-map motif, used the same way on every page, so the site is recognisable at a glance.

01The idea

Five things, always together.

A font alone is not an identity. Recognition comes from repeating the same combination everywhere.

A

Fraunces heading + teal italic word

Every heading highlights exactly one word in teal italic.

B

The orange Survey Dot

Headings end in an orange full stop. Same dot in the logo and on the maps.

C

Mono index labels

01 + orange rule + CAPS name above every section, like a drawing sheet number.

D

Engineering numerals

Tabular Fraunces figures with an orange mono unit. Data always in Plex Mono with slashed zero.

E

Contour lines

Faint teal topographic lines behind heroes, with one orange survey point.

Personality

Precise like a field survey, warm like a good teacher. Technical, never cold.

03Colour

Teal leads, orange marks.

Teal for everything clickable and emphasised. Orange is a marker, never a fill: dots, index numbers, rules, units. Keep orange under 5% of any screen.

Contour Teal#0F6B63Dark mode #4FB8ACLinks, emphasis, buttons
Survey Orange#D9731FDark mode #F0A05ADot, index, rules, units
Ink#14202ADark mode #E9EDEFText, dark bands
Paper#F5F2EADark mode #0E1519Page background
Slate#56636DSecondary text
Teal Soft#E2EFECChips, icon tiles, readouts
Line#E0DACDBorders, dividers
Surface#FFFFFFCards, panels

PROPORTION ON A TYPICAL PAGE

Paper 60 · Ink 22 · Teal 13 · Orange 5

04Typography

Three voices, one system.

Each family has one job. Never swap them.

Aa.

Fraunces

DISPLAY · headings, logo, big numbers, quotes
600 roman · 500 italic (SOFT 100, WONK 1)

Aa

Manrope

TEXT · body, buttons, nav, UI
400 body · 500 nav · 600 buttons · 700 bold

0°1

IBM Plex Mono

DATA · labels, index numbers, coordinates, units, code
500 · 600, slashed zero on

TYPE SCALE · 1.25 ratio · base 17px

display 40 to 72Mapped.
h1 52Hydrology notes.
h2 41Start learning.
h3 21Previous Year Questions
lead 21Notes and tools for AE/JE aspirants and field engineers.
body 17Groundwater is one of the most vital natural resources, particularly where surface water is scarce.
label 13 mono05Section label

05Heading treatment

The signature heading.

Every section heading follows the same anatomy. This is the single most recognisable element of the brand.

01Resources

Start learning.

  1. 01Label: two-digit mono number in orange, 28px orange rule, CAPS name in slate.
  2. 02Heading: Fraunces 600, sentence case, tracking −2.2%.
  3. 03One key word in teal italic via <em>. Never two.
  4. 04Ends with the orange Survey Dot <i class="ns-dot">.</i> (or ?).
  5. 05Card titles (h3) skip the dot and italic. Keep them plain.

06Numerals

Numbers that look surveyed.

Engineering is numbers, so numbers get their own style. Big figures use tabular Fraunces with the unit in small orange mono. Data values use Plex Mono with slashed zero.

12.40m bgl

.ns-num · stat / KPI

250mm/hr

.ns-num · design value

06topics

.ns-num · counts, always 2 digits

29.869444°N, 77.888333°E

.ns-readout · coordinates, results

Q = 0.0028 C i A  ·  RL 100.000  ·  Ch 0+120

.ns-data · formulas, levels, chainage (0 is slashed)

07Spacing & shape

An 8-point grid.

Every gap is a step on this scale. Sections breathe at 96px, cards at 24px padding, grids at 16px gaps.

s1 · 4
s2 · 8
s3 · 12
s4 · 16
s5 · 24
s6 · 32
s7 · 48
s8 · 64
s9 · 96

RADIUS

6 buttons, inputs · 12 cards · 20 panels, bands

CONTAINER

Max width 1120px, 20px side gutter. Text blocks max 36em.

08Components

Built from the same parts.

Hover a card to see the Benchmark Tick, the orange corner mark borrowed from survey benchmarks.

01
Subject

Hydrology

Card: index top right, icon tile, mono tag, plain h3.

Explore →
Chip with survey dot
Primary →Teal
Secondary

09Band

Dark ink band for one key feature per page.

Quotes use Fraunces italic with an orange rule.

09Usage rules

Do and don't.

Consistency is the identity. Use these checks on every new page, PDF, thumbnail or social post.

Do

  • Link assets/css/brand.css on every page
  • Start every section with a numbered label
  • End section headings with the orange dot
  • Put all numbers, units and coordinates in Plex Mono
  • Use contour lines only behind hero areas
  • Use the same palette on YouTube thumbnails and PDFs

Don't

  • Add a fourth font or use Fraunces for body text
  • Fill buttons or large areas with orange
  • Italicise more than one word per heading
  • Use gradients, drop-shadowed text or stock icons with other styles
  • Stretch, recolour or rotate the logo mark
  • Use pure black (#000) or pure white page backgrounds