F2 Technologies
Brand Manual
The definitive reference for executing the F2 identity. Lead with the rule, read the rationale, follow the examples. Built for the founder, freelancers, partners, and future hires — open it and ship correctly.
Quick reference
Everything needed to produce a single asset, on one screen. If you read nothing else, read this.
Ink
Bone
Amber
Brand foundation
Why F2 exists and how it carries itself. Short, so the rules below have something to stand on.
Engineered intelligence, built to fit.
Build AI automation that fits a company exactly — engineered, not templated.
A Brazil where serious AI engineering is the standard, not the exception.
For teams that have outgrown off-the-shelf tools, F2 Technologies is the AI studio that engineers custom automation — the depth of a software team with the restraint of a design studio.
We earn trust by understanding the system, not demoing the surface.
Fewer parts, better placed. Calm beats loud, every time.
Each build is shaped to one company. Templates are a starting point, never the product.
We let precision speak. No hype, no exaggerated promises.
Founders, operations leads, and technical managers at Brazilian SMBs and scale-ups who feel the ceiling of no-code tools and want automation that holds up in production.
Reference energy: Linear and Raycast — an engineering tool, not an agency.
Logo system
F2 is a keyboard function key, so the mark is the key. The Keycap is the master; the Module is the companion symbol for tight and favicon contexts.
Minimum clear space on every side equals half the keycap height (½ x), where x is the cap. For the wordmark, x is the cap height of the “F”. Nothing — type, edges, other logos — enters this zone.
Full lockup minimum: 96px wide. Below that, drop the wordmark and use the symbol. At 16px and under, switch to the solid app-icon tile or the Module — both stay legible as a square.
- It's the primary brand lockup or hero
- You need the app icon / install tile
- Space allows the full mark at ≥96px
- You need a standalone symbol or favicon
- Building patterns, loading states, diagrams
- The keycap would read as clutter beside other UI
// If F2 ships Keycap alone, drop Module and use the keycap silhouette for all symbol-only uses.
Color
Two neutrals and a single flat accent. Amber carries one meaning everywhere: the active node — the live cursor, the key edge, the output. Keep it to roughly 10% of any surface.
#0B0D11
#15181E
#1B1F26
#2A2F38
#3C414B
#6E727C
#8B8F99
#A6A9B2
#C7C8CE
// Semantic colors live in product UI (status, validation). Warning is held distinct from Signal Amber so the brand accent never reads as an alert.
Roughly 60% neutral ground, 30% secondary surface, 10% amber. If a layout feels busy, it is over budget on amber. The accent earns attention precisely because it is rare.
// Amber text only on ink at body weight and up. On amber fills, label in ink — never bone. Re-check contrast whenever a new surface enters the system. No gradients are used anywhere — flat fills only.
Typography
Geometric display in Space Grotesk; the technical signal in JetBrains Mono. Two faces, used with discipline, keep the whole system tight.
Space Grotesk is geometric and exact but has just enough character to avoid the Inter/Helvetica default. JetBrains Mono is a real engineering typeface — it signals “we work in code” honestly, not as decoration. Together they read technical-premium: precise, calm, never an agency.
Reach for JetBrains Mono only when something belongs to the system layer: labels, metadata, status tags, code, captions, the cursor. It frames and annotates — it is not for headlines or body. Used sparingly, mono stays a signal; everywhere, it becomes noise.
Use Space Grotesk for body text at 16–18px / 1.6 line-height. Keeping one display-and-text face holds the system tight and unmistakably F2. Introduce a neutral text companion only if a genuinely long-form context (a 2,000-word article, dense legal copy) proves Space Grotesk tiring to read — and document that decision here when it happens. Until then, one face.
Both faces carry full Latin-Extended diacritics, so Portuguese accents (ã, õ, ç, á, ê) and English set identically. Never substitute a face that lacks proper PT-BR accent forms.
Brand elements & art direction
A small kit of parts — the modular grid, the active node, the keycap, the square wave, the cursor — recombined into texture, dividers, loading states, and diagrams.
Uniform cells, consistent gaps
Everything is built from one unit: a rounded square on an 8px grid with a 12px gap. Repeat it for backgrounds and section textures, subtract cells to draw forms (the Module 2), or animate cells to make loading states. The logic is ownable and infinitely extensible.
Line icons, 1.5–1.6px stroke, rounded joins, on a 24px grid. Monochrome bone; a single element may go amber to mark the active state. Geometric, never illustrative.
Abstract, geometric, systems-based — diagrams of nodes, grids, and flows, built from the same kit of parts. Illustration explains how something works; it never decorates. Flat fills, no gradients, no characters.
// Proposals and content use this house style — never raw n8n screenshots.
F2 takes a deliberate minimal-photography position. The system leads with abstract geometry, not imagery. When a photograph is genuinely needed (a team page, an event), use restrained, high-contrast, desaturated shots with generous negative space — never stock-AI renders, lens-flare tech imagery, or staged “innovation” scenes. If in doubt, use a diagram instead.
Voice & tone
Calm, precise, confident, anti-hype. Say the specific thing, drop the adjectives, and let the work carry the weight.
Concrete nouns, exact numbers, no vague claims.
No exclamation marks, no urgency theatre. Measured.
State things plainly. Confidence needs no hedging or hype.
No “revolutionary”, “game-changing”, or “powered by AI magic”.
Portuguese is the home voice; English is for international and technical contexts. Translate the intent, not word-for-word. PT-BR stays warm but professional — use “você”, never overly formal “senhor”. Keep technical terms (agent, workflow, deploy) in English when that is how Brazilian engineers actually speak. The descriptor swaps with language: Technologies (EN) ⇄ Tecnologia (PT-BR); the name F2 never changes.
Short, declarative, no verb-stacking. The proof comes underneath, not in the headline.
Concrete result, conversational PT-BR, one idea per post.
Precise, structured, sets expectations. No selling — just clarity.
Applications
Dark mode is the default. Each surface uses the same kit — keycap, grid, node, mono labels — so the brand stays recognizable from a favicon to a billboard.
Motion
Motion confirms a state, it never performs. One consistent ease, short durations, and signature animations drawn straight from the kit.
One ease for nearly everything: quick out, settled in. Avoid bounce, elastic, and overshoot — they read playful, not precise.
// All motion respects prefers-reduced-motion — it stops cleanly, never degrading legibility.
AI usage guidelines
F2 is an AI studio, so it uses generative tools — on the record and on-brand. These rules keep AI output indistinguishable from hand-made F2 work.
- First drafts of copy in the F2 voice
- Layout variations from the kit of parts
- Diagram scaffolds in the house style
- Code for the design-system tokens
- Alt text, summaries, translations (PT⇄EN)
- Generate the logo or alter the marks
- Invent new brand colors or fonts
- Produce photoreal “AI” imagery (brains, robots)
- Publish client-facing copy unreviewed
- Fabricate metrics, cases, or testimonials
Human review is mandatory. AI drafts; a person decides. Nothing reaches a client or the public without a named F2 reviewer signing off on accuracy, tone, and brand fit.
Design tokens
The manual defines the decisions; the design system implements them. These tokens keep code and brand in lockstep — semantic names, stable values.
:root {
--f2-ink: #101216;
--f2-bone: #ECEAE2;
--f2-amber: #E59A3C;
--f2-success: #4FA873;
--f2-warning: #E0B341;
--f2-error: #D85C57;
--f2-font-display: 'Space Grotesk';
--f2-font-mono: 'JetBrains Mono';
}
{
"color": {
"core": {
"amber": "#E59A3C",
"ink": "#101216",
"bone": "#ECEAE2"
}
},
"ratio": { "amber": 0.1 }
}
Governance
Direction and boundaries, then room for judgment. When something isn't covered here, apply the principles — precise, calm, flat — and propose the addition.
Minor additions bump the decimal (v1.1); a structural rework bumps the major (v2.0). Changelog lives with the design-system repo.
All exceptions, new applications, and co-branding go through the Brand Lead before release.
- Flat fills — ink, bone, one amber
- Keycap as master, Module as companion
- Amber = active node, ~10% presence
- Space Grotesk + JetBrains Mono
- Dark mode default; clear space respected
- Calm, precise, anti-hype voice
- Human review on AI output
- Gradients, glows, decorative shadows
- Blue or purple as brand colors
- Stock-AI clichés — brains, robots, gears
- Stretching, recoloring, or crowding the mark
- Marketing hype or fabricated claims
- Fine textures or busy backgrounds
- Raw n8n screenshots in client work
Asset library
Every mark, in every format you'll need. SVG for design, PNG for everywhere else, plus favicons and design tokens. Grab the full kit or pick a single file.
Drop-in web icon set — multi-resolution .ico, scalable SVG, Apple touch icon, and a web manifest.
