Brand identity · version 1.4

One identity for every page of AI Safety India.

Warm paper, one red, and deep "level" colours (Explore, the Learn tracks, Research) that grow darker as commitment grows. Headlines in Libre Baskerville, everything else in Satoshi. Built from the parts of today's site that already work.

Level 1 · ExploreOpen sessions and reading groups

Level 2 · LearnTechnical AI Safety

Level 2 · LearnAI Governance

Level 2 · LearnTechnical AI Governance · reserved

Level 3 · ResearchFellowships and research groups

What we keep Principles Logo Colour Levels Typography Layout Components Imagery Voice Everywhere Changelog

What we keep, what we fix.

This is an evolution of the current site, not a replacement. The best parts become rules; the inconsistencies go.

Keep and make official

The dark gradient "levels" from the pathway section
Image cards: photo on top, white body, tag chip, serif title, meta row
Photo tiles with a dark fade under the label
Warm paper background and generous spacing
The one red for the action that matters

Fix

Three typefaces (Cormorant, DM Sans, DM Mono) become two: Libre Baskerville + Satoshi
Tracked uppercase mono labels become short sentence-case labels
Corner radii from 4px to 28px become three sizes: 8, 16, 24
Two different reds become one deep crimson, #9B1C2E
Gradients used anywhere become gradients used only for levels
Centred sections everywhere become left-aligned layouts
Captions on photos get one shared left edge

Four principles.

Paper, then depth

Pages are warm and light. Depth arrives only where commitment does: the levels.

One red

Deep crimson #9B1C2E marks the logo and the next action. Never decoration, never error messages.

Serif speaks, sans works

Baskerville for what we say; Satoshi for everything you read, click or scan.

Real people

Our own events and members, honestly captioned. No stock, no robots, no glowing brains.

The logo is only the logo.

The 10-leaf symbol and the Libre Baskerville wordmark, exactly as in the logo kit. It appears in the nav, the footer and on official documents. It is never a pattern, a progress meter or a background graphic.

Proportions (v2.1)

The symbol is 2.6× the height of the capitals in “AI Safety India”, centred on them, with a gap of 0.63 symbol-widths. The old kit used 3.7×, which made the words read like a caption. These proportions are built into the files: always place the SVG, never type the wordmark next to the symbol.

Sizes: nav 32px tall · footer 30px · minimum 28px on screen (capitals 11px) · print minimum 10mm tall.

Live logo (v2.5): website nav only

In the website header, “India” cycles through India’s official languages (23 forms, from the original site): इंडिया, ইন্ডিয়া, ఇండియా, இந்தியா, ಇಂಡಿಯಾ, ഇന്ത്യ, ਇੰਡੀਆ, انڈیا, ᱤᱱᱰᱤᱭᱟ, ꯏꯟꯗꯤꯌꯥ and more. “AI Safety” and the symbol never move.

Same proportions as the static lockup: 32px tall, symbol 2.6× the capitals (Libre Baskerville at 16px), symbol centred on the capitals.
Each script in its own matching serif (Noto Serif for Indic scripts, Noto Naskh for Urdu, Sindhi and Kashmiri, Noto Sans for Ol Chiki and Meetei Mayek), loading only the letters used.
Calm timing: a new word every 2.8s, a 0.45s slide; the slot keeps the widest word’s width so nothing moves.
Control: pauses on hover and keyboard focus, has a pause button, stops in background tabs; still for reduced motion; screen readers always hear “AI Safety India”.
Never animated anywhere else: footer, print, merch, documents, social avatars and favicons use the static files.
Before launch: each word checked by a native speaker (several are transliterations of “India”, Sanskrit uses भारतम्).

Red symbol on paper or white; white symbol on red and on levels
Clear space of one symbol-width all round
Minimum 28px tall on screen, 10mm in print
Use the SVG files; the 2.6× proportion is built in

Don't

