geerd — Brand identity system Version 2.0 · 2026
geerd symbol

Complexity, resolved.

The brand book for geerd — a technology company that builds software for the people who run education.

geerd If the software solves complexity, the brand embodies simplicity.

Contents

A system for looking like what we are: serious software.

This document defines how geerd thinks, speaks and looks. It is written for designers, engineers, marketers and partners. Every rule has a reason; when a rule is not here, default to less.

  1. 01Brand strategy
  2. 08Graphic language
  3. 02Positioning
  4. 09Iconography
  5. 03Logo system
  6. 10Photography
  7. 04Color system
  8. 11Motion
  9. 05Typography
  10. 12Brand voice
  11. 06Layout system
  12. 13Website direction
  13. 07Product design language
  14. 14Applications

Philosophy

Complexity in.
Simplicity out.

Institutions run on fragmented systems, spreadsheets and repetitive work. geerd turns that into software that is clear, connected and reliable. The brand does the same job visually: it absorbs complexity so the viewer never sees it.

Complicated→Clear Fragmented→Connected Manual→Automated Problems→Solutions
01

Brand strategy

Short sentences. No adjectives we cannot prove. The strategy is written to be repeated by an engineer as easily as by a founder.

Brand essence

Clarity.

Brand promise

We make it simpler.

Mission

Turn the operational complexity of education into simple, reliable software.

Vision

Every institution runs on infrastructure as intelligent as the people inside it.

Positioning

For institutions running on fragmented systems, geerd is the technology company that turns operational complexity into clear, connected software — built by people who understand the work.

One line

geerd builds software that makes educational institutions simpler to run.

Personality

Intelligent Simple Precise Confident Human Reliable Curious Quietly ambitious

Like a team of very capable people who understand difficult problems and build elegant solutions. Never flashy, childish, bureaucratic, “startup-y”, futuristic or academic.

Values

Precision
We get the details right because our users cannot afford to.
Clarity
If it needs explaining, it is not finished.
Ownership
A problem noticed is a problem we own.
Curiosity
We learn how institutions actually work before we build.
Respect for time
Every click, meeting and sentence should earn its place.

Brand attributes

  • —Technology-first, education-fluent
  • —Calm under complexity
  • —Engineered, not decorated
  • —Considered in every detail
  • —Timeless over trendy

Brand story

Behind every institution is a small number of people holding it together: registrars, programme directors, finance teams, administrators. They work with tools that were never designed for them — spreadsheets that break, systems that do not talk to each other, processes that live in someone's head.

geerd was started to build for those people. We study how the work is really done, then build software that makes it clear, connected and dependable. Not a platform for the sake of a platform — solutions to specific, difficult problems, done properly.

Elevator pitch

Universities and schools run on dozens of disconnected systems and manual processes. geerd replaces that friction with precise, connected software — so the people who run institutions can spend their time on the institution, not the admin.

Tagline options

  1. AComplexity, resolved.recommended
  2. BSimple software for complex institutions.
  3. CBuilt for the people who run education.
  4. DWhere complicated becomes clear.
02

Positioning

geerd solves problems for education. Not an LMS, not a “school management system”, not a platform. A technology company with a domain.

Territories explored

TerritoryReadingVerdict
Simplifying complexityTrue to the work, universal, hard to out-position.Core
Removing operational frictionConcrete and provable. The daily proof of the core.Core
Tools for people who run educationHuman and specific. Names the audience, not the sector.Support
Intelligent infrastructureRoom to grow into. Use once the product breadth earns it.Future
Modernizing education operationsAccurate but dates itself; “modern” expires.Avoid
Making institutions work betterWarm but vague — everyone claims it.Avoid

Positioning statement

geerd is the technology company that turns the operational complexity of educational institutions into clear, connected software.

We compete on the quality of the solution, not the size of the platform. Products come and go; the promise stays: we make it simpler.

How we describe the offer

Notan EdTech platform · a school management system · an LMS · an all-in-one suite Saysoftware for institutions · solutions for [the specific problem] · the company behind BrightStep, EasyClass and AlmaHub
03

Logo system

The existing logo is kept. It is already what the brand needs: geometric, lowercase, quietly distinctive. This chapter formalises how it is used.

geerd primary logo

Reading the mark

A solid circle held inside an open ring. The ring opens at the top-right with two flat terminals — a system with an entry point, a process that closes. The solid circle is the resolved state. Read together: complexity taken in, a clear result held at the centre.

Wordmark

Four lowercase letters built from the same circle as the symbol; the ‘e’s share the diagonal cut of the ring opening. Always lowercase, always as supplied artwork — never typed.

Refinement (minor)

Brand teal is fixed at #00968F, sampled from the artwork. Recommend a vector master with the symbol-to-wordmark gap set to exactly 0.25× symbol height, and optical alignment of baseline to the ring's lower edge.

Primary · teal on white
Dark background · white
Monochrome · ink, for print and partners
Teal field · white, sparingly

Symbol — standalone

The symbol works alone: app icon, favicon, avatar, watermark, slide corner. Use it alone only where “geerd” is already established on the same surface or the context is the product itself.

Clear space & minimum size

x x
x
Height of the symbol. Nothing enters the x-zone.
Min
Horizontal logo 96 px / 24 mm. Symbol 24 px / 6 mm.
Place
Top-left or bottom-left, aligned to the grid margin. One logo per surface.

Incorrect usage

Never stretch, recolor, rotate, outline, add shadows or gradients, place on busy imagery, or set the wordmark in a typeface.

04

Color system

White, near-black, cool neutrals and one teal. Teal is a signal, not a paint: it marks the resolved state, the primary action, the brand. Roughly 5% of any surface.

Primary · geerd Teal
HEX #00968F
RGB 0 150 143
CMYK 100 0 5 41
Pantone 3282 C (nearest)
Ink
#0B1215
RGB 11 18 21
CMYK 48 14 0 92
White
#FFFFFF
RGB 255 255 255
CMYK 0 0 0 0

Teal scale

50
#F2F9F9
100
#E6F4F3
200
#B3E0DD
500
#00968F
600
#007A74
700
#005F5A

500 for fills and brand. 600 for teal text on white (4.9:1) and hover. 700 for pressed. 50–100 for selected rows and subtle tints only.

Neutral scale · cool, teal-tinted

0
FFFFFF
50
F6F8F8
100
EEF1F1
200
DEE3E4
300
C4CCCE
400
9BA6A9
500
7A868A
600
5B666A
700
3D474B
800
262F33
950
0B1215

Neutrals carry a trace of teal so grey never reads as dead. Never use pure #000 or pure grey.

Roles

Background · #FFFFFF, canvas #F6F8F8
Text primary · #0B1215
Text secondary · #3D474B
Text tertiary / labels · #7A868A (4.6:1)
Border · #DEE3E4, strong #C4CCCE
Primary action / brand · #00968F
Selected / tint · #E6F4F3

Semantic · used only for state

Success · #1F7A4D · tint #E8F3EC
Warning · #B26A00 · tint #FBF1E2
Error · #C23B3B · tint #FBEAEA
Info · Teal 600 · tint #E6F4F3

Semantic colors appear as text, a 6 px dot or a thin tint — never as a filled block. Charts use neutrals plus one teal; a second series uses Teal 200.

Accessibility

Ink on white18.6 : 1 AAA
Teal 600 on white4.9 : 1 AA
White on Teal 5003.6 : 1 large / UI
White on Ink18.6 : 1 AAA

Teal 500 is for buttons, fills and text ≥ 18 px medium. Teal text below that size uses 600. Never convey state by color alone.

05

Typography

Two open-source families, one job each. Outfit for display: geometric, circle-based, the same DNA as the wordmark. Manrope for text and interface: a quieter geometric with open apertures and true tabular numerals.

Display · OutfitOFL · Google Fonts

geerd

abcdefghijklmnopqrstuvwxyz
0123456789

Weights 400, 500 (default), 600. Never bold 700+. Always negative tracking at display sizes.

Text & UI · ManropeOFL · Google Fonts

2,048

Enrolment closed for 1,284 students across 32 programmes. 98.7% of transcripts were issued within 24 hours.

Weights 400, 500, 600, 700 (numbers only). font-variant-numeric: tabular-nums on every table and metric.

Type scale

StyleSampleSpec
DisplayComplexity, resolved.Outfit 500 · 72/74 · −0.03em
H1Software for institutionsOutfit 500 · 48/52 · −0.02em
H2One system for admissionsOutfit 500 · 32/37 · −0.015em
H3Transcripts issued this termManrope 600 · 22/29 · −0.01em
Body LWe study how the work is actually done, then build software that makes it clear, connected and dependable.Manrope 400 · 18/29 · 0
BodyEnrolment data syncs every night at 02:00. Changes made in AlmaHub appear in EasyClass by morning.Manrope 400 · 16/26 · 0
UIExport transcript  ·  Assign programme  ·  Filter by cohortManrope 500 · 14/20 · 0
CaptionLast synced 4 minutes ago · 1,284 recordsManrope 400 · 13/19 · +0.005em
Numbers98.7%   1,284   02:00Manrope 600 · tabular · −0.02em
LabelProgramme · Cohort 2026 · StatusJetBrains Mono 500 · 11 · +0.08em · caps

Case. Headlines are sentence case, always. Never all caps except the 11 px mono label. Never title case.

Measure. 45–65 characters for body. Headlines wrap with text-wrap: balance; body with pretty.

Fallbacks. system-ui, sans-serif. Documents: Outfit and Manrope embedded; email: Helvetica Neue / Arial.

06

Layout system

Space, alignment, proportion, hierarchy. One 4 px base, one 12-column grid, one radius scale — shared by the website, the products and the documents.

Grid · 12 columns · 24 px gutter

Marketing
Container 1200 px, margins 48 px (≥1024), 24 px (mobile). Text measure 8 columns max.
Product
Fluid. Sidebar 240 px, content padding 32 px, page max 1440 px. Dense data may run full width.
Documents
A4 / Letter, 20 mm margins, 6-column grid.
Align
Left-aligned by default. Centre only the cover, empty states and single-CTA moments.

