OGLABS · Brand Book (A4

CONTENTS

01Manifesto · Voice · Tone02

02Logo · Wordmark · Lockups03

03Color System · Tints · Pairings04

04Typography · Scale · Pairings05

05Spacing · Grid · Layout · Motion06

06Components — Buttons, Cards, Inputs07

07Iconography · Imagery · Motifs08

08Voice & Copy · Vocabulary · Do/Don't09

09Tokens Reference · Files · Contact10

PRINCIPLE 01

A seat is not a cart item.

PRINCIPLE 02

Three colors, no negotiation.

PRINCIPLE 03

Rules over rounded corners.

MANIFESTO

We teach design the way it's actually practiced — in studios, on briefs, with senior eyes on the work. Cohort-based, live, no recordings. The opposite of an on-demand course.

OGLABS is a small school for serious people. We don't sell access — we admit students. We don't run "drops" — we run cohorts. The tone is calm, exact, and a little defiant. Read like a research note, not a launch tweet.

TONE OF VOICE

Confidentnot loud

Editorialnot casual

Specificnot aspirational

Calmnot urgent

Curatednot hype

AUDIENCE

2–6 yr designers leveling up
Engineers crossing into design
Founders learning to brief design
Students applying to top studios

PROMISE LADDER

01 · Studio practice

Live critique, real briefs, senior reviewers. You ship a studio-grade portfolio.

02 · Lineage

Faculty from NID, IIT-B, NIFT and the studios they came from. Lineage, not influencers.

03 · Cohort, not catalog

Limited seats. Application-based. Once you're in, you're in.

PRIMARY · ON PAPER

fileassets/logo-black.svg

min size22px / 6mm tall

PRIMARY · ON INK

fileassets/logo-white.svg

min size22px / 6mm tall

CLEAR SPACE

Min clear space = X (cap-height of "O") on all sides. Never crowd with copy or graphics inside this margin.

LOCKUP WITH SUBMARK

[ design system ]

Submark in signal-red, JetBrains Mono, bracketed. Only use to qualify the brand (academy, design system, vol. 01).

DO

Use SVG only. Never raster.
Lock to ink (var(--og-ink)) or paper (var(--og-paper)) — nothing else.
Maintain the X-height clear space.
Pair with mono submark in [brackets] when qualifying.

DON'T

Don't recolor (no signal-red logo, no gradients).
Don't outline, stretch, skew, or rotate.
Don't place on busy photography without a black scrim.
Don't add glow, shadow, or "shine" effects.

CORE PALETTE

01 PAPER

Paper

var(--og-paper)

RGB 250,250,246
CMYK 2,1,4,0
Pantone Warm Gray 1 C

02 INK

Ink

var(--og-ink)

RGB 10,10,10
CMYK 0,0,0,100
Pantone Black 6 C

03 SIGNAL

Terminal Red

var(--og-signal)

RGB 254,19,0
CMYK 0,95,100,0
Pantone 485 C

PAPER TINTS (on ink)

85p/85

65p/65

45p/45

25p/25

15p/15

04p/04

INK TINTS (on paper)

85i/85

65i/65

45i/45

25i/25

12i/12

06i/06

PAIRINGS · ALLOWED

Paper+ Ink

Ink+ Paper

Paper+ Signal

Ink+ Signal

Signal+ Paper

Signal+ Ink

CONTRAST · WCAG AA

Ink on Paper19.6 : 1 ✓ AAA

Paper on Ink19.6 : 1 ✓ AAA

Signal on Paper4.6 : 1 ✓ AA (large only)

Signal on Ink4.2 : 1 ✓ AA (large only)

Paper on Signal4.6 : 1 ✓ AA

Never set body text in signal-red. Use only for accents, labels ≥14px bold, or headline italic phrase.

FAMILIES

SERIF · Display

Aa

familyDM Serif Display

weights400 / 400 italic

useH1, H2, hero

MONO · Labels

Aa01

familyJetBrains Mono

weights400 / 500 / 600

uselabels, badges, code

SANS · Body

Aa Ii

familyInter

weights400 / 500 / 600

usebody, UI, paragraphs

SCALE

India's online design school.H1 · Hero · 88/72/56px · DM Serif Display · italic accent in signal

Section heading in italic.H2 · Section · 40/32/28px · DM Serif Display

Body copy reads like a research note — calm, exact, specific. We don't oversell. Inter at 16/15px, line-height 1.55, max-width 64ch.Body · 16/15/14px · Inter 400 · color ink/78

SECTION LABEL — APPLICATIONS OPENLabel · 11/10/9px · JetBrains Mono · tracking 0.22–0.35em · uppercase · prefix //

SPACING SCALE (4pt base)

space-14 · 0.25rem

space-28 · 0.5rem

space-312 · 0.75rem

space-416 · 1rem

space-624 · 1.5rem

space-832 · 2rem

space-1248 · 3rem

space-1664 · 4rem

space-2496 · 6rem

BREAKPOINTS

sm≥ 640px · phone-l

md≥ 768px · tablet

lg≥ 1024px · laptop

xl≥ 1280px · desktop

2xl≥ 1536px · wide

Z-INDEX SCALE

base0

nav20

overlay40

modal60

toast80

12-COLUMN GRID · 1280px container · 24px gutter

SHADOWS & BORDERS (no blur)

brut-sm2 2 0 var(--og-ink)

signal-md4 4 0 signal/35

signal-lg6 6 0 signal/55

border-hairline1px solid

border-structural2px solid

border-section4px signal

radius0 (always square)

MOTION

duration-fast120ms

duration-base200ms

duration-slow320ms

ease-outcubic(0.2, 0.8, 0.2, 1)

ease-in-outcubic(0.65,0,0.35,1)

Hovers fade. Layout shifts snap. Never bounce, never spring. Reduced-motion: respect prefers-reduced-motion media query.

BUTTONS

Apply now ↗ Read more Reserve seat

primaryink bg · paper text · signal shadow

ghost1pt ink border · transparent

signalsignal bg · paper text · use once/view

size12px text · 12/20mm padding · 0.22em track

BADGES

LIVE APPLICATIONS OPEN COHORT 03

INPUTS

your.email@oglabs.in

applications open · enter email

CARD · STANDARD

01 / Studio Practice

Live critique with senior reviewers.

Real briefs. Real eyes. Real ship dates.

CARD · WITH SHADOW

SHADOW VARIANT

Hard offset. No blur.

Use the signal shadow for primary affordances only.

MASTHEAD RAIL · TYPICAL HERO

VOL. 01 / APR 2026 A school built like a studio. Apply ↗

ICON SET · LUCIDE · 1.5px STROKE

arrow-up-right

arrow-right

check

x

plus

minus

menu

search

play

pause

download

upload

external-link

link

calendar

clock

mail

phone

user

users

twitter

instagram

youtube

Lucide icons — 16 / 20 / 24px sizes. Stroke 1.5px. Color: ink (default) or signal (active/hover only). Never fill.

PHOTOGRAPHY DIRECTION

Process over portrait — show the work, the desk, the screen, the sketch.
Black-and-white or low-saturation only. No filters.
Documentary, available light. No staged glamour.
Close-cropped on hands, type specimens, materials.
Wide-angle studio shots only with grain or BW.

MOTIFS · SECONDARY VISUAL LANGUAGE

// double-slash labels — every section header.
[ bracketed ] badges — status, version, cohort.
Numbered sequences — 01 / 02 / 03.
Pulse dot (●) — only marker that's allowed to be round.
Hairline rules + dashed dividers — never solid for body.

SAY

"Applications open · Cohort 03"
"A school built like a studio."
"Live critique with senior reviewers."
"Reserve a seat — limited to 24."
"Faculty from NID, IIT-B, NIFT."
"India's online design school."

NEVER

"Buy now" / "Add to cart"
"Limited time offer" / "Last chance!"
"Become a designer in 30 days"
"Discount" / "Bundle" / "Sale"
"Sign up" (we say Apply)
Any emoji, anywhere in the UI.

VOCABULARY

User→ Student / Applicant

Course→ Cohort / Studio

Sign up→ Apply / Reserve

Teacher→ Faculty / Reviewer

Lesson→ Session / Brief

Module→ Studio block

Issue / EditionVol. 01 / Vol. 02

HEADLINE FORMULA

Plain noun phrase + italic accent in signal-red.

India's online design school.

A school built like a studio.

Lineage over influence.

Always end with a period. Italic only on the accent phrase. One italic per headline.

THE NORTH-STAR LINE

"A seat in this cohort is not a cart item."

TOKEN FILES

tokens.jsonroot manifest

tokens/tokens.cssCSS custom props

tokens/tokens.scssSCSS variables

tokens/tokens.jsJS/TS object

tokens/tokens.tailwind.jsTailwind preset

tokens/tokens.figma.jsonFigma Tokens Studio

REPO STRUCTURE

ogdesignsystem/
├─ tokens.json
├─ tokens/ generated
├─ assets/ SVG only
├─ fonts/
├─ physical/slides/template.html
├─ physical/brand-sheet.html
├─ index.html
└─ scripts/build-tokens.mjs

INSTALL — for downstream apps

$ npm install @oglabs/design-system@^1
# in your CSS root
@import '@oglabs/design-system/css';
# or Tailwind
import preset from '@oglabs/design-system/tailwind';

MAINTAINERS

Oshinoshin@oglabs.in

Design Systemv0.1.0 · Apr 2026

Repogithub.com/oglabs/designsystem

Issuesgithub issues only

LICENSE & USAGE

Brand assets, wordmark, and motifs are © 2026 OGLABS Design Academy. The token system and code are MIT-style internal-use; do not redistribute the wordmark. Contact maintainers before any external co-branded use.