Use the leaves as a graphic, pattern or progress indicator
Set the wordmark in bold or in another typeface, or rebuild the lockup by hand
Mix a sans or capitals “AI SAFETY” with another script; regional lockups keep the same symbol and Baskerville-matched type
Put the crimson symbol on a level gradient or a dark page (too little contrast)

Paper, ink and one red.

Most of every page is paper and ink. Red is used sparingly so it always means "this is the thing to do".

Paper

#F5F3EEPage background

Paper 2

#EDE9E1Alternate section band

Card

#FFFFFFLight cards, forms

Line

#E3DED5Hairlines, card borders

15.7:1

Ink #1C1A17Headlines and body

6.5:1

Ink 2 #544F48Secondary text

5.2:1

Ink 3 #6B655CMeta, captions

7.3:1

Crimson #9B1C2ELogo, buttons, labels, links

✓

Success #2C6938Application received.

Warning #835300Applications close in 2 days.

Error #B3401FNever the brand red.

Info #2F5B8ASessions are in IST.

Status colours always come with an icon and words, so colour is never the only signal. Links in running text are underlined. The site respects "increase contrast" (darker inks, solid edges, no glass) and "reduce transparency" (solid surfaces instead of frosted glass).

Roughly 62% paper, 14% white cards, 14% ink, 6% levels, 4% red. Contrast ratios are measured against Paper.

Light mode (default)

Apply nowApplications open

Fill and text are both #9B1C2E.

Dark mode (later)

Apply nowApplications open

Same red fill. Red text becomes #FF9AA3 (9.3:1, labels only). Opt in with data-theme="dark".

The levels: our signature.

Taken from today's pathway section and made into a rule. Each level is a deep gradient with its own accent. They get darker and richer as people commit more, so colour itself tells you where you are.

Open to all

Level 1 · Explore

Speaker sessions and reading groups

Weekly deep-dives into safety papers and talks with researchers. Free, open, no application.

WeeklyFreeNo application

Upcoming eventsRSVP →

Applications open

Level 2 · Learn

Technical AI Safety

For technical talent ready to work on alignment. Find where your engineering and maths skills matter most.

6 weeksCohort-basedFree

Syllabus and detailsApply now →

Applications open

Level 2 · Learn

AI Governance

For researchers, lawyers and economists shaping how frontier AI is governed: proposals, compute thresholds, agreements.

6 weeksCohort-basedFree

Syllabus and detailsApply now →

Selective

Level 3 · Research

Research groups and fellowships

Twelve-week mentored projects on open problems in evaluations, interpretability and governance.

12 weeksMentored

How selection worksApply →

Level 2 · Learn · both tracksReserved · no course yet

Technical AI Governance

A future course where the two tracks meet. There is no Technical AI Governance course yet; this card reserves its place in the system so it is ready when the course launches. Deep indigo: the clean colour between teal and the red side of the wheel, instead of a muddy blend.

Technical AI SafetyAI Governance

Syllabus and detailsApply now →

Use levels for

Programme and pathway cards
The footer (Level 1)
One feature panel per page at most (a quote, a newsletter, a cover)

Never

Invent new gradients or bright gradients
Mix two levels' accents in one card (the only exception: track tags on a Technical AI Governance card)
Blend two level colours into a new one
Put long-form reading on a level; it belongs on paper

Libre Baskerville + Satoshi.

Baskerville is the logo's own typeface, so every headline speaks with the brand's voice. Satoshi, from the Indian Type Foundry, handles reading, interface and numbers. Hindi uses Anek Devanagari alongside.

Display · Baskerville 400
42–72px / 1.1 / −2%

Learn the hard problem.

H1 · Baskerville 400
34–52px / 1.15 / −1.8%

Understand how you can help.

H2 · Baskerville 400
26–34px / 1.2

Technical AI Safety

H3 · Baskerville 400
22px / 1.3

Cameras, consent and AI

Lede · Satoshi 400
18–20px / 1.6

Free six-week online courses, weekly reading groups and one-to-one career advice.

Body · Satoshi 400
17px / 1.6

Each cohort meets once a week with a facilitator. You read, discuss and build a small project. No research background is needed.