Spacing scale · base 4

4
8
12
16
24
32
48
64
96
128
160

Inside components: 4–16. Between components: 16–32. Between blocks: 48–64. Between sections: 96 (product), 128–160 (marketing).

Radius · borders · elevation

4 · input
6 · button
8 · card
12 · modal
full · status
flat · default
raised · hover
overlay

Borders are 1 px #DEE3E4; structure comes from lines and space, not shadows. Elevation is reserved for things that actually float: menus, modals, toasts.

07

Product design language

The product is the brand's strongest expression. Calm, precise, efficient. Lines instead of cards, hierarchy instead of decoration, one teal action per view.

Overview/Enrolment
Search

Enrolled

1,284

+112 vs last term

Pending files

37

12 awaiting documents

Transcripts issued

98.7%

within 24 h

Fees collected

82%

18 overdue

Recent applications
All · 37 Incomplete Master
StudentProgrammeStatusFee
Salma BennaniMSc FinanceComplete4,200
Youssef El AmraniBBA Year 1Documents3,800
Inès TaziExec. EducationComplete6,500
Omar IdrissiMSc DataOverdue4,200
Kenza AlaouiBBA Year 2Complete3,800
Enrolment by week8 weeks
W01W08

Buttons

Heights 32 / 36 / 44. One primary per view. Verbs, not nouns: “Issue transcript”, not “Submit”.

Forms & inputs

Notifications

Transcripts issued
212 documents sent to students.

Loading

Empty state

No applications yet

They will appear here as students apply.

Close enrolment for BBA Year 1?

37 incomplete files will be moved to the waiting list. You can reopen enrolment at any time.

Tables. Row height 40. Numbers right-aligned, tabular. Row dividers #EEF1F1, header divider #DEE3E4. Selected row Teal 50. No zebra stripes.

Charts. Neutrals for context, teal for the value that matters. No gradients, no 3D, no legends where a label will do.

Navigation. Left sidebar, flat list, 6–8 items max. Current item is white on the grey rail. Breadcrumb in the header.

Filters. Pill chips; active chip is Teal 100 with Teal 600 text and a count. Filters never hide the total.

08

Graphic language

One family of devices, all taken from the symbol: the open ring, the resolved dot, the flat terminal. Used one at a time, at scale, with a lot of air. Never as pattern or wallpaper.

01 · The open ring

270° arc, flat ends, opening top-right. The frame of a system. Used cropped and large as a section or slide device.

→
02 · Many to one

Grey fragments resolve into a single teal dot. The transformation story. Static or animated; the teal element is always the result.

03 · The line

1.5 px rules connecting nodes. Flow, process, integration. Horizontal or vertical, never diagonal, never curved.

Cropped,
at scale.
04 · Scale & crop

The ring bleeds off the edge so only a fragment shows. Distinctive without being literal. Max one device per composition.

Rules. Devices are ink or teal on white / grey, or teal or white on ink. Stroke widths 1.5 (diagram), 8–14 (device). No gradients, no glow, no blur.

Don't. Don't tile the ring. Don't combine devices. Don't draw abstract “network” meshes, hexagons, isometric cubes or circuit boards.

Product screens are graphics. The best illustration of geerd is a real, cropped interface at high resolution on a neutral field.

09

Iconography

Circle-based geometry, 1.5 px stroke, round caps — the logo's construction at 24 px. Icons label; they never decorate.

Grid · 24 px · 20 px live area

Stroke
1.5 px at 24; 2 px at 32+; never scaled below 20 px.
Caps
Round caps and joins. Corner radius 2 px on rectangles.
Geometry
Circles and straight lines. Perfect circles where a circle is plausible. No 45° detail smaller than 2 px.
Fill
Outline by default. Filled variant only for the selected navigation state.
Color
Inherit text color. Teal only when the icon is the primary action.

Core set

search
student
calendar
chart
grid
arrow
done
add
document
settings
filter
selected

Production set: extend from an open-source 24 px / 1.5 stroke library with round caps (e.g. Lucide) and redraw anything that breaks the circle rule. Never mix libraries on one surface.

10

Photography

Editorial, not stock. Real people doing real work in real institutions — shot like a documentary, graded like a product. Photography is optional; when in doubt, use the product instead.

01 · a registrar at her desk, screen half in frame, natural window light, shot from the side
02 · detail — hands, a keyboard, a printed transcript
03 · architecture — a corridor, an atrium, concrete and light

Subjects. People who run institutions, at work. Environments and details. Software on real screens, never composited. No posed groups, no handshakes, no students smiling at laptops.

Treatment. Natural light, neutral grade, slightly lifted blacks, low saturation. No teal tint, no duotone, no filters. Crop tight or very wide; avoid the middle distance.

Composition. Off-centre subject, quiet negative space where type will sit. Photos sit in the grid with 8 px radius; full-bleed only on the website hero and deck section openers.

11

Motion

Motion explains state; it never performs. One easing curve, three durations, and the ring as the only signature movement.

Signature · the ring closes

The contour draws clockwise to 270° — outlined, never filled — then a point at the centre grows until it almost meets the ring, leaving the thin band of the icon. Used for app launch, long-running processes and completion. It is the only branded animation; everything else is functional.

Easing
cubic-bezier(0.2, 0.8, 0.2, 1) — everything. Linear only for progress and shimmer.
150 ms
Hover, focus, toggles, color changes.
250 ms
Menus, dropdowns, tooltips, row expand.
400 ms
Modals, page transitions, drawers. Nothing longer in the product.
Enter
Fade + 8 px rise. Exit: fade only, 60% of enter duration.
Never
Bounce, overshoot, parallax, scroll-jacking, auto-playing loops in the product, animated gradients.
12

Brand voice

Clear, intelligent, direct, human. We don't argue that technology is revolutionary. We show that we understand the problem and have solved it.

Principles

  1. Lead with the problem. Name the actual situation before the feature.
  2. Short sentences. One idea each. Cut the second adjective.
  3. Specific beats impressive. “24 hours” beats “fast”. “37 files” beats “many”.
  4. Say what happens. Buttons and messages describe the outcome.
  5. Respect the reader. They run an institution. Don't explain what a spreadsheet is.
Neverrevolutionary · game-changing · seamless · empower · leverage · next-generation · AI-powered (as a headline) · unlock · supercharge · 10× Prefersimpler · clear · connected · reliable · in one place · without the spreadsheet · built for · takes minutes
Web headlineRun your institution without running after it.
Web bodyAdmissions, grades, documents and fees live in one system that your teams actually use. geerd replaces the spreadsheets and the chasing.
ProductEasyClass manages programmes, gradebooks and transcripts for higher-education institutions. Formulas are defined once; every transcript is right.
CTASee it with your data  ·  Talk to an engineer  ·  Issue your first transcript
Sales deck“Your registrar's office issues 3,000 transcripts a year from four spreadsheets. Here is what that looks like with one system.”
UI copyEnrolment closed. 37 files moved to the waiting list. Undo
ErrorWe couldn't save the grade. Your connection dropped — nothing was lost. Try again.
LinkedInA business school we work with used to close its grading period in three weeks. This term it took four days. Same people, same rules — the formulas now live in one place. That's the whole story.
13

Website direction

One headline. One explanation. One product visualisation. One action. Then the problems, one at a time. Whitespace is the layout.

geerd

Run your institution without running after it.

Admissions, grades, documents and fees in one system your teams actually use. geerd builds software for the people who run education.

OverviewStudentsProgrammesGradesDocuments
Enrolled

1,284

Transcripts

98.7%

Fees

82%

Salma BennaniMSc FinanceComplete
Youssef El AmraniBBA Year 1Documents
Inès TaziExec. EducationComplete

The problem

Four spreadsheets, three systems, one person who knows how it all fits.

Most institutions run on tools that were never designed for them. Every term the same reconciliation, the same chasing, the same risk of a wrong transcript.

Products

BrightStep

Admissions and student files, from application to enrolment.

Learn more →

EasyClass

Programmes, gradebooks and transcripts. Define the rules once.

Learn more →

AlmaHub

The institution's data, connected — one record for every person.

Learn more →

Show us the process that hurts.

A 30-minute call with an engineer, not a sales deck.

geerdCasablanca · geerd.ma

Rhythm. 120–160 px between sections. Each section makes one point and has at most one CTA. The product screenshot is the hero image.

No. No logo walls above the fold, no feature grids with icons, no stock photos of campuses, no floating gradient blobs, no chat widget on page load.

Yes. One ink section per page, real numbers from real customers, engineers' names on the “Talk to us” page.

14

Applications

The same six ingredients — ink, white, teal, Outfit, Manrope, the ring — across every surface.

Sales · Université Hassan II04 / 12

3,000 transcripts a year. Four spreadsheets. One person.

geerd
3 wks before4 days after

Sales deck · 16:9 · white slide, one statement, one number pair

geerd

Grading period: 3 weeks → 4 days.

Social · 1:1 · ink, one fact, cropped ring

BrightStep

Today

To review37
Salma BennaniComplete
Youssef El AmraniDocuments
Inès TaziComplete
Omar IdrissiOverdue

Mobile · 44 px targets, same rules

geerd
Yasmine Berrada
Engineering
yasmine@geerd.ma

Card · 85 × 55 mm · the one place teal fills a surface

geerd

Software for the people who run education.

Conference booth · back wall · ink, logo, one line, one ring — nothing else

In one sentence

Make simplicity feel sophisticated.

Assets to produce next. Vector logo master (SVG/PDF) with the refinements in 03; favicon and app-icon set; Figma library of 07; font licence note (all OFL); deck template; document template.

Questions about this system: brand@geerd.ma

geerd — Brand identity system Part two · Version 2.0 · 2026

How geerd behaves.

Part one defined what geerd looks like. Part two defines how it moves, what it publishes and how it holds up in a feed — so the system survives a timeline, a product launch and a freelancer who has never met us.

