Geem Labs
A complete reference for the Geem Labs visual identity system: Nori color tokens, typography, voice, spacing, and flask mark usage across digital and print contexts.
Color
The brand uses two complete palettes. Light mode is clean and print-adjacent. Dark mode is the default digital expression. Nori is the accent in both palettes, shifting only enough to hold contrast.
Verify Pantone selections against a physical swatch before print production. Screen values are reference values, not final press approval.
The dark palette is the default digital expression. It should feel restrained, precise, and quiet rather than decorative.
Typography
Use Space Grotesk for all headlines, navigation, buttons, labels, stat numbers, tabs, and any UI copy that needs visual authority. Confident and technical without feeling like a template.
Use DM Sans for body copy, metadata, labels, captions, form fields, and long-form text. It should disappear into the reading experience and let the content carry the weight.
Use once per page. If a headline wraps past four lines, shorten the copy instead of shrinking the type.
Use for major section opens, page-level CTAs, modal titles, and presentation title slides.
Use for project cards, internal page modules, and titles that need strength without reading like a page headline.
Use only in metric strips or quantified callouts. Always pair with a quieter DM Sans label below.
Uppercase only. Never title case. This treatment signals interface, not prose.
Use above section starts. Small, crisp, tracked, and intentional.
Use for all flowing paragraphs. Emphasis should be rare and specific.
Use for stat labels, footer text, detail labels, and utility metadata.
Accent Usage
One to three words in a headline may be set in Nori to create rhythm, emphasis, and memory. Use it once per headline maximum. The accent is not for decoration and never belongs in body copy blocks.
Components
Buttons
Primary buttons use inversion and should appear once per section. Secondary buttons are outlined and quieter. Do not invent tertiary button styles unless absolutely necessary.
Stack Tags
Used only to identify tools and systems in project contexts. Never use these as decorative badges or category chips in body copy layouts.
Projects Ticker
Treat the ticker as a quiet project preview, not a second hero. It should feel continuous and low-friction.
Identity Mark
The identity system has two components: a primary wordmark and a flask mark. The wordmark is the default where space allows. The flask mark compresses the system for navigation, favicons, avatars, and constrained surfaces.
The wordmark is the full name set in Space Grotesk 700. Use Nori only on "Labs"; never apply the accent to the full wordmark string.
Primary wordmark. Default for contexts where space allows.
Navigation treatment. Used only in constrained UI contexts.
- Typeface: Space Grotesk 700 always.
- Casing: title case by default.
- Color: "Geem" uses current text; "Labs" uses var(--accent).
- Never apply the accent to the full wordmark string.
- Never italicize, outline, shadow, or apply effects.
- Use the wordmark where it fits.
- Use the flask mark when space is constrained.
- Do not use the flask mark and full wordmark at equal scale.
- Keep the mark subordinate to the page content.
The flask uses a 3.5px outlined Erlenmeyer form with round joins and round caps. Bubbles are filled in Nori for light and dark themes. Do not fill the flask body, apply effects, change stroke weight, or recolor bubbles independently.
Light
Dark
Mono
Reversed
The identity system exists to maintain presence, not assert it. The wordmark is confident because it is plain. The flask mark is useful because it is small. Neither should announce itself.
Spacing
Voice & Tone
The brand voice is the same whether it appears in a bio, a project card, a one-pager, or a presentation. Calm, direct, specific, occasionally dry, and never desperate to impress. The writing should sound like a person with range and judgment, not a job description in a blazer.
- Direct. States the thing plainly.
- Specific. Prefers facts, numbers, and named systems.
- Calm. Confidence without volume.
- Dry. Humor arrives quietly.
- Economical. No extra sentence if the previous one already landed.
- Senior. Speaks from outcomes, not busywork.
- Human. Sounds like a person, not a deck template.
- Motivational. No hustle language.
- Hyperbolic. No overclaiming or verbal fireworks.
- Corporate. Avoids abstract management-speak.
- Performative. Does not narrate effort, just shows results.
- AI-ish. No filler, no generic thought-leadership phrasing.
- Hedged. Avoid "seeks to," "aims to," or "strives to."
- Needy. Never sounds grateful for being considered.
Write like this
Before you publish - checklist
Print & Display
Digital - Default
Use dark mode as the default for digital contexts: website, portfolio links, and digital presentations shown on screen. Background #0D0D0D, text #F0EDE8, accent #7A9E72. The site respects user system preference but falls back to dark.
Digital - Light Mode
Available as an alternative for users who prefer it. Background #F7F7F7, text #111111, accent #3D5E38. Use light mode as the default for material that may be printed directly.
Print - Default Palette
Use the light mode palette for print. Dark backgrounds print poorly without careful color calibration and significantly increase ink cost. Use #F7F7F7 as the background, #111111 for text, and #3D5E38 for Nori.
Typography - Print Sizes
Minimum body copy: 9pt. Minimum labels and captions: 7pt. Headlines should be set at no less than 18pt for readability in print. Space Grotesk tracking should be set manually in design tools.
Font Installation
Space Grotesk on Google Fonts (opens in a new tab): OFL license, free for all use including commercial. DM Sans on Google Fonts (opens in a new tab): OFL license, free for all use.