Label · Satoshi 700
13px, red, sentence case

Applications open

Meta · Satoshi 400
13px

Delhi · Thu 23 Oct · 6:30 pm

Hindi · Anek Devanagari
line-height 1.75

एआई सुरक्षा सीखिए, उन लोगों के साथ जो इसकी परवाह करते हैं।

Headlines are always regular weight (never bold) and sentence case. No uppercase tracked labels, no monospace except real code. Hindi copy is written or reviewed by a native speaker, never machine-translated; Hindi pages use Anek Devanagari with 1.75 line height and no letter-spacing.

Space, shape and alignment.

A 12-column grid, an 8px baseline, a fixed size ladder and a motion map. Every page is built on these before anything is styled.

Spacing

4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128. Sections are 160px apart on desktop, 128px on tablets and 96px on phones; thin strips get 96px; a heading sits 48px above its content.

Corners

8px for chips and inputs, 16px for every card, 24px for large photos. Pills only for buttons.

Pill

Surfaces

Paper for pages, white cards with a hairline, levels for commitment, frosted glass for things floating over photos.

Alignment: left by default

Heroes, section titles, cards and lists are left-aligned so they read fast and line up with what follows. Section intros use a split (title left, text right) on desktop. Centre only short single moments: the newsletter, a closing call to action, a pull quote.

Breakpoints

Design at 375, 768, 1024 and 1440. Layouts go to one column below 860px; content is never wider than 1200px. Text sizes are in rem, so pages still work at 200% zoom.

Motion

Motion explains a change; it never decorates. See the motion map below. Everything stops for people who turn motion off.

Text on photos

Bottom-left, title and subtitle on one shared edge 24px in, over a deep bottom fade. Frosted panel only on hero photos.

The grid, across and down

12 columns, three starting lines

1200px wide, 24px gutters. Content may start on only three columns:

Column 1: headings, text, full-width rows.
Column 5: content beside a label (programme steps, FAQ, footer links).
Column 7: halves (hero photo, section intros and controls, event details).

8px baseline, three rhythm steps

160 · before a section (128 tablet, 96 phone)

96 · before a thin strip

48 · heading to its content

Every space comes from the 8px scale. Fixed steps, never fluid in-between values, so every section opens the same way.

Size ladder

One clear step between levels, so nothing competes.

Hero headline	72 · Baskervville
Section title	54 · Baskervville
Big number	42 · Baskervville
Event or feature title	34 · Libre Baskerville
Card title	24 · Libre Baskerville
Step label	20 · Libre Baskerville
Body / small / meta	17 / 15 / 13 · Satoshi

Motion map

Every movement has a job.

Page load	Hero text rises in once (600ms)
Scrolling	Section heads and card groups fade up 12px, once
Menus	Fade and drop 6px (180ms)
Details	Unfold smoothly (300ms)
Tabs	Crossfade (300ms)
Hover / press	Arrow nudges 3px, photo zooms 2.5%, button presses to 98%
Ambient	Only the fellows strip; pauses on hover, focus or click

Never: parallax, bounce, scroll-jacking, count-up numbers, auto-advancing carousels.

How every page is built

Wireframe on the grid: place every block on column 1, 5 or 7.
Lock spacing and type: pick from the rhythm steps and the size ladder before styling.
Build with the shared components only.
Check before showing: the 12-column and 8px overlay at 1440 and 375, and layout shift under 0.05.

Shared components.

Every page is built from the same small set. If a page needs something new, it is added here first.

Buttons and links

Apply to Cohort 2 All events on Luma Book a call

Apply Upcoming events

Every standalone action is a pill. Crimson primary on paper (one per section), ink outline for the rest; on dark cards the paper pill and the glass outline. Coloured text links only inside a sentence, like this. Accent colours on levels are labels, never links.