Nothing in part one changes. Chapter 34 lists the eight places part two makes a 1.0 rule sharper, and why.

Written for

Social and marketing designers, motion designers, product designers, freelancers, and the tools any of them point at a brief.

The one test

Does this communicate complexity, resolution, or the product that creates the resolution? If not, remove it.

geerd Complexity in. Simplicity out.
15

Brand in motion

The one page to read before making anything. Everything after it is the working detail.

geerd exists in the space between complexity and clarity.

Complexity is not the enemy. Unresolved complexity is.

An institution is complex because the work is real: thousands of people, decisions with consequences, records that have to be right. None of that should be flattened or apologised for. What should end is the part where the complexity is left for a person to hold in their head, reconcile by hand, and carry alone.

geerd takes fragmented systems, information and processes and turns them into something a person can understand and act on. That is the whole company. So the identity does the same job, on every surface, every time:

Many become one.

Noise becomes signal.

Fragments become structure.

Complexity becomes resolution.

Which gives every piece of work the same shape and the same discipline. Show the complexity honestly. Resolve it completely. Let the product be the proof. Then stop — the resolution is the last thing that happens, and nothing decorative may follow it.

The consequence

Complexity may be visually rich.

Resolution must be visually simple.

Teal appears only where something has been resolved.

Motion carries the transformation, never the decoration.

If a piece has no complexity to resolve, it is an announcement — keep it to one line.

Do not make geerd more
complicated in the attempt
to document its simplicity.

16

Brand behaviour

One rule decides most compositions: complexity may be visually rich, resolution must be visually simple. They are never given equal weight.

Complexity · may be rich

Twenty-two records, six partial connections, no alignment and no teal. It is allowed to be dense, crowded and uncomfortable, because that is an accurate picture of the work before geerd.

May fill the frame. Carries no teal at all — nothing has been resolved yet.

Resolution · must be simple

One point, held in one closed system. The same twenty-two records, reconciled. Everything that could be removed has been removed — that is what makes it read as an answer.

Occupies little. Carries all the teal. One resolution per surface, and it is the last thing that happens.

The two vocabularies

Build complexity with

Multiple dots

Fragments of records and interface

Overlapping information

Lines and multiple paths

Dense, deliberately uneven layouts

Repeated elements

Disconnected systems

Grey — never colour

Build resolution with

Reduction

Alignment to one axis

Simplification

One clear point

A completed ring

A clean, real interface

A single signal

Teal

How the two are weighted

Area

Uneven, always

Complexity may take most of the frame. Resolution takes a fraction and still wins, because it is the only thing aligned and the only thing in teal. Equal halves make a comparison chart, not a geerd composition — the exception is the Before → After format, where the split is the point.

Order

Complexity first

In a static piece, complexity sits above or left of the resolution. In a moving piece, it comes first in time. Never resolve before you have shown what was wrong — a resolution with nothing to resolve is decoration.

Teal

Earned, not applied

Teal marks the resolved state. It follows that a piece with no resolution — a problem post, an open question — gets no teal beyond the logo. This replaces “roughly 5% of any surface” with a test you can actually apply.

Stopping

Nothing after

Once the resolution has landed, the composition is finished. No flourish, no secondary animation, no third statement. The silence after the answer is part of the answer.

The test, applied

Does this communicate complexity, resolution, or the product that creates the resolution?

Three answers are valid. A fourth — “it makes the layout feel more designed” — means the element comes out. Applied honestly, this removes most of what would otherwise get added.

17

The graphic toolkit

Twelve primitives, all derived from the mark. Everything geerd draws is one of these, used at the stated budget. Nothing else gets invented on a deadline.

01 Dot

One unit of information — a person, a record, a decision, a result.

Moves
Appear, move, resize, cluster, align, collapse.
With
Line, ring, grid. It is the only primitive that may repeat freely.
Budget
Unlimited. Never below 4 px; 6 px in product, 12–24 px in social.
02 Ring

The system that holds the dots. 270° arc, flat terminals, opening top-right.

Moves
Draws clockwise, closes, expands, crops. Never rotates as a whole.
With
One dot at its centre. Never with a second ring.
Budget
Once per composition. It is the signature, so it cannot be common.
03 Arc

A fragment of the ring — a system underway, a process not yet closed.

Moves
Draws along its own path. May rotate up to 90°, never spin.
With
Dots, to show a process mid-flight. Never with a completed ring.
Budget
Sparing. Two at most, and never as a loading-spinner motif.
04 Line

Connection, flow, integration — the path information takes.

Moves
Draws along its own axis, from source to destination.
With
Dots at one or both ends. A line to nowhere is decoration.
Budget
Eight per composition, maximum. 1.5 px. Orthogonal only — never diagonal, never curved.
05 Grid

The substrate — the institution’s existing structure, always already there.

Moves
It does not move. It is the frame the others move against.
With
Anything, behind it.
Budget
Background only, never a subject. 24 px pitch, 1 px, N200 at 8% or less.
06 Fragment

A clipped piece of a record or interface — a row, a cell, half a table.

Moves
Enters by reveal, then aligns. Fragments never fly.
With
Other fragments, deliberately misaligned. That misalignment is the message.
Budget
Three to six to establish complexity. More reads as texture, not as data.
07 Container

A bounded set — a cohort, a term, a programme, one institution.

Moves
Contracts to fit its contents. Never bounces, never pulses.
With
Dots and fragments inside it.
Budget
Sparing. 1 px N200 border, radius 8. Nested containers are never allowed.
08 Crop

Not a shape but an operation: the device runs off the edge so only part shows.

Moves
The frame moves, not the device.
With
Ring, arc, UI frame. This is what keeps them from looking like clip art.
Budget
Often — it is the house move. Bleed off one edge only, never two.
09 Signal

The resolved value — the one dot, number or state that the piece is about.

Moves
Changes colour in 150 ms, then holds absolutely still.
With
Everything. It is what the rest of the composition is for.
Budget
Exactly one per surface. A second signal means neither is the signal.
10 Highlight

Attention on real interface — the product’s own focus treatment, borrowed.

Moves
Fades in over 250 ms. Does not travel, does not throb.
With
A UI frame, only. Never on a drawn diagram.
Budget
One at a time. 1.5 px teal border plus a 3 px Teal 100 ring — 1.0 §07 exactly.
11 Cursor

The person inside the system. Proof that a human is doing the work.

Moves
Orthogonal paths, ease-out, and a 400 ms pause before every click.
With
A UI frame. Nothing else.
Budget
Only in product video. A real OS cursor at 24 px — never a stylised hand or glove.
12 UI frame

A real, cropped interface at high resolution on a neutral field.

Moves
Reveals, or is entered by a cursor. The interface itself animates as 1.0 §11.
With
Highlight, crop, one line of type.
Budget
Prefer it over any drawn device whenever the point is proof. It is the strongest graphic geerd owns.

How they combine

A composition uses one device at rest. Grid may sit behind it and a signal may sit inside it — those two do not count as a second device, because neither can be a subject on its own.

Legal: grid + fragments + signal. Ring + signal. UI frame + highlight + crop. Dots + lines + signal.

What never combines

Ring with arc. Two rings. Nested containers. A drawn diagram with a real interface in the same frame. Any device tiled into a pattern.

1.0 §08 said “don’t combine devices”, which read as a ban on all combination. The rule is really about subjects: one subject, supported.

18

The dot and the ring

The mark is already the whole story: a point held inside an open system. These are the two elements geerd owns, and the only behaviours they are allowed.

The dot

The unit of information

A dot is one thing that can be counted: a student, a record, an application, a decision, a signal, a result. It is never an abstract particle — if you cannot say what one dot is, the composition has no subject.

Eleven behaviours

→

Appear

A record enters the system.

→

Disappear

A step is no longer needed.

→

Multiply

Volume made visible.

→

Move

Information travels.

→

Resize

Weight, share, or importance.

→

Connect

Two systems integrate.

→

Cluster

A cohort, a term, a group.

→

Separate

A set breaks into cases.

→

Align

Reconciliation. The core move.

→

Collapse

Many become one.

→

Resolve

The outcome. Terminal.

The ring

The system that holds it

A ring is the system, process or boundary around the dot: an institution, a term, a workflow, a completed state. It opens at the top-right because a system that takes anything in needs somewhere to take it in.

Eight behaviours

→

Open

A closed system gains an entry point.

→

Close

A process completes. The signature.

→

Expand

Scope grows — one school to many.

→

Contract

Scope narrows to a single case.

→

Rotate

Re-orientation. Never a spin.

→

Crop

The house move — part shows.

→

Reveal

The system is disclosed.

→

Encircle

A value is placed in a system.

Three more ring states exist in 1.0 and are unchanged: primary teal on white, white on ink, and mono ink for print.

How the two relate

At rest

Dot inside ring

The resolved state, and the logo. If a composition ends anywhere else, it has not resolved.

Ring, no dot

A process running

A system with nothing in it yet — loading, in progress, enrolment open. Legitimate, but never the final frame.

Dot, no ring

A value, unplaced

A number without a system around it. Use for a metric; it is the one case where a bare teal dot is allowed.

Many dots, no ring

The problem

The complexity state. All grey. Adding a ring here resolves the picture too early and kills the tension.

Do

Say out loud what one dot is before you draw forty.

Keep the ring at 270°, flat terminals, opening top-right — always.

Let one dot be teal, and only after it has been resolved.

Use the ring at scale and cropped; it is strongest as a fragment.

End on the dot inside the ring. That is the sentence’s full stop.

Don’t

Tile either element into a pattern, texture or background.

Spin the ring, pulse it, or use it as a loading spinner.

Draw a second ring, or nest one inside another.

Make the dots into a constellation, network mesh or node graph.

Colour more than one dot teal — then nothing is the signal.

19

Motion principles

Eight verbs. Each one means something, so each one is used only when that is what happened. Motion communicates transformation; it never decorates.

