// OG Labs Design Academy · Brand Book · Vol. 01

India's online
design school.

Apr 2026
oglabs.in
v0.1.0
// 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.
// 01 · Manifesto

A school built like a studio.

Page 02

// 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.

OG Labs 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.

// 02 · Logo · Wordmark · Lockups

The wordmark is the brand.

Page 03

// PRIMARY · ON PAPER

OG Labs
fileassets/logo-black.svg
min size22px / 6mm tall

// PRIMARY · ON INK

OG Labs
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 (#0A0A0A) or paper (#FAFAF6) — 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.
// 03 · Color System

Three colors. No exceptions.

Page 04
// CORE PALETTE
// 01 PAPER
Paper
#FAFAF6
RGB 250,250,246
CMYK 2,1,4,0
Pantone Warm Gray 1 C
// 02 INK
Ink
#0A0A0A
RGB 10,10,10
CMYK 0,0,0,100
Pantone Black 6 C
// 03 SIGNAL
Terminal Red
#FE1300
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.

// 04 · Typography

Editorial serif, terminal mono.

Page 05

// 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 //
// 05 · Layout · Spacing · Motion

A 12-column grid and a 4pt baseline.

Page 06

// 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 #0A0A0A
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.

// 06 · Components

Square, exact, quietly opinionated.

Page 07

// 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 ↗
// 07 · Iconography & Imagery

Lucide stroke, archival photography.

Page 08

// 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
linkedin
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.
// 08 · Voice & Copy

Read like a research note.

Page 09
// 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."
// 09 · Tokens · Files · Contact

One source of truth.

Page 10

// 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/
 ├─ slides/template.html
 ├─ brand-sheet.html
 ├─ Design System.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

Krishna Gauravkrishna@oglabs.in
Design Systemv0.1.0 · Apr 2026
Repogithub.com/oglabs/designsystem
Issuesgithub issues only

// LICENSE & USAGE

Brand assets, wordmark, and motifs are © 2026 OG Labs 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.

India's online design school.
academy.oglabs.in · krishna@oglabs.in