State	What changes	Timing
Rest	Crimson fill, or ink outline, or paper fill on dark
Hover	Fill darkens 8% (outline turns solid ink); arrow moves 3px. Mouse only, so phones never get stuck in hover	150ms
Press	Shrinks to 98% and darkens once more: the button feels physical	80ms
Focus	2px crimson ring with a 3px gap (pale red on dark); keyboard only	instant
Disabled	45% opacity, no pointer; always say why nearby
Loading	Label hidden but keeps the width, small spinner, aria-busy; never a second click	until done

Never change size, border width or font weight on hover (the layout would jump). 44px minimum tap area. One primary button per section. Label says the outcome (“Apply to Cohort 2”), not “Click here”.

One primary button per view. Labels say exactly what happens.

Chips and labels

In-person summitReading groupApplications open6 weeksFree

Line icons, 1.6px stroke, in a 44px tile

Chips are sentence case, 8px corners. A red dot marks a live or in-person item.

MeetupBengaluru

Getting into AI safety research

Bangalore meetupSat 1 Nov

Guest seminarsTalks with researchers

Fri 23 Oct · 6:30 pmDelhi

Reading group: Cameras, consent and AI

In person · FreeRSVP on Luma

Left to right: the image card (gallery, recaps, stories), the photo tile (categories, event types) and the event card. All three share 16px corners, a hairline border and the same shadow.

Form

Tabs and filters

Breadcrumb

FAQ accordion

Do I need a research background?

No. The course starts from the basics. Some programming helps for the technical track.

How much time does it take?

About five hours a week for six weeks.

No events in Hyderabad yet

Start a reading group in your city, or join one online this week.

Start a group See online events

Every control has a 44px touch target and a visible focus ring. Errors sit under the field, say how to fix it, and use the error colour with an icon. Empty states suggest a next step.

Real people, honestly captioned.

Our own events in natural colour. Wide crops for heroes, 3:2 for cards, 4:3 for tiles. Text over a photo sits on frosted glass or a dark fade, never directly on busy areas.

Bangalore meetup

Students, engineers and researchers getting into AI safety research together.

Name the event and place in every caption
Crop to faces and people, not ceilings
Keep colour natural; no filters or duotones

Files

Photos as AVIF with WebP and JPEG fallback; logos and icons as SVG. Export at 1x and 2x of the displayed width (hero 1200/2400px, card 600/1200px, tile 400/800px), sRGB, quality around 70 (AVIF) or 80 (JPEG). Name files in lowercase with hyphens, e.g. bangalore-meetup-group.jpg, never spaces. Always give width, height and real alt text describing who and where. In dark mode, photos dim slightly and partner logos sit on a light tile.

Don't

Use stock photos, robots or AI clichés
Guess names or venues you can't confirm
Place text where it covers faces

How we sound.

Plain, warm and exact. We say the useful fact and show how things work.

We say

Six weeks. Online. Free.

Not

An intensive, world-class frontier programme.

We say

Two volunteers read every application.

Not

A rigorous, premier selection process.

We say

AI Safety India (AISIN only as a short form after first use)

Spelling

Indian English: programme, organisation. Sentence case everywhere.

One identity, every page.

The same paper, red, levels, type and cards on four very different pages. This is what makes the site feel like one organisation.

Home · hero

A community for AI safety in India

Learn the hard problem with people who care.

Free courses, weekly reading groups and career advice.

ApplyCome to an event

Programme page · header

Level 2 · Learn

Technical AI Safety

Six weeks. Online. Free.

Apply by Sat 1 NovSyllabus

Events page · list

Come to something this month.

Sat 1 NovBengaluru

Getting into AI safety research

Sat 8 NovOnline

Cooperative AI research

Gallery · moments

Moments from the community.

MeetupsBengaluru

Speaker sessionsOnline and in person

Ownership and changes.

The brand only stays consistent if someone owns it. New components are added here first, then used on pages.

Owner

Brand owner: to be named by AI Safety India. They approve new colours, components and templates, and keep this guide and brand.css in step.

Pages: Logo kit · Icons · Applications · Voice · Print · Checklist · Homepage. Code: brand.css and tailwind-theme.css.

Changelog