01 Multiply

Introduce complexity. The first beat of almost every geerd piece.

Behaviour
Dots fade up and scale from 0.6 to 1, staggered 40–60 ms in no readable order.
Use for
Opening a problem. Showing volume — applications, transcripts, records.
Never
As ambience behind a headline. As an endless particle field. Above 40 dots.
Timing
600–900 ms for the full set
Easing
cubic-bezier(0.2, 0.8, 0.2, 1)
02 Scatter

Show disconnection — systems that do not talk to each other.

Behaviour
An ordered row breaks to deliberately irregular positions. No two dots left on an axis.
Use for
“Four systems, three spreadsheets.” The state before integration.
Never
Explosions. Rotation. Anything that reads as energetic rather than untidy.
Timing
900 ms
Easing
cubic-bezier(0.2, 0.8, 0.2, 1)
03 Connect

Show integration — the moment separate things join.

Behaviour
1.5 px lines draw from source to destination, orthogonal only, staggered 200 ms.
Use for
Integration and data-flow stories. AlmaHub in particular.
Never
Network meshes, constellations, node graphs. More than eight lines. Any diagonal.
Timing
300 ms per line
Easing
cubic-bezier(0.2, 0.8, 0.2, 1)
04 Align

Show organisation. This is reconciliation, and it is the brand’s core move.

Behaviour
Dots travel to one axis. The farthest starts first so they land together.
Use for
Reconciliation, sorting, one source of truth, closing a term.
Never
Snapping with overshoot. Landing one at a time like a slot machine.
Timing
700 ms, all arriving together
Easing
cubic-bezier(0.2, 0.8, 0.2, 1)
05 Collapse

Simplification. Many become one — literally, on screen.

Behaviour
An aligned row converges on one point, shrinking as it travels; only the survivor remains.
Use for
Consolidation. Replacing many steps with one. The beat before Resolve.
Never
Implosion, flash, squash-and-stretch. Collapsing something never aligned first.
Timing
800 ms
Easing
cubic-bezier(0.2, 0.8, 0.2, 1)
06 Resolve

The outcome. The one branded movement geerd owns.

Behaviour
The surviving dot turns teal in 150 ms; the ring draws clockwise around it to 270°.
Use for
Once, at the end. App launch, completion, the last frame of any film.
Never
Twice in one piece. Mid-sequence. As a transition between two other ideas.
Timing
150 ms colour, then 900 ms ring
Easing
cubic-bezier(0.2, 0.8, 0.2, 1)
07 Reveal

Disclose information progressively, in reading order.

Behaviour
Fade plus an 8 px rise, staggered 60–90 ms. Identical to the product’s enter, slowed.
Use for
Lists, statistics, captions, table rows, the beats of an argument.
Never
Letter-by-letter typing. Wipes with a visible edge. Anything revealing out of order.
Timing
400 ms each, 60–90 ms stagger
Easing
cubic-bezier(0.2, 0.8, 0.2, 1)
08 Focus

Move attention to the signal without moving the frame.

Behaviour
Everything else drops to 25% opacity. The signal holds, and may scale to 1.04 at most.
Use for
Highlighting one row, field or number in a real interface.
Never
Blur. Spotlight vignettes. Arrows. Zooming past 1.2×. Circling things by hand.
Timing
250 ms
Easing
cubic-bezier(0.2, 0.8, 0.2, 1)

The canonical sentence

Multiply → Scatter → Connect → Align → Collapse → Resolve

Read in order, the verbs are the company’s story. That sequence is the ident (chapter 29) and the spine of every geerd film. Reveal and Focus are supporting verbs — they carry information, not transformation.

Grammar

A piece uses three verbs at most. Six is the ident; anything else is showing off.

Verbs never overlap. One finishes, then the next begins.

Resolve is terminal. Nothing animates after it.

Any verb may be dropped. None may be reordered.

20

Motion specification

1.0 said the ring closing is the only branded animation. That still holds inside the product. Chapter 19 exists because film and social are not the product — so motion now has two tiers, and the boundary between them is strict.

Tier one

The product

BrightStep, EasyClass, AlmaHub, and any interface a person can click.

1.0 §11 applies unchanged: 150 / 250 / 400 ms, nothing longer.

The ring closing is the only branded animation. Everything else is functional.

No auto-playing loops, ever.

The eight verbs of chapter 19 do not apply here.

Tier two

Communication

Film, social, reels, event screens, decks, the website’s hero — anything watched rather than used.

The eight verbs apply. Three per piece, in order.

Beats run 600 / 900 / 1400 ms. A full arc is 2.5–4 s.

Loops are allowed, and must run 4 s or longer.

Resolve is terminal, then hold 800 ms before the cut.

The boundary test. If a person can click it, it is tier one. If they can only watch it, it is tier two. A product demo video is tier two showing tier-one motion — the interface inside it still animates at product speed.

Durations, in milliseconds and frames

Duration @ 30 fps @ 60 fps Used for Tier
150 ms 5 f 9 f Hover, focus, toggles, colour change Product
250 ms 8 f 15 f Menus, tooltips, row expand, Focus Product
400 ms 12 f 24 f Modals, page transitions, Reveal Product
600 ms 18 f 36 f Multiply, a short Reveal sequence Narrative
900 ms 27 f 54 f Scatter, Connect, Align, the ring closing Narrative
1400 ms 42 f 84 f A full beat with a hold — the longest single move Narrative

Easing · the only curve

cubic-bezier(0.2, 0.8, 0.2, 1)

Everything, at every duration. In After Effects: ease out ~80, ease in ~20. Linear is permitted only for progress bars and shimmer. No other curve is approved — do not switch to ease-in-out because a move is long.

Stagger

40 / 60 / 90 ms

40 ms for dots, 60 ms for rows and captions, 90 ms for full blocks. Elements that belong together land together — stagger the start, share the finish.

Exit

Fade only

60% of the enter duration, no movement. Things leave quietly; only arrivals are worth watching. Unchanged from 1.0.

Hold

800 ms minimum

After Resolve, the frame is still for at least 800 ms before the cut or loop. Without the hold the resolution reads as another transition.

Never, in either tier

Bounce, elastic, overshoot, spring

Cartoon squash and stretch

Rotation beyond 90°, or any spin

Random particle systems and drifting ambience

Parallax and scroll-jacking

Animated gradients, glows, light sweeps

Letter-by-letter typing

More than three flashes per second

Accessibility

On the web, every animation in this system sits behind prefers-reduced-motion: durations drop to 0 and loops run once. A reader who has asked their OS for calm gets the resolved frame immediately.

In video, the same intent applies by construction: no strobing, no high-frequency flicker, and no essential information carried by movement alone — every moving statement also exists as type on the frame.

Captions are never the only channel either. If the voiceover says the number, the number is on screen.

21

The content system

Four levels of hierarchy and one five-step formula. Between them they answer the question that stops most work: what goes on this, and in what order.

Four levels, in falling weight

Level 1

The idea

One sentence. The whole point. If the reader takes nothing else, they take this.

Outfit 500 · 88–120 px · −0.03em · Ink, or white on ink

Level 2

The evidence

The number, the fact, the screenshot that proves level 1 is not an opinion.

Manrope 600 tabular · 40–64 px · Ink; teal if it is the resolved value

Level 3

The explanation

Two lines at most, for the reader who is already interested.

Manrope 400 · 30–34 px · 1.5 · Neutral 700

Level 4

The metadata

Product name, date, source, logo. Findable, never prominent.

JetBrains Mono 500 · 20–22 px · +0.08em caps · Neutral 500

The two-second test. Show the piece to someone for two seconds, then take it away and ask what it said. If they give you level 1, it works. If they say “something about geerd”, the branding is competing with the message — shrink level 4.

Sizes above are for a 1080 px canvas. Scale proportionally; never below 20 px for level 4, which is the floor for legibility on a phone.

Applied · 4:5

Insight

Your registrar shouldn’t be the integration layer.

3,000 transcripts a year.
Four spreadsheets.

AlmaHub keeps one record, so an export stops being a decision someone has to make twice.

geerd AlmaHub

L4

L1

L2

L3

L4

One idea, one proof, one explanation, and the mark small enough that it never arrives before the sentence does.

The formula · every piece of geerd content, in order

01 Problem

The real situation, in the institution’s own words. No product yet.

“3,000 transcripts a year, issued from four spreadsheets.”

Format 01 · 06

02 Friction

Say why it costs something — time, risk, or a person’s evening.

“Every one is a chance to send the wrong grade.”

Format 01 · 03

03 Resolution

What changes. One sentence, and the first place teal is allowed.

“Formulas are defined once. Every transcript is right.”

Format 02 · 05

04 Proof

The product, metric or customer. The claim stops being a claim.

“Grading period: 3 weeks → 4 days.”

Format 04 · 05 · 07

05 Signal

Close in the brand’s own language — the dot, the ring, the mark.

The dot inside the ring. Nothing after it.

Format 08

How to use it

A single post takes one or two steps, not five. A carousel takes all five, one per slide. A film takes all five as its structure. The formula is the order, not the length.

If a piece has no problem in it, it is an announcement — go straight to step 5 and keep it to one line.

The failure to watch for

Starting at step 3. A post that opens with what geerd does, to a reader who has not been reminded what is broken, reads as a brochure.

Lead with the problem — 1.0 §12, unchanged, and the single most important rule in this book.

22

The social system

Four canvases, one margin, one type ramp, and a teal budget per format. Sizes are the easy part — the budget is what keeps a feed of geerd posts looking like one company.

Four canvases · dashed line is the 8% margin

Square · 1:1

1080 × 1080

X, LinkedIn. Safe everywhere, strongest for a single statement.

Portrait · 4:5

1080 × 1350

The default. Most feed height LinkedIn and Instagram will give you.

Landscape · 16:9

1920 × 1080

YouTube thumbnails, X cards, slides, event screens.

Vertical · 9:16

1080 × 1920

Reels, Shorts, Stories. Motion lives here.

