Design System.
Digital.
Everything that ships on a screen — product UI, marketing site, dashboards, mobile, the brand book itself. All of it consumes from colors_and_type.css.
Core Palette
Three colors. The entire palette. No greys — only transparency of ink or paper. Signal red is used once: the accent.
Ink & Paper Tints
Transparency is the only way to generate hierarchy. No off-grey or midtone variables.
Serif Scale — DM Serif Display
The editorial voice. Commands attention. Italic at signal-red for the accent phrase in every hero headline.
JetBrains Mono
Every label, caption, metadata, button, annotation — uppercase, heavy tracking. The structural skeleton of the brand.
All Four Families
Scale
Border System
Borders are the primary structural device. No drop-shadows on cards — the 2px rule carries all the weight.
Hard Offset Only. No Blur. Ever.
Timing & Easing
Minimal and purposeful. No spring, no bounce, no parallax on scroll (latest home uses framer-motion for a subtle parallax — a contained exception).
Design System Loader
The boot state uses only system primitives: ink background, paper grid, signal-red progress, mono rails, serif title, pulse status, and hard rules.
Buttons
Badges
No rounded pills — all badges are rectangular with `border-radius:0`. Status is communicated by border color and the pulse dot.
Card Variants
Interaction Design Fundamentals
The thinking behind design decisions.
Interaction Design Fundamentals
The thinking behind design decisions.
How Interfaces Think?
4 weeks · 3 sessions/week · Live on Google Meet
Form Inputs
Only two variants: dark (footer/newsletter) and light (contact page). Both use JetBrains Mono. Border turns signal-red on focus.
3-Column Newspaper Rail
Opens every dark section (hero, footer). Three cells: brand // volume // status. Dashed dividers. Reads like a broadsheet masthead.
KineticDisciplines Component
New in latest commit. Lives in the bottom-right dead-zone of the
hero, below the flagship card. Numbered list; active row
cross-fades at 2.4s intervals. Echoes the active name large below.
Honors
prefers-reduced-motion.
FAQ — Two-Column Grid
New in latest commit. Q and A sit in a 5:7 grid split. Q uses DM
Serif Display, A uses Inter. Separated by a hairline
border-b border-[ink/15].
Live vs. Recorded
New in RedesignPage.tsx. Two-column with ink/paper contrast. Check/X icons are small signal-red filled circles (yes) vs muted (no). No tables.
Recorded courses
OGLABS cohorts
Curriculum-as-Code
From RedesignPage. Syllabus presented as
syllabus/interaction.json
in a macOS-style window. Tabs switch the track. Syntax colors use
the signal-family palette only.
Wordmarks
Faculty Lineage
SVG marks always black on white cell. 2px dividers. Always grayscale.
IIT BOMBAY
NID
NIFT
Lucide + Unicode
Lucide React (0.487.0). Stroke 1.5px, 14–16px size. Used sparingly — never more than one icon per button. Unicode symbols → ↗ · — used in copy.
Dark Masthead Hero
Full hero specimen. 3-col masthead rail → 12-col content grid → flagship glass card right. Grid texture at 0.04 opacity. Subtle radial red bloom behind the card. KineticDisciplines below the card on lg+.
India's online design school.
Four-week live cohorts where you learn to think like a designer. Three sessions a week, taught online by alumni from NID, IIT Bombay and IIT Guwahati.
How Interfaces Think?
4 weeks · 3 sessions/week · Live on Google Meet
Voice & Vocabulary
PREFIX
— double-slash before all section labels (dev-style structural
markers)
4 weeks · 3 sessions/week
— middle-dot separates meta, never comma
01 / 02 / 03
— zero-padded numerals in serif at 48–56px signal-red
[ LIVE ]
/
[ UPCOMING ]
— brackets for status tags
→
(right) and
↗
(external)
Breakpoints, Containers, Body Scale
Mobile-first. Five breakpoints. Three container widths. Inter body scale fixed in pixels for predictable Figma frames.
Stack Order
Transparency Scale
The only way to generate hierarchy. Use these exact stops — never a custom value.
Figma Tokens Studio Export
Use tokens/tokens.figma.json for Figma Tokens Studio. Use root tokens.json as the source file for this repo.
Regenerate:
npm run build
Site Header
Sticky on scroll (z-index 20). Logo left, links center, CTA + actions right. Mobile collapses to hamburger drawer.
Textarea, Select, Checkbox, Radio, Toggle
All controls share a 2px ink border and JetBrains Mono. Selected state is signal-red. No rounded corners except on radio.
Tab Pattern
Used on the syllabus to switch between weeks/tracks. Underline is signal-red, 2px, animates 200ms.
Expandable Rows
For syllabus week breakdowns and FAQ. The plus rotates 45° to become an X. Closed state shows mono week label + serif title.
Modal & Confirmation
2px ink border with 6·6 signal shadow. Dashed dividers between header / body / footer. Backdrop is ink at 65% opacity.
Enrollment is by conversation. Enter your details and our team will get on a short call within 24 hours.
Tooltip / Popover
Ink background, signal-red border & arrow. Mono font for terse hints. Appears on hover after 200ms delay.
Notifications
Bottom-right stack. Auto-dismiss after 5s. Border-left signal-red rule. Hard offset shadow.
Progress & Stepper
Linear bar for cohort fill. Stepper for application flow. No green — only ink (done) and signal (active).
Pagination
Breadcrumbs
Tags & Filter Chips
Discipline tags use the 3-letter code (IXD, COM, RES, STR, TYP, INV). Active state inverts to ink-on-paper.
Avatar & Instructor Card
Square only — no rounded photos. Instructor portrait is 4:5 ratio. Initials fallback uses serif at 22px.
Numeric Specimens
Big numerals in DM Serif at 56px, signal-red. Mono caption below.
Editorial Quote
"The thinking behind a design decision matters more than the pixels. We teach the thinking."
Loading State
Subtle ink shimmer at 200% width, 1.4s linear loop. Only used while waiting on async content.
Institution Strip
Continuously scrolling band. 30s linear loop. Pauses on hover.
No Results / No Data
Mobile & Tablet
Hero collapses to single column. Masthead stacks. Cards go full-width with reduced padding.
≡
India's online
design school.
Four-week live cohorts. Three sessions a week.
India's online
design school.
Four-week live cohorts where you learn to think like a designer.
Focus Rings
Every interactive element shows a 2px signal-red outline at 2px
offset on
:focus-visible. Never remove it. Tab through this section to verify.
*:focus-visible { outline: 2px solid #FE1300; outline-offset:
2px; }
WCAG 2.1 Pairings
Every text/background pair tested against AA (4.5:1 normal text, 3:1 large text). Flagged pairs are decorative-only — never use them for body copy.
Minimum 44 × 44
All interactive elements meet WCAG 2.5.5 (44 × 44 px minimum on touch). Mono "ghost text" links keep their visible label small but use generous padding for the hit area.
Three Colors · Four Meanings
We don't add colors for state — we change density and iconography. Ink, paper, signal. That's the palette.
Body & UI Workhorse
Inter handles all body, label, and UI text. Six steps. No sub-steps, no custom values.
H1 → Caption
Eight steps from masthead headline to legal caption. Use the role, not the size — never raw px in product code.
Rhythm Rules
Line height tracks size, not whim. Tracking opens up only at small sizes — never on body text.
| DISPLAY ≥ 28px | 1.10–1.18 |
| HEADING 17–22px | 1.32 |
| BODY 13–15px | 1.55–1.60 |
| CAPTION 10–12px | 1.40 |
| DISPLAY SERIF | −0.01em |
| BODY | 0 |
| EYEBROW / OVERLINE | 0.22em |
| MONO LABELS | 0.18–0.30em |
Four Canonical Templates
Every page collapses to one of these four. Don't invent a fifth.
What Stays Pinned
Anchors that survive scroll. Limited to one per axis.
| TOP NAV | sticky; 64px; backdrop-blur(12px) on scroll past 8px. |
| SIDE NAV | fixed; full viewport height; no shadow. |
| SUB-NAV / TABS | sticky; top: 64px; pin only inside detail layout. |
| TABLE HEADER | sticky in scroll container; 1px ink rule below. |
| FORM ACTION BAR | bottom-pinned in form layout; 4px red top border. |
Compact · Comfortable
Two density modes. Marketing → comfortable. Internal tools → compact.
Global Search + Autosuggest
Always reachable. Empty state shows recent + suggested. No spinner — skeleton rows.
⌘K Anywhere
Power-user surface. Fuzzy match · grouped commands · keyboard-first.
Default Data Table
Sortable header · zebra off · 1px ink dividers · numbers right-aligned · tabular-nums.
| Cohort | Lead | Seats | Filled |
|---|---|---|---|
| 14 — Foundation | A. Rao | 28 | 26 |
| 15 — Foundation | M. Iyer | 28 | 19 |
| 07 — Specialisation | P. Bhatt | 14 | 14 |
Editable, Frozen Header
When tables need: inline edit, column resize, frozen first column, virtualized rows.
| ID | Student | Status | Score |
|---|---|---|---|
| 001 | A. Mehta | Active | 88 |
| 002 | R. Kumar | Hold | 71 |
| 003 | N. Singh | Active | 94 |
| 004 | P. Joshi | Active | 82 |
| 005 | K. Das | Inactive | — |
| 006 | L. Verma | Active | 77 |
| 007 | S. Patel | Active | 65 |
Definition Pairs
For metadata, settings, summaries. Mono key, Inter value, hairline rule between rows.
- Cohort ID
- CT-14-FOUND
- Start Date
- 15 May 2026
- Lead Faculty
- Anjali Rao
- Mode
- In-Studio · 4 days/week
Line · Bar · Donut
One accent (red), neutral fills, hairline axis. No 3D, no gradients.
Activity Feed
Vertical rule + dot. Time on the left in mono. Most-recent on top.
System Record
Append-only. Mono throughout. Severity in left band. Timestamp in ISO.
Interaction States
Same shape, different signals. Hover lifts, active is louder, pressed inverts, disabled grays out.
Error · Success · Warning · Info
Inline messages anchor to the field they describe. Always paired with an icon for color-blind users.
Outage · Maintenance · Offline
Page-width strip at the very top, above all chrome. Dismiss only when severity ≤ info.
Login · Signup · OTP · Reset
Single-column form layout, max 360px. Logo top, action button bottom-left.
Sign in
Create account
New password
Three Steps · No More
Welcome → personalize → first action. Skippable per step. Save partial.
Welcome.
Quick tour, two minutes. You can skip any step.
Tell us your role.
Faculty, student, or staff. Shapes your home screen.
Open your first cohort.
Live demo data — explore freely, nothing breaks.
Switcher + Permission Matrix
Avatar dropdown shows all workspaces. Roles are flat — no nested role inheritance.
| Capability | Owner | Admin | Faculty | Student |
|---|---|---|---|---|
| Create cohort | ● | ● | ○ | ○ |
| Edit lesson | ● | ● | ● | ○ |
| Submit work | ● | ● | ● | ● |
| Manage billing | ● | ○ | ○ | ○ |
Drag · Resize · Split · Inline Edit · Bulk
Power-user moves. Each one comes with a visible affordance — never hidden gestures only.
col-resize. Snap to 25/50/75. Min 240px.Light · Dark · High Contrast
Tokens swap, primitives don't. Multi-brand uses a single override layer per brand.
Paper. Ink. Red.
Paper var(--paper) · Ink var(--ink) · Red var(--signal)
Ink primary, paper accent.
Surface var(--ink) · Foreground var(--paper) · Red unchanged
Pure black + AAA pairs.
Yellow focus rings · 4.5:1 minimum on every pair
RTL · Expansion · Locale
Arabic & Hebrew flip. Indic & European expand 30%. Dates and numbers follow ICU locale.
| en-IN | 30/04/2026 · ₹1,23,456 |
| en-US | 04/30/2026 · $1,234.56 |
| de-DE | 30.04.2026 · 1.234,56 € |
| ar-SA | ٣٠/٠٤/٢٠٢٦ |
Haptics · Sound · Animation
Reserved. Used for confirm, error, and major state shifts only — never decoration.
| SUCCESS | light · 10ms |
| WARNING | medium · 30ms |
| ERROR | heavy · 60+30+60ms |
| SELECT | selection |
| HOVER | 120ms ease-out |
| EXPAND | 240ms quart |
| PAGE | 320ms quart |
| REDUCE | prefers-reduced: 0ms |
House Visual Style
Photography is documentary. Illustration is line-only. No 3D, no AI-stock.
- Line-only. 1.5px stroke, ink var(--ink).
- Single accent fill: red var(--signal) or paper.
- No gradients, no drop shadows, no isometric.
- Frame ratio: 4:3 or 1:1.
- Documentary. Real students, real studios.
- Black & white preferred. Color only when essential.
- No models, no stock, no over-saturation.
- Always credit the photographer in mono caption.
How We Sound
Direct, opinionated, never sycophantic. Tone shifts with context — voice doesn't.
| Context | Tone | Example |
|---|---|---|
| Marketing | Bold, declarative | "The whole-cohort lecture is going extinct." |
| Product UI | Clear, actionable | "Save changes" — not "Submit form" |
| Errors | Calm, owning | "We couldn't reach the server. Try again." |
| Empty state | Encouraging | "Nothing here yet — add your first cohort." |
What Went Wrong + What Now
Never blame the user. Always offer the next move. Two sentences max.
Buttons · Hints · Confirmations
Verb + object. No "OK", no "Submit", no "Click here".
| Surface | Avoid | Use |
|---|---|---|
| Primary CTA | Submit | Publish cohort |
| Confirm dialog | OK / Cancel | Delete cohort / Keep it |
| Form hint | Required | We'll email you the schedule |
| Toast | Success! | Saved · 2:42 PM |
768 → 1023
Two-column layouts. Sidebar collapses to 64px icon rail. Modals hit 90% width, max 720.
| GRID | 8 col · 24px gutter · 32px outer margin |
| SIDE NAV | collapse to icon rail; expand on tap |
| DETAIL → SHEET | right rail becomes a slide-up sheet |
| TOUCH | all targets ≥ 44 · hover states inert |
Operable Without a Mouse
Every action reachable via keyboard. Visible focus, sane tab order, ARIA only when semantics aren't enough.
| TAB | next focusable |
| SHIFT + TAB | previous |
| ENTER / SPACE | activate |
| ESC | close modal/menu |
| ↑ ↓ | menu/list nav |
| ⌘K · / | command palette · search |
- Use semantic HTML first. Only add roles if there's no element.
aria-labelon icon-only buttons.aria-live=politefor toasts;assertiveonly for blocking errors.aria-current=pageon active nav link.- Modals trap focus + return on close.
Prop Conventions
Same prop names across every component. Variants, sizes, and tones use closed enums — never freeform strings.
| Prop | Type | Used by |
|---|---|---|
| variant | "primary" | "secondary" | "ghost" | Button, Badge |
| size | "sm" | "md" | "lg" | Button, Input, Avatar |
| tone | "neutral" | "success" | "warning" | "error" | "info" | Badge, Toast, Banner |
| isLoading | boolean | Button, Card, Table |
| leadingIcon / trailingIcon | React.ReactNode | Button, Input, Badge |
Tokens, Components, Files
Predictable names beat clever ones. Always category → role → variant → state.
| TOKENS | --color-bg-default · --color-fg-muted · --space-4 · --radius-sm |
| COMPONENTS | PascalCase: Button, ToastBanner, AvatarStack |
| CSS CLASSES | og-button og-button--primary og-button--sm is-loading |
| EVENTS | onChange, onSelect, onSubmit — never onChanged or onSubmitted |
| FILES | kebab-case for assets · PascalCase for components · lowercase for tokens |
Do · Don't
High-leverage rules that come up in every review.
- Use one primary CTA per screen.
- Pair color with shape or icon.
- Keep vertical rhythm in 4pt multiples.
- Match destructive copy to the actual verb.
- Ship the loading & empty state with the feature.
- No drop shadows. Hard offset only.
- No emoji in product UI.
- No raw hex outside tokens.
- No spinner without context — use skeleton.
- No modal on top of modal.
SemVer + Two-Release Sunset
Major = breaking. Minor = additive. Patch = fix. Anything deprecated stays for two minors.
| MAJOR (X.0.0) | breaking API change · removal of deprecated · token rename |
| MINOR (0.X.0) | new component · new prop · new token |
| PATCH (0.0.X) | bug, a11y, contrast, copy |
| DEPRECATION | JSDoc @deprecated + console.warn one-shot · removed in v(N+2) |
Budget
Hard targets enforced in CI. A regression blocks the merge.
| LCP (mobile, 4G) | ≤ 2.0s |
| CLS | ≤ 0.05 |
| INP (95th pct) | ≤ 200ms |
| JS BUNDLE (route) | ≤ 90 KB gz |
| FONT SUBSET | latin only by default · woff2 |
| IMAGE | avif/webp · srcset · lazy below fold |
Event Tracking · A/B · Hooks
Every interactive component emits a typed event. A/B variants live behind a single flag prop.
cta.cohort_apply.click form.signup.submit nav.sidebar.toggle modal.delete_cohort.confirm
const { variant } = useExperiment(
'cohort_apply_cta_v2'
);
return variant === 'B'
? <Button tone="error">Apply now</Button>
: <Button>Apply</Button>Brand Assets
One-click downloads for designers working in Figma, Canva, Illustrator, or anywhere else.
Lucide Icon Set (Static SVG)
Click any icon to copy its SVG markup to clipboard — paste directly into Canva, Figma, or HTML. Stroke-width 1.5px, 16px default.
data-lucide="icon-name" in HTML.
Physical.
Everything that gets printed. All templates live as token-driven HTML files — open, edit, print to PDF.
CMYK + Spot Pantone
Screen RGB does not survive a press. Every brand color carries a paired CMYK build and a spot Pantone for premium runs.
| Token | Screen (RGB) | Print (CMYK) | Spot (Pantone) | Use on |
|---|---|---|---|---|
| ink | #0A0A0A | 0 / 0 / 0 / 100 | Pantone Black 6 C | all primary print |
| paper | #FAFAF6 | stock — no ink | Munken Pure 120 gsm | stationery, books |
| signal | #FE1300 | 0 / 95 / 100 / 0 | Pantone Red 032 C (closest spot · #EF3340) | accents, posters, merch |
3 mm Bleed · 5 mm Safe
Every print artifact gets a 3 mm bleed beyond trim and a 5 mm safe area inside. No critical content outside the safe box.
final piece
| BLEED | 3 mm beyond trim · all four edges |
| TRIM | final cut line · the visible piece |
| SAFE AREA | 5 mm inside trim · keep all type & logos here |
| CROP MARKS | always on · 0.25 pt rule · 5 mm offset |
Press Limits
Stay inside these limits or the press shows through. No varnish, no foil, no spot UV — they fight the brand.
| TOTAL INK COVERAGE | ≤ 280% |
| RICH BLACK BUILD | 60 / 40 / 40 / 100 |
| FINE TYPE COLOUR | 100 % K only · never built |
| FINISH | uncoated · matt only |
| SPECIAL | blind deboss ✓ · foil/UV/spot ✗ |
| BINDING | saddle-stitch ≤ 48 pp · perfect ≥ 64 pp |
Before You Send to Press
If any box is unchecked, the file goes back. No exceptions.
- ☐ PDF/X-4 export · CMYK + spot
- ☐ All fonts embedded or outlined
- ☐ Bleed 3 mm · trim · safe 5 mm visible
- ☐ Total ink coverage ≤ 280 %
- ☐ Images 300 dpi at print size
- ☐ Spot Pantone 485 C present (if signal)
- ☐ Black type set 100 % K (not rich)
- ☐ Hairlines ≥ 0.25 pt
- ☐ Crop marks · 5 mm offset
- ☐ Spell-check passed
- ☐ Two human proofreaders sign-off
- ☐ Filename: og_{piece}_{vYY-MM-DD}.pdf