Complexity, resolved.
The brand book for geerd — a technology company that builds software for the people who run education.
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.
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.
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
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
- AComplexity, resolved.recommended
- BSimple software for complex institutions.
- CBuilt for the people who run education.
- DWhere complicated becomes clear.
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
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
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.
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.
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.
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.
Teal scale
#F2F9F9
#E6F4F3
#B3E0DD
#00968F
#007A74
#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
FFFFFF
F6F8F8
EEF1F1
DEE3E4
C4CCCE
9BA6A9
7A868A
5B666A
3D474B
262F33
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
Teal 500 is for buttons, fills and text ≥ 18 px medium. Teal text below that size uses 600. Never convey state by color alone.
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.
geerd
abcdefghijklmnopqrstuvwxyz
0123456789
Weights 400, 500 (default), 600. Never bold 700+. Always negative tracking at display sizes.
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
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.
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
Inside components: 4–16. Between components: 16–32. Between blocks: 48–64. Between sections: 96 (product), 128–160 (marketing).
Radius · borders · elevation
Borders are 1 px #DEE3E4; structure comes from lines and space, not shadows. Elevation is reserved for things that actually float: menus, modals, toasts.
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.
Buttons
Heights 32 / 36 / 44. One primary per view. Verbs, not nouns: “Issue transcript”, not “Submit”.
Forms & inputs
Notifications
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.
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.
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.
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
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.
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.
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.
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.
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
- Lead with the problem. Name the actual situation before the feature.
- Short sentences. One idea each. Cut the second adjective.
- Specific beats impressive. “24 hours” beats “fast”. “37 files” beats “many”.
- Say what happens. Buttons and messages describe the outcome.
- Respect the reader. They run an institution. Don't explain what a spreadsheet is.
Website direction
One headline. One explanation. One product visualisation. One action. Then the problems, one at a time. Whitespace is the layout.
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.
Applications
The same six ingredients — ink, white, teal, Outfit, Manrope, the ring — across every surface.
Sales deck · 16:9 · white slide, one statement, one number pair
Social · 1:1 · ink, one fact, cropped ring
Mobile · 44 px targets, same rules
Engineering
yasmine@geerd.ma
Card · 85 × 55 mm · the one place teal fills a surface
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