Margin · one number

8% of the short edge

88 px on any 1080 canvas. Nothing but a deliberate full-bleed crop crosses it. One margin for every format means a freelancer never has to ask.

9:16 safe area · platform UI eats the frame

Top220 px — account handle, story ring Bottom420 px — caption, CTA, share row Sides88 px — as every other canvas

Which leaves 904 × 1280 for the work. Design in that box, not the full frame, or the logo ends up under a Reels button.

Type ramp · at 1080 px, scale proportionally

RoleFamilySizeTrackingLeadingNotes
Statement Outfit 500 88–120 px −0.03em 1.06 The idea. One per canvas.
Statement · small Outfit 500 56–72 px −0.025em 1.1 When the idea needs three lines.
Hero number Outfit 500 120–200 px −0.035em 1 Metric format only.
Evidence Manrope 600 40–64 px −0.02em 1.15 Tabular numerals, always.
Body Manrope 400 30–34 px 0 1.5 Two lines maximum.
List item Manrope 500 34–40 px 0 1.35 Before / After stacks.
Label JetBrains Mono 500 20–22 px +0.08em 1 Uppercase. The format name, the date.

The teal budget · maximum share of the canvas, by format

01 The problem 0% Logo only. Nothing has been resolved yet.
02 Before → After ≤ 25% The After block, and nothing above it.
03 The insight ≤ 2% One underline, or one dot.
04 The product As the UI does Whatever the real interface uses — one action.
05 The metric ≤ 8% The resulting number only. Never the starting one.
06 The workflow ≤ 5% The final node only.
07 The quote ≤ 2% The rule under the attribution, or the mark.
08 The announcement ≤ 10% The mark, plus at most one word.

1.0 put teal at “roughly 5% of any surface”, which was impossible to check and quietly ignored. The budget replaces it: teal marks the resolved state, so its share is decided by how much of the piece is the resolution. A problem post gets none. The logo never counts against the budget.

Platforms

LinkedIn

4:5 primary · 1:1 · 16:9 link card

Thought leadership, announcements, customer stories, metrics

Formats 02 03 05 07 08

Instagram

4:5 feed · 9:16 stories and reels

Insight, workflow, brand, behind the work

Formats 01 03 06 07

X

16:9 · 1:1

Insight, metric, announcement — short and quotable

Formats 03 05 08

YouTube

16:9 · 1280×720 minimum

Thumbnails. Must read at 320 px wide — three words at most

Formats 04 05

Short-form video

9:16

Problem → resolution arcs, 15–30 s

Chapters 28 31

Carousel

4:5 · 5–7 slides

One argument, one step per slide

Chapter 27

Logo on social

Bottom-left, on the margin. Symbol alone at 40 px on 1:1 and 4:5, where the account name is already on screen. Full horizontal logo at 96 px minimum on 16:9 and 9:16, which get shared out of context.

One logo per canvas — including the one inside a screenshot. If the product UI in your image shows the logo, leave it out of the layout.

Grid

Six columns on 1:1, 4:5 and 9:16. Twelve on 16:9. Gutter 3% of the short edge — 32 px at 1080.

Text sits on four columns of six, so a line breaks before it reaches the far margin. A statement that runs the full width reads as a paragraph, not a point.

23

Social formats · 01–04

Eight repeatable formats cover almost everything geerd publishes. Pick one, fill it in, and the post is on-brand without a designer having to judge it. Specimens are shown at 4:5; every format states its own variation.

01 The problem

The problem

3,000 transcripts.
4 spreadsheets.
1 person who knows
how it works.

Every August, the same reconciliation.

geerd

geerd.ma

4:5 · 1080 × 1350

Layout

Statement lower-left on four of six columns. The complexity field sits top-right and is cropped by the frame. Nothing is centred.

Typography

Outfit 500 · 92 px · −0.03em. One numeral begins each line — the numbers are the design.

Image

None. If an image is used it is the product, never a photograph of people.

Colour

Ink field, white type, Neutral 500 dots. Zero teal. Nothing has been resolved.

Graphic elements

Dot × 12, scattered. No lines — nothing is connected yet.

Do

Let the counts do the work. Get them from the institution.

Keep the last line human. Someone is holding this together.

Don’t

Add the solution, or any teal.

Use red or a warning colour. Complexity is not an error.

Number the lines, or add an icon per line.

Variation

9:16 — dots run as a vertical column down the right edge, statement in the lower safe area.

02 Before → after

Before → after

Before

4 systems

3 spreadsheets

17 manual steps

After

1 workflow

1 source of truth

geerd

AlmaHub

4:5 · 1080 × 1350

Layout

Two stacked blocks joined by a vertical rule. The After block bleeds to both margins so it reads as a change of ground, not a box.

Typography

Before in Manrope 500 · 38 px. After in Outfit 500 · 52 px — the resolution gets the display face.

Image

None.

Colour

White above, Teal 100 below, one phrase in Teal 600. ≤ 25%, all of it after the rule.

Graphic elements

The vertical rule — a Line, so orthogonal. Never a drawn arrow at an angle.

Do

Keep the counts true.

Make After shorter than Before. Three down to two, always fewer.

Don’t

Red for before, green for after.

Equal type sizes — that makes it a comparison, not a resolution.

A diagonal or curved arrow between the halves.

Variation

1:1 — side by side, Before on the left, the rule running vertically between them.

03 The insight

Insight

Five systems shouldn’t require
five exports.

Every export is a decision someone makes twice — once to run it, once to trust it. One record removes the second.

geerd

AlmaHub

4:5 · 1080 × 1350

Layout

Statement across four of six columns in the top third. Body two lines beneath. The lower two-thirds stay empty, deliberately.

Typography

Outfit 500 · 96 px · −0.03em. Body Manrope 400 · 32 px.

Image

None. The whitespace is the image.

Colour

White. One 6 px teal underline beneath the single word carrying the argument. ≤ 2%.

Graphic elements

The underline. That is the whole graphic.

Do

Make it arguable — someone should be able to disagree.

Name the thing the reader already resents.

Don’t

Quotation marks. It is a statement, not a quote.

An author photo or a byline.

Centring it, or filling the empty area.

Variation

16:9 — statement on the left half, right half empty. Reads well as an X card.

04 The product

Product · BrightStep

37 incomplete files.
One list that chases them.

Pending files Request documents
Youssef El Amrani BBA Year 1 Documents
Omar Idrissi MSc Data Overdue
Salma Bennani MSc Finance Complete
Inès Tazi Exec. Education Documents
Kenza Alaoui BBA Year 2 Complete
geerd

BrightStep

4:5 · 1080 × 1350

Layout

One line of type top-left, the real interface below it, bleeding off the right edge.

Typography

Outfit 500 · 64 px — smaller than other formats, because the screenshot is the argument.

Image

A real interface at 2× minimum. Never a device mockup, never in perspective.

Colour

Neutral 50 field so the white UI separates. Teal only where the product itself uses it — one action.

Graphic elements

UI frame plus Crop. One Highlight if a specific row is the point.

Do

Crop into the part that proves the line.

Use real names, real programmes, real numbers.

Don’t

Three screens fanned out, shadows, reflections, floating perspective.

Placeholder data. It is visible from across the room.

A second teal action.

Variation

16:9 — interface fills the right two-thirds, type on the left. The strongest YouTube thumbnail geerd has.

24

Social formats · 05–08

The proof and closing formats. 05 and 07 carry evidence; 06 explains a process; 08 is the whole announcement system, deliberately kept to one line.

05 The metric

Metric

3 weeks

4 days

Grading period at Université Hassan II. Formulas are defined once instead of rebuilt every term.

geerd

EasyClass

4:5 · 1080 × 1350

Layout

Two numbers stacked and joined by a vertical rule. The result is the largest object on the canvas.

Typography

Before Outfit 500 · 108 px in Neutral 400. After Outfit 500 · 168 px in Teal 600. Tabular numerals.

Image

None.

Colour

White. Teal on the resulting number only. ≤ 8%.

Graphic elements

The vertical rule. No chart, no arc, no progress ring.

Do

Name the institution and the process underneath.

Let scale carry the change — the result is bigger because it is better.

Don’t

Bar charts, donuts, percentage rings, confetti.

Teal on the starting number.

A number you cannot source.

Variation

1:1 — the two numbers side by side, rule vertical between them.

06 The workflow

Workflow

One record, five stages,
no re-entry.

ApplicationReviewDecisionEnrolmentStudent record

A file is entered once, at application. Everything after it reads the same record.

geerd

BrightStep

4:5 · 1080 × 1350

Layout

One horizontal axis, five nodes, labels beneath, statement above.

Typography

Statement Outfit 500 · 76 px. Node labels JetBrains Mono 500 · 19 px uppercase.

Image

None.

Colour

White, Neutral 400 nodes, Neutral 200 axis. Final node teal inside a ring. ≤ 5%.

Graphic elements

Dot × 5, Line × 1, Ring × 1 — on the last node only.

Do

Use the institution’s own stage names.

Five stages maximum. Six means the process has not been understood yet.

Don’t

Swimlanes, or arrowheads at every step.

Curved or diagonal connectors.

An icon for each stage.

Variation

9:16 — the axis runs top to bottom, which suits a Reel’s reading direction.

07 The quote

Customer

We stopped reconciling.
That is the whole change.

Nadia Fassi

Registrar · Université Hassan II

geerd

EasyClass

4:5 · 1080 × 1350

Layout

Statement in the upper middle, attribution below a teal rule. Never centred.

Typography

Quote Outfit 500 · 86 px. Name Manrope 600 · 34 px, role Manrope 400 · 28 px.

Image

Optional, and documentary per 1.0 §10 — at work, natural light. Never a headshot on white.

Colour

Neutral 50 field. A 1.5 px teal rule above the attribution. ≤ 2%.

Graphic elements

The rule. Nothing else.

Do

Give the role. The role is what makes it credible.

One sentence. Cut to the clause that means something.

Don’t

Quotation marks, five-star graphics, or a rounded card with a coloured left border.

The words “success story”, “journey” or “partner”.

A logo wall of customers underneath.

Variation

4:5 with a documentary portrait bleeding off the left edge, quote on the right.

08 The announcement

Product · February 2026

AlmaHub now writes back to your SIS.

geerd

geerd.ma

4:5 · 1080 × 1350

Layout

Label and date at the top, then the mark and one line, optically centred.

Typography

Outfit 500 · 84 px. Nothing else on the canvas above 32 px.

Image

None.

Colour

Ink field, mark in teal. ≤ 10%.

Graphic elements

The mark at 96 px. The only format where the mark itself is the graphic.

Do

State the fact, in the present tense.

Put the date in the label so it is findable later.

Don’t

“We’re excited to announce”. Emoji. Ribbons.

A feature list, or a second sentence.

Stretching one fact across a carousel.

Variation

1:1 for X. For a partnership, two marks separated by a 1.5 px vertical rule.

Choosing between them

Work back from the formula in chapter 21. A problem step is format 01 or 06. A resolution step is 02 or 05. Proof is 04, 05 or 07. If a post is only news, it is 08 and it is one line.

Rotate. Four format-03 insights in a row makes an account that looks like a quote generator, however good each one is.

When none of them fit

Use 03 with a smaller statement, or 04 with more type. Those two absorb almost anything.

Do not invent a ninth format for one post. If the same gap appears three times, that is a real format — write it up, add it here, and give it a teal budget like the rest.

25

In the wild · LinkedIn

Six posts as they would ship, caption included. The creative and the copy are one piece of work — a good format with a hyped caption is still a hyped post.

Insight

Your registrar shouldn’t be
the integration layer.

Four systems, reconciled by hand, by one person who carries the risk personally.

geerd

AlmaHub

Format 03 · Thought leadership

Caption

A registrar’s office should not be the place where four systems are reconciled by hand. In most institutions, it is. Someone exports from the SIS, exports from the LMS, matches them in a spreadsheet, and carries the risk personally. AlmaHub keeps one record. The export stops being a decision.

Metric

9 days

2 days

Document issuance at a 12,000-student university, after transcripts were generated from the record instead of assembled from exports.

geerd

AlmaHub

Format 05 · Proof

Caption

Document issuance at a 12,000-student university: 9 days to 2 days. Nothing about the workload changed. What changed is that the transcript is generated from the record instead of assembled from four exports. The seven days were reconciliation.

Customer

I used to know where every file was because I remembered.
Now I don’t have to remember.

Fatima-Zahra Cherkaoui

Director of Admissions · 4,200 applications a year

geerd

BrightStep

Format 07 · Customer story

Caption

Fatima-Zahra Cherkaoui runs admissions for 4,200 applications a year. “I used to know where every file was because I remembered. Now I don’t have to remember.” That is the change we are actually selling. Not a dashboard — the end of holding an institution in your head.

Product · EasyClass

Define the formula once.
Every transcript agrees.

MSc Finance · Semester 2 Publish grades
Salma Bennani Coursework 40% 16.5
Youssef El Amrani Coursework 40% 14.0
Inès Tazi Coursework 40% 15.25
Omar Idrissi Coursework 40% 12.75
Kenza Alaoui Coursework 40% 17.0
geerd

EasyClass

Format 04 · Product feature

Caption

Grade calculation, defined once at the programme level. Every transcript in the programme is produced the same way, because there is only one definition of the calculation. No per-cohort spreadsheet. No formula that drifted in 2023 and was never caught. EasyClass. Define the rules once.

The problem

Every August,
the same three weeks.

3,000 transcripts. Four spreadsheets. One person who cannot take leave in August.

geerd

geerd.ma

Format 01 · The problem

Caption

Every August, the same three weeks. 3,000 transcripts. Four spreadsheets. One person who knows how it all fits together — and who therefore cannot take leave in August. We build for that person.

Release · February 2026

AlmaHub now writes back to your SIS.

geerd

geerd.ma

Format 08 · Announcement

Caption

AlmaHub now writes back to your SIS. Until this release the connection was read-only. From today, a corrected record in AlmaHub updates the source system directly. One fewer export. One fewer place for the two to disagree.

The first two lines

LinkedIn truncates at roughly 140 characters. The problem has to be stated before “…see more”, or the post is a headline nobody opened.

Every caption above states its problem in sentence one.

Rhythm across a month

Roughly: two problem or insight posts, one proof, one customer, one product, one announcement. Complexity outnumbers resolution, as it does in the work.

Never two consecutive posts in the same format.

Links and tagging

One link, in the first comment or the last line — never mid-caption. Tag the institution only with their written agreement, and name the role, not the person, unless they have approved the quote.

No hashtag stacks. Three at most, lowercase.

26

In the wild · Instagram

The same eight formats, with the caption doing less work — an Instagram reader is scrolling, not reading. The image has to hold the whole idea.

Feed · 4:5

Insight

Complexity is expensive.

It is paid in evenings, in re-entered data, and in the one person who cannot go on leave in August.

geerd

geerd.ma

Format 03

Workflow

Five stages.
One record.

ApplicationReviewDecisionEnrolmentRecord

Entered once, at application. Nothing after it is re-typed.

geerd

BrightStep

Format 06

Customer

The spreadsheet was never the problem. Owning it alone was.

Karim Belhaj

Head of Student Records · 8,400 students

geerd

AlmaHub

Format 07

Before → after

Before

3 exports

2 reconciliations

1 late transcript

After

1 record

0 exports

geerd

AlmaHub

Format 02

Four posts, four formats. Seen together in a profile grid they still read as one account, because the margin, the type ramp and the teal budget do not change between them — not because they share a template.

Stories and Reels · 9:16 · the safe area is not optional

Safe area

Design in
this box.

Not the full frame.

geerd

Teal = platform UI

220 top, 420 bottom, 88 sides. What is left is 904 × 1280.

The problem

3,000 transcripts.
Four spreadsheets.

One person who knows how it works.

geerd

Format 01 · 9:16

Statement sits low, where the eye lands and the thumb does not.

Metric

3 weeks
to 4 days.

Grading period, Université Hassan II.

geerd geerd.ma

Rules for vertical

One idea per story. If it needs two, it needs two stories.

Type never smaller than 32 px at 1080 — it is read at arm’s length on a phone.

The logo goes inside the safe box, bottom-left, like every other canvas.

A link sticker counts as part of the bottom keep-out — leave the space empty for it.

Reels: the first frame is a still of the resolved state. Autoplay means frame one is the thumbnail.

What Instagram is for

The work, and the thinking behind it. Insight, workflow, the occasional documentary photograph of an institution per 1.0 §10.

Not a second LinkedIn. Announcements and metrics belong there; here they read as noise.

Never, on any platform

Stock photographs of students, graduation caps, classrooms, or anyone pointing at a laptop. Illustrated mascots. Emoji in the artwork.

Education is the domain. Software is the product — chapter 33.

27

In the wild · Carousel

Six slides, one per step of the formula in chapter 21. A carousel is the only place geerd runs the whole argument — so it is the one place all five steps appear.

The August problem 01 / 06

Every August,
the same three weeks.

How one university stopped rebuilding its transcripts by hand.

geerd

Cover

Stops the scroll. States the situation, not the product.

Problem 02 / 06

3,000 transcripts.
4 spreadsheets.
17 manual steps.

Each one assembled from exports taken on different days.

Problem

The counts, in the institution’s own numbers. Still no product.

Friction 03 / 06

Every one is a chance
to send the wrong grade.

And every correction is a second letter, a second signature, and a phone call from a parent.

Friction

Why it costs something. This is the slide most decks skip.

Resolution 04 / 06

Define the formula once.

Every transcript agrees.

The calculation lives at the programme level, not in a file someone copied last year.

Resolution

What changes. One sentence, and the first teal in the set.

Proof 05 / 06

3 weeks

4 days

Grading period, Université Hassan II, first term on EasyClass.

Proof

The metric. The claim stops being a claim.

geerd 06 / 06

Complexity, resolved.

Show us the process that hurts. A 30-minute call with an engineer.

geerd geerd.ma

Signal

Close in the brand’s own language. One action, no feature list.

Length

Five to seven

Six is the shape above. Below five the argument is missing a step; above seven it is a document, not a carousel.

Teal across the set

Slides 4–6 only

Nothing is teal until something has been resolved. Swiping through, the colour arriving is the argument landing.

Consistency

Margin and counter

Same 88 px margin, same counter position on all six. Backgrounds and type sizes change; the frame never does.

Don’t

A “swipe →” prompt on slide 1.

The logo on every slide — first and last only.

A slide that only says “The problem”.

Stretching one fact across six slides.

28

The video system

Every geerd film has the same spine: complexity, tension, transformation, resolution, geerd. What changes between a 15-second reel and a 90-second brand film is which beats are dropped — never the order.

The structure

Complexity → tension → transformation → resolution → geerd

Five beats · share of the running time

01

10%

Opening

Open inside the problem. A real screen, a real number, a real desk — never the logo.

On screen
One statement, or one cropped interface. Grey, ink, white.
Verbs
Reveal
Teal
None

02

25%

Problem

Complexity accumulates. Counts rise, fragments arrive, systems fail to line up.

On screen
Dots multiply and scatter. Fragments of four different interfaces.
Verbs
Multiply → Scatter
Teal
None

03

35%

Transformation

The turn. Information connects, then organises. This is the longest beat because it is the argument.

On screen
Lines draw between the dots; the field resolves onto one axis.
Verbs
Connect → Align
Teal
None until the very end of the beat

04

20%

Resolution

Many become one. The product appears, or the mark does — one of the two, never both.

On screen
Collapse to a single point; it turns teal; the ring closes around it.
Verbs
Collapse → Resolve
Teal
All of it, here

05

10%

Ending

The logo, one line, one action. Still. Held long enough to read twice.

