fael.tech
fael.tech symbol

fael.tech

Brand identity manual · v3.0

Forward through technology — technology is not the destination, it's how we move forward.
Browse the symbol, lockups, colors, typography and usage rules for the fael.tech brand — and download the official assets directly from each section.

View kit assets Open printable manual
01

Concept

The brand is born from the philosophy of forward through technology: technology not as a destination, but as the means through which ideas, products and organizations move forward. The symbol represents the ability to understand complex contexts, find a direction, and turn intention into movement.

  • The pointer — action and interaction: the shape evokes a mouse pointer, the element that selects, creates, connects and turns intention into action in the digital environment.
  • The letters F and T — authorship and identity: the initials of fael.tech are embedded in the symbol's construction, also readable as Forward Through Technology.
  • The spacecraft — exploration and innovation: the symbol can be perceived as a spacecraft crossing an orbit, representing curiosity and a disposition to explore new possibilities.
  • The ascending trajectory — progress: the forward-and-upward orientation communicates evolution, ambition and results — without pointing to a fixed destination.
  • The circle — context and orbit: represents the environment in which technology operates (products, organizations, people, systems). When the symbol crosses this field, it communicates transformation.
  • Symbol without circle — action in progress: more direct and dynamic, used when context is already provided by the wordmark.

Brand essence

Three core ideas structure fael.tech:

Direction

Technology needs to be connected to an intention — understanding the problem and desired outcome before building.

Motion

Knowledge needs to generate motion — strategy, architecture, design and engineering turning ideas into something concrete.

Impact

Technological motion only has value when it produces real transformation — better products, organizations and experiences.

Secondary signature, used in presentations and institutional content: Direction. Motion. Impact.

02

Symbol

fael.tech symbol with circle
With circle — standalone symbol, favicon, app icon and vertical lockups
fael.tech symbol without circle
Without circle — next to the wordmark, in horizontal lockups
fael.tech symbol with circle, dark background version
On dark backgrounds the symbol switches to #2DD4BF
fael.tech symbol without circle, dark background version
Circle-free version for dark backgrounds

Construction

Two compositions of the same pointer (400×400 grid): with circle, for standalone and vertical uses — the symbol crossing its orbit — and without circle, lighter, to accompany the wordmark in horizontal lockups. The geometry is entirely flat planes and precise angles. No gradients, no outlines, no shadows.

03

Lockups

fael.tech
Horizontal lockup — the default. Pointer without circle on the left, height ≈ 1.1× the wordmark's x-height.
fael.tech
Dark background version — text in paper, symbol and .tech in light teal.
fael.tech Forward through technology
Vertical lockup with circle — covers, presentation openers, signatures.
fael.tech
1 color (ink) — stamping, embossing, monochrome printing. No teal .tech.

Clear space

fael.tech

Keep a clear space equal to half the symbol's height on all sides of the lockup. Nothing enters this area — text, borders or other logos.

04

Icon and favicon

96px
48px
24px
16px
App icon 512×512 app icon 512
Always use the circle version for favicon and app icon — the outline anchors the pointer and keeps the symbol legible at any size. The app icon uses #111827 ink, 96/512 radius and the symbol in #2DD4BF.
05

Colors

The palette evolves from two brand colors into a teal depth scale — from the darkest base of the trajectory (900) to the brightest detail (100). 700 remains the brand color on light backgrounds; 300 on dark backgrounds.

Teal 900 — depth
#042F2E
Teal 700 — brand
#0F766E
Teal 500 — interaction
#14B8A6
Teal 300 — brand dark
#2DD4BF
Teal 100 — detail
#5EEAD4

Neutrals

Ink
#111827
Paper
#F7F8F5
Surface
#FFFFFF
Muted surface
#EEF2ED

One brand color per application. The symbol is always flat — gradients and transparency belong to surfaces (section 06), never to the mark itself.

06

Liquid glass — the environment the symbol crosses

In the digital identity, the liquid glass layer represents the constantly-changing technology environment: tools, trends, interfaces and platforms in continuous transformation — translucent, blurred surfaces lightly tinted with teal (panels, docks, overlays, floating cards). The symbol is never made of glass: it crosses the environment but remains solid and crisp. The environment changes. Direction remains clear.

fael.tech
Glass panel over the depth gradient (--ft-depth-bg) — the identity's only gradient, always behind the glass.
fael.tech
Glass over light — floating bar or card using .ft-glass; the blur reveals what's behind it.

Glass rules

  • Solid symbol, translucent field — glass only on containers and surfaces; the pointer and wordmark never receive transparency or blur.
  • Subtle teal tint — glass carries --ft-glass-tint (teal at 12%); never neutral gray glass nor another color family.
  • One level of glass per composition — no glass over glass; hierarchy comes from content, not layer stacking.
  • Guaranteed contrast — text over glass follows the same legibility minimums (ink over light, paper/teal 100 over dark).
  • Print is solid — liquid glass is a screen behavior; on paper, use the flat versions from section 03.
07

Typography

fael.tech Wordmark — IBM Plex Sans 700, lowercase, -0.025em tracking, .tech in teal
Headings and interface IBM Plex Sans 400–700, sentence case — never title case
FORWARD THROUGH TECHNOLOGY · $ deploy --prod JetBrains Mono — tagline, uppercase eyebrows (0.06em tracking), commands and technical literals
08

Incorrect usage

Don't rotate the symbol
Don't apply gradients to the symbol — gradients only on the depth background, behind the glass
Don't recolor the circle and pointer with different colors — always a single color
Don't distort the proportions
Don't use with low contrast — over teal, use the white version
Don't apply colored shadows or glows
09

Kit assets

faeltech-mark.svg Pointer without circle, teal — horizontal lockups on light backgrounds ⬇ download
faeltech-mark-dark.svg Pointer without circle, #2DD4BF — horizontal lockups on dark backgrounds ⬇ download
faeltech-mark-ink.svg Pointer without circle, 1 color ink — printing, stamps ⬇ download
faeltech-mark-white.svg Pointer without circle, white — over photos or flat teal ⬇ download
faeltech-mark-circle.svg Pointer with circle, teal — standalone symbol and vertical lockups ⬇ download
faeltech-mark-circle-dark.svg Pointer with circle, #2DD4BF — dark backgrounds ⬇ download
faeltech-mark-circle-white.svg Pointer with circle, white — over photos or flat teal ⬇ download
faeltech-favicon.svg Pointer with circle — favicon ≤ 32px ⬇ download
faeltech-app-icon.svg App icon 512×512 — ink + pointer with circle in light teal ⬇ download
tokens.css Brand tokens — teal scale, neutrals, liquid glass (.ft-glass), fonts ⬇ download

HTML lockup — copy and paste

<!-- requires brand/tokens.css (loads IBM Plex Sans) --> <link rel="stylesheet" href="brand/tokens.css"> <div style="display:flex;align-items:center;gap:14px"> <img src="brand/assets/faeltech-mark.svg" height="46" alt="fael.tech"> <span style="font:700 30px var(--ft-font-sans);letter-spacing:var(--ft-tracking-tight)"> fael<span style="color:var(--ft-teal)">.tech</span> </span> </div>

For the complete, printable specification, see the original visual identity manual.