2.5	Live logo for the website nav: “India” cycles through the official languages with matching script fonts, a pause, reduced-motion support and no layout shift. Static logo everywhere else.
2.4	Button states: rest, hover (mouse only), press, focus, disabled and loading, with timings; no size or weight change on hover.
2.3	Layout system written down: 12 columns with three starting lines (1, 5, 7), 8px baseline with 160 / 96 / 48 rhythm steps, a size ladder, a motion map and the page-building process.
2.2	Display cut for big headlines: Baskervville 400 (a lighter, higher-contrast Baskerville revival) for the hero and section titles, 40px and up. Libre Baskerville stays for smaller headings, cards and captions, and in the logo.
2.1	Logo lockup rebuilt: symbol 2.6× cap height (was 3.7×), minimum 28px on screen. Actions rule: standalone actions are always pill buttons; no free-standing red or accent text links; accents are labels only.
2.0	Colour review applied (expert guidance, peer survey, measured tests; see colour-review.html). Three layers: brand (crimson, paper, ink), programme levels (4 in use + indigo reserved), status. Explore one step lighter #2A2622, Technical one step deeper #260810, Research richer #260A2B, indigo #1E2042 reserved. Accents and text on levels brightened so all pass APCA 75 (pink #FFBCCB, aqua #A9E4DE, lavender #CACDFC, orchid #ECC1E1, body #E2D9D5). Secondary text #544F48, red on dark #FF9AA3 (labels only), success #2C6938, warning #835300. Teal, crimson, paper, ink, error and info unchanged.
1.9	One level family: every level follows one recipe (same gradient, same strength, accents at the same lightness, hues in wheel order). Indigo calmed to #1F2144 to match the others. Research plum moved towards violet (#27122B, orchid accent #EBC0E0) because it was almost identical to Technical wine (ΔE 1.6, now 4.1).
1.8	Planned Technical AI Governance course gets its own level: deep indigo #1E1F4A with lavender #C3C6F5 (9.4:1), always with both track tags. No course yet; the level is reserved.
1.7	AI Governance level is now deep teal #123B3D with aqua #9FDCD6 (was umber, which looked almost the same as wine and charcoal, especially for colour-blind readers). Technical AI Governance first used the neutral Level 1 card with both track tags (replaced in 1.8). New track tag component.
1.6	Calmer components: event card on one left edge (no calendar tile), softer 52px form fields with a custom checkbox and clearer errors, segmented tabs with a white thumb instead of a black ring.
1.4	Homepage built on the system; accessibility fixes (focus not hidden by the sticky nav, tab states, 44px targets).
1.3	Icon set, brand applications, motion, image and breakpoint rules, dark-mode image treatment, Tailwind theme.
1.2	Status colours, increased contrast and reduced transparency, forms, alerts, tabs, accordion, breadcrumb, modal, empty state; new crimson logo kit; voice and terms guide.
1.1	One red: Crimson #9B1C2E (Pantone 201 C). Light first, dark tokens ready. Photo captions aligned. Left-aligned layouts.
1.0	First system: paper, levels, Libre Baskerville + Satoshi, cards, buttons.

What we keep, what we fix.

Four principles.

Paper, then depth

One red

Serif speaks, sans works

Real people

The logo is only the logo.

Paper, ink and one red.

The levels: our signature.

Speaker sessions and reading groups

Technical AI Safety

AI Governance

Research groups and fellowships

Technical AI Governance

Libre Baskerville + Satoshi.

Space, shape and alignment.

Spacing

Corners

Surfaces

Alignment: left by default

Breakpoints

Motion

Text on photos

The grid, across and down

12 columns, three starting lines

8px baseline, three rhythm steps

Size ladder

Motion map

How every page is built

Shared components.

Getting into AI safety research

Reading group: Cameras, consent and AI

No events in Hyderabad yet

Withdraw your application?

Real people, honestly captioned.

Files

How we sound.

One identity, every page.

Learn the hard problem with people who care.

Technical AI Safety

Come to something this month.

Getting into AI safety research

Cooperative AI research

Moments from the community.

Ownership and changes.

Owner

Changelog