On screen
Ink field, logo, “Complexity, resolved.”, and the URL.
Verbs
None — the frame is still
Teal
The mark

The opening rule

Never open on the logo

A logo at second zero asks for attention before earning it. geerd opens inside somebody’s problem and arrives at the mark. The logo is the last thing on screen, and it is the only place it appears.

The ending rule

One action, held

The end card carries the mark, one line, and one thing to do. It holds for at least two seconds — long enough to read twice — and nothing on it animates.

By type

TypeLengthBeats usedRatioAudio
Brand film 60–90 s All five 16:9 + 9:16 cut Voiceover
Product video 45–60 s 01 02 04 05 16:9 Voiceover
Product demo 2–4 min 01 04 05 16:9 Screen + voice
Social reel 15–30 s 02 03 04 9:16 Captions only
LinkedIn video 30–45 s 01 03 04 05 1:1 or 4:5 Captions only
Explainer 60–120 s All five 16:9 Voiceover
Feature announcement 10–15 s 04 05 1:1 · 9:16 Captions only
Event screen Loop, 20 s+ 03 04 16:9 Silent

Sound

Sparse and low. Room tone, a single soft mark at Collapse, another as the ring closes.

No swooshes, risers, stingers or library “corporate uplift”. If the film only works with music, it does not work.

Voice

One person, unhurried, at a normal speaking pace. Written to chapter 32 — short sentences, specific numbers.

Silence over filler. A held frame with nothing said is a legitimate beat.

Length discipline

If a film runs long, cut beat 03, not beat 02. Losing the problem to keep the transformation leaves an answer to a question nobody asked.

29

The ident

Six seconds. The eight verbs of chapter 19, read in order as a single sentence — which is why it is the ident and not just an animation: it is the company’s argument, performed by the mark.

geerd

Complexity, resolved.

Running

Twenty grey points appear with no order to them. Paths draw between a few — a system, but not a resolved one. The paths fade, the points settle onto one axis, and the row collapses to a single point at the centre. It turns teal. The ring closes around it, and the wordmark arrives.

The dot that survives is not a new element. It is one of the twenty — the same record, now the only one you need to look at.

Standard6.0 s — all six phases. Films, event screens, the website hero. Short3.0 s — drop Connect. Social, pre-roll, feature announcements. Long8.0 s — one point is teal early, lost in the scatter, recovered at the end. SoundTwo soft low marks: one at Collapse, one as the ring closes. Otherwise silent.

Six phases

0.0 – 0.9 s

Multiply

Grey points appear on an ink field, staggered, in no order.

0.9 – 1.8 s

Scatter

Twenty points, none aligned. This is the institution today.

1.8 – 2.6 s

Connect

Orthogonal paths draw between five pairs. A system, but an untidy one.

2.6 – 3.7 s

Align

The paths fade. Every point settles onto one axis, arriving together.

3.7 – 4.0 s

Collapse

The row converges. Twenty become one.

4.0 – 6.0 s

Resolve

The point turns teal. The ring closes around it. The wordmark arrives.

Fixed, and not to be re-cut

Twenty points. Not twelve, not fifty.

Ink field. The ident is never on white.

One teal point, appearing at 3.7 s and not before.

The ring closes clockwise to 270°, flat terminals, opening top-right.

The wordmark is supplied artwork — never typed.

Never

Speed it up to “feel more energetic”.

Add a swoosh, a riser, or a light sweep.

Let the points bounce or overshoot as they land.

Rotate the ring, or draw it anticlockwise.

Put the ident at the start of a film. It closes.

Deliverables to hold centrally

ProRes 4444 with alpha — 6.0 s and 3.0 s, 1920×1080 and 1080×1920.

MP4 H.264 on ink, for anything that cannot take alpha.

Lottie JSON, for web and product splash.

An After Effects project with the twenty points as one controller.

A single PNG of the final frame, for thumbnails and slides.

30

Video production rules

Everything an editor who has never met us needs, in one page. If a question is not answered here, the answer is the plainer of the two options.

Safe areas

16:9 — keep type inside 90% of the frame. 9:16 — 220 px top, 420 px bottom, 88 px sides at 1080 wide. 1:1 and 4:5 — 8% all round. Assume the bottom of a vertical frame will be covered.

Typography

Outfit 500 for statements, Manrope 400/600 for everything else, JetBrains Mono 500 for labels. Minimum 32 px at 1080 — video is read at arm’s length, and compression eats thin type. Never bold 700 in Outfit.

Captions

Burned in, always — most viewers have sound off. Manrope 500, 40–44 px at 1080, white on ink or ink on white, no box, no outline, no drop shadow. Two lines maximum, breaking on sense. Bottom of the safe area, never centred over a face.

Lower thirds

Name in Manrope 600 40 px, role in Manrope 400 30 px, on one 1.5 px teal rule. Enters by fade plus 8 px rise, holds 3 s, exits by fade. Left aligned to the margin. No card, no panel, no logo.

Transitions

Cut. That is the default and usually the answer. A 250 ms cross-dissolve is permitted between two beats of the same idea. No wipes, no slides, no zoom transitions, no whip pans, no light leaks.

UI animation

Inside a product shot the interface animates at product speed — 150 / 250 / 400 ms, per chapter 20. Never re-time a screen recording to look snappier; a real interface at real speed is the proof.

Screen recordings

Record at 2× the delivery resolution, 60 fps, on a clean profile with real data. Hide personal data by changing the record, not by blurring it. No browser chrome unless the browser is the point.

Product highlighting

The product’s own focus treatment: 1.5 px teal border plus a 3 px Teal 100 ring. Everything else drops to 25% opacity. One highlight at a time. Never draw arrows, circles or hand-drawn rings on a screen.

Cursor

A real OS cursor at 24 px. Orthogonal paths, ease-out, and a 400 ms pause before each click so the eye arrives first. Never a giant stylised hand, never a click ripple, never a trail.

Zoom

Push in to 1.2× at most, over 900 ms or slower, and only to move attention. No snap zooms, no zoom transitions between scenes, no continuous slow drift on a static frame.

Backgrounds

Ink #0B1215, white, or Neutral 50. Flat. No gradients, no vignettes, no bokeh, no drifting particles, no blurred office footage behind type.

Logo placement

The logo appears once, on the end card. Not a bug in the corner, not a watermark, not on every frame. The exception is a looping event screen, where the mark may sit bottom-left throughout.

End cards

Ink field. Mark, one line, one action, and the URL. Held 2 s minimum with nothing moving. The last frame of every geerd film is the same frame.

By tool

After Effects

Ease out ~80 / ease in ~20 on every keyframe pair. Build the ident’s twenty points as one controller layer. Export ProRes 4444 with alpha.

Premiere

Cut on the beat, not on the bar. Use the supplied caption style preset; do not re-type it. Match the sequence to 30 or 60 fps and stay there.

Figma

For frames and end cards, not motion. Export at 2×. Use the shared type styles — do not hand-set sizes.

CapCut

Turn off every default: no auto-captions styling, no transitions, no “trending” effects, no stickers. Set text to Manrope and the caption size to 40 px at 1080.

AI video tools

Use them for b-roll of environments and hands, never for people’s faces, screens, or anything presented as a real institution. Never generate a fake interface — use a real screen recording. Grade the output flat and neutral per 1.0 §10.

The delivery checklist

Captions burned in, and a separate .srt.

Every ratio the piece will actually run in — not just 16:9 letterboxed.

Audio peaking at −3 dB, dialogue at −16 LUFS.

The end card held for a full two seconds.

A still of the final frame, exported as PNG.

No temp music, no watermark, no “final_v3_FINAL”.

The one thing to get right

A geerd film is quiet. If a cut, an effect or a music bed is there to hold attention rather than to carry meaning, it comes out — and the film gets better, every time.

The measure is not whether it looks impressive. It is whether someone who runs a registrar’s office would recognise their own week in it.

Specific beats impressive — 1.0 §12, and it applies to pictures as much as to sentences.

31

Short-form storyboard

Twenty-four seconds, 9:16, captions only. The five beats of chapter 28 and six of the eight verbs, in order — a whole argument in the time it takes to decide whether to keep scrolling.

Every August, the same three weeks.

00:00 – 00:03

Reveal

Opens on nothing but the sentence. No logo, no music yet — just the problem, stated.

3,000 transcripts.

00:03 – 00:06

Multiply

Points appear behind the caption, staggered 40 ms. The count is spoken and shown.

Four spreadsheets.

00:06 – 00:09

Scatter

Twenty points now, none aligned. The frame is deliberately uncomfortable.

None of them agree.

00:09 – 00:12

Connect

Orthogonal paths draw between three pairs — connected, but not reconciled.

One record.

00:12 – 00:16

Align

The paths fade. Every point settles onto one axis and arrives together. The longest beat.

Defined once.

00:16 – 00:19

Collapse

The row converges to a single point at the centre. Still grey — not resolved yet.

Every transcript agrees.

00:19 – 00:22

Focus

Cut to the real product. One teal action, everything else at 25%. This is the proof.

Complexity, resolved.

geerd.ma

00:22 – 00:24

Resolve

The point turns teal, the ring closes, the wordmark arrives. Held two seconds. Cut.

Why it works with sound off

Every statement is on the frame. The voiceover adds tone, never information. Read the eight captions in order and the argument is complete.

Where the teal is

Shots 7 and 8 only — nineteen of the twenty-four seconds have none. The colour arriving is the point landing.

Cutting it shorter

For 15 s, drop shots 4 and 6 and shorten 5. Never drop 1, 2 or 7 — the problem and the proof are the film.

Don’t

A hook card that says “WAIT FOR IT”.

Trending audio.

Text that appears word by word.

A face reacting to the product.

32

Voice in practice

1.0 §12 set the principles and they are unchanged. This chapter makes them usable: what good looks like, why it is good, and what to do with a sentence that has gone wrong.

Eight qualities

Clear

One idea per sentence. If a sentence needs a comma to survive, it needs a full stop instead.

Precise

“24 hours”, not “fast”. “37 files”, not “several”. The number is the credibility.

Intelligent

Assume the reader runs an institution. Never explain what a transcript is.

Calm

No exclamation marks, no urgency, no countdowns. The work is serious; the tone is level.

Direct

Say the thing. “Enrolment closed.” not “Enrolment has now been successfully closed.”

Confident

State it and stop. No hedging, and no arguing that technology is important.

Human

Someone is on the other end of every workflow. Name them: the registrar, the coordinator.

Specific

Name the institution, the process, the term. Generic praise reads as having no customers.

Five lines that work, and why

Your registrar shouldn’t be the integration layer.

Names a specific role and a specific job that role should never have had. The reader either recognises their own office or is not the buyer — either way the sentence has done its work.

Five systems shouldn’t require five exports.

The argument is arithmetic. There is no adjective to disagree with, and the reader can check it against their own week in about two seconds.

Complexity is expensive.

Three words that reframe complexity from a fact of institutional life into a cost with a number attached. It opens a conversation instead of closing one.

One source of truth.

Borrowed from engineering, understood by administrators. It states the outcome without describing a single feature.

Less reconciliation. More control.

Names the task people actually spend their week doing. “Data management” is a category; reconciliation is a Tuesday.

Captions

State the problem in sentence one. LinkedIn cuts at ~140 characters.

Five short paragraphs at most. One line each is fine.

Numerals, always: 37, not thirty-seven.

One link — last line or first comment, never mid-caption.

No emoji, no hashtag stacks, no “👇”.

Never open with “In today’s fast-paced educational landscape”.

The test

Could a competitor put their name on this sentence?

If yes, it is not geerd copy yet. Add the number, the role or the institution that only we would know to mention.

Rewrites

What arrives from the internet

What ships

Revolutionising education management with AI-powered insights

Grades are calculated once, the same way, for every transcript.

Empowering institutions to unlock their full potential

Your registrar stops typing the same student in twice.

A seamless, end-to-end platform experience

Admissions, grades and documents on one record.

Get started today — book your free demo!

Show us the process that hurts.

We are thrilled to announce an exciting new partnership

AlmaHub now writes back to your SIS.

Never

revolutionary · game-changing · disruptive · seamless · empower · leverage · next-generation · AI-powered (as a headline) · unlock · supercharge · 10× · cutting-edge · robust · holistic · best-in-class · world-class · journey · “excited to announce” · “thrilled” · “reimagine” · transform (as a claim about the customer)

Prefer

simpler · clear · connected · reliable · in one place · without the spreadsheet · built for · takes minutes · once · the same way · agree · stops · fewer · one · defined · issued · reconciled · on the record

33

Do / Don’t

Six pairs, both sides drawn. The wrong versions are not strawmen — each one is a real thing that gets made when a rule is only written down.

Whitespace is the layout

Do

INSIGHT

Complexity is expensive.

Don’t

WHY GEERD

Complexity is expensive

Institutions everywhere are struggling with fragmented systems and manual processes that cost time.

One idea, and the room around it. Not four cards, a chart and two buttons competing for the same two seconds.

Teal is a signal

Do

Don’t

One source of truth

Teal marks the one thing that resolved. Applied to the whole surface it marks nothing at all — and the brand loses its only accent.

One idea per surface

Do

Your registrar shouldn’t be the integration layer.

Don’t

Cut admissions time by 60%

Integrate every system

Trusted by 40 institutions

Plus: automated grading, real-time dashboards, and a mobile app.

Three claims on one canvas is zero claims remembered. If all three matter, that is three posts — or a carousel.

Complexity is grey

Do

Don’t

Grey says “unresolved”. Colour says “categorised” — which is the opposite of the point, and semantic colour is reserved for real product states.

The product is the illustration

Do

Don’t

A real cropped interface at high resolution is the strongest graphic geerd owns. A mortarboard says “education sector”; the screen says “we built this”.

Lines are orthogonal

Do

Don’t

Orthogonal paths read as a system someone designed. A diagonal mesh reads as “network graphic”, which every technology company on earth already has.

Education is the domain. Software is the product.

geerd is a technology company that happens to understand education deeply — not an education company that happens to make software. Every image decision follows from that.

The distinction is commercial, not aesthetic. The buyer is a registrar, a director of admissions, a CIO. They have seen a hundred brochures with a mortarboard on the cover, and none of them were about the work.

If an image would look at home in a university prospectus, it is wrong for geerd.

Never show

Graduation caps and mortarboards

Students smiling at laptops

Classrooms and lecture halls

A teacher pointing at a screen

Handshakes and posed groups

Illustrated characters and mascots

Books, apples, blackboards, pencils

Campus drone footage

Show instead

Systems and infrastructure

Data, records, and where they disagree

Workflows and their stages

Decisions and who has to make them

Operations — the August week

Institutions as organisations, not buildings

People doing real administrative work

The product, cropped, at high resolution

Do

Use whitespace as the layout.

Carry one strong idea per surface.

Use teal only as the signal.

Let the product prove the claim.

Use motion to communicate transformation.

Use grey for complexity, ink for emphasis.

Name the institution, the role, the number.

Don’t

Fill every space because it looks empty.

Make everything teal.

Add gradients, glows or glass.

Use generic AI imagery or stock education photos.

Over-animate, or animate after the resolution.

Make every post look identical.

Add any effect that does not carry meaning.

34

Revisions to 1.0

Eight places where part two sharpens a rule from part one. None of them change the identity. Each was found by trying to make something real and discovering the rule did not say enough — or said too much.

01 Motion scope 1.0 §11

1.0 said

“The ring closing is the only branded animation; everything else is functional.” Plus: no auto-playing loops.

2.0 says

That governs the product, unchanged. Communication surfaces — film, social, events — are a second tier with the eight verbs of chapter 19. Loops are allowed there, at 4 s or longer.

Why

1.0 was written from the product outwards, and read as a ban on all brand motion. It left film and social with no system, so each piece invented one.

02 Teal quantity 1.0 §06

1.0 said

“Teal is roughly 5% of any surface.”

2.0 says

A per-format budget, from 0% to 25%, set by how much of the piece is the resolution. Chapter 22.

Why

5% could not be measured, so it was quietly ignored. The budget is checkable and follows from what teal already means — the resolved state.

03 Combining devices 1.0 §08

1.0 said

“Max one device per composition.” “Don’t combine devices.”

2.0 says

One subject per composition. Grid behind and Signal inside are supporting elements and do not count as a second device.

Why

Read literally, the rule forbade putting a dot inside a ring — which is the logo. The intent was about competing subjects, not about all combination.

04 Durations 1.0 §11

1.0 said

“150 / 250 / 400 ms. Nothing longer in the product.”

2.0 says

Unchanged for the product. Narrative work adds 600 / 900 / 1400 ms, with a full arc of 2.5–4 s. Chapter 20 gives both in frames.

Why

A 400 ms ceiling makes film impossible. The ceiling was always a product rule; now it says so.

05 Teal contrast 1.0 §06

1.0 said

Notes that white on Teal 500 is 3.6:1 — “large / UI”.

2.0 says

A rule: white on Teal 500 only at 24 px and above, or 19 px at weight 600. Below that, ink on Teal 100.

Why

Social layouts put body copy on teal panels, where 3.6:1 fails. Stating the threshold removes the judgement call.

06 Photography 1.0 §10

1.0 said

“Editorial, not stock.” Correct, and unchanged.

2.0 says

Adds an explicit never-show / show-instead table. Chapter 33.

Why

“Editorial, not stock” is a judgement a freelancer cannot reliably make. A list of eight things not to photograph is one they can.

07 Logo on social 1.0 §03

1.0 said

“One logo per surface. Top-left or bottom-left.”

2.0 says

On social: bottom-left, on the margin. Symbol alone at 40 px on 1:1 and 4:5; full horizontal logo at 96 px minimum on 16:9 and 9:16. A logo inside a screenshot counts as the one.

Why

Posts kept shipping with two marks — one in the layout, one in the product screenshot behind it.

08 Line direction 1.0 §08

1.0 said

“Never diagonal, never curved.” Unchanged.

2.0 says

Adds the consequence: a connection between two points that share no axis is drawn as an L — two orthogonal segments — never a diagonal.

Why

The rule looked impossible to obey when connecting scattered points, so it was being broken. It was never impossible; it just needed the technique naming.

What has not changed

The logo, its construction and its clear space

Outfit, Manrope, JetBrains Mono

Teal #00968F, ink #0B1215, the cool neutral scale

Teal as signal, not as paint

Sentence case, left alignment, negative tracking at display sizes

The 4 px base and the 12-column grid

One easing curve: cubic-bezier(0.2, 0.8, 0.2, 1)

Lead with the problem. Specific beats impressive.

The product design language in §07, entirely

Complexity in. Simplicity out.

The identity in part one was right. Part two exists because a brand that only defines how it looks will be improvised the first time somebody has to make it move.

Assets to produce next

Carried over from 1.0

Vector logo master (SVG/PDF) with the §03 refinements · favicon and app-icon set · Figma library of §07 · font licence note (all OFL) · deck template · document template

New for 2.0

The ident — ProRes 4444 with alpha at 6.0 s and 3.0 s, 1920×1080 and 1080×1920 · Lottie JSON · After Effects project with the twenty points on one controller

Social

Figma library of the eight formats at 1:1, 4:5, 16:9 and 9:16, with the 8% margin and 9:16 safe area as locked guides

Video

Caption and lower-third presets for Premiere and CapCut · the end card as a 2 s ProRes and a PNG · a one-page brief for external editors, extracted from chapter 30

Motion

The eight verbs as an After Effects preset library, each pre-timed and pre-eased

In one sentence

Make simplicity feel sophisticated.

Part one said it and it still holds. Part two only adds the second half: and make it behave that way in a feed, in a film, and on a Tuesday when nobody has time.

Questions about this system

brand@geerd.ma

Version 2.0 · 2026
Supersedes nothing in 1.0