TECHNITES

Brand system

Site

Technites · Design system

Ice field.
Neon stream.

The live mark is a neon particle-stream infinity on frosted glass, with TECHNITES set thin and wide in navy. This page is the working kit: the photographic logo, the nav lockup, sampled blues, type, and the files to take with you.

01 / Logo

Infinity on glass

The hero mark is the neon particle-stream infinity and TECHNITES wordmark on a true transparent field — no frosted glass panel. The photographic plate (glass included) is the social and archival version. The header uses a matching SVG infinity plus a thin, wide-spaced navy wordmark. Favicons use the infinity alone on an ice tile.

Technites hero logo: infinity and wordmark, no glass
Technites photographic logo on frosted glass
Technites nav lockup on ice
Technites infinity favicon
Technites nav lockup on white
logo-transparent.pngHero mark: infinity + wordmark, no glass, transparentlogo-transparent@2x.pngHero mark, 2× resolutionlogo-full.pngPhotographic logo, glass panel, 1280×720logo-full.jpgPhotographic logo, JPEGlogo.svgNav lockup: infinity + wordmark, vectorlogo.pngNav lockup, transparent, 2000pxlogo-on-white.pngNav lockup on white, 2000pxinfinity.svgInfinity mark, vector, transparentinfinity.pngInfinity mark, transparent, 1200pxicon.svgApp icon / favicon, vectoricon-1024.pngApp icon, 1024px ice tileog.pngOpen Graph / social, 1200×630brand-guide.pdfThis page as a printable PDF
  • Homepage hero: transparent infinity + wordmark. No glass panel, card, border, or drop shadow around it.
  • The photographic plate is the social and archival mark. Do not crop off the glass when using that version.
  • Header lockup: glowing infinity + TECHNITES in Sora 500 at +0.38em, Wordmark Navy (#11214C).
  • Do not outline, skew, or tighten the wordmark. Do not put a second glow on the photographic logo.
  • Clear space: at least the height of the infinity on every side of the lockup.
  • The ice-tile infinity is for favicons, avatars, and tight squares. Do not add the wordmark inside a 32px icon.
  • This system is light-only. Do not place the navy wordmark on a dark field without a dedicated reverse lockup.

02 / Color

Palette

Logo blues are sampled from the photographic infinity. UI neon sits next to them for buttons and kickers. If it is not in this list, it is not in the system.

Stream Deep

#00358D

Darkest ribbon in the infinity loop. Sampled from the photographic logo.

Stream

#035ED1

Mid-depth of the particle stream. Outer coil of the loop.

Stream Neon

#0B76E4

Primary glow of the infinity mark. Favicon stroke and nav halo.

Mid Glow

#7AC5F4

Lit edge of the stream. Gradient midpoint in the SVG mark.

Core Bright

#D4EAFF

Hottest filament and particle sparks inside the loop.

Wordmark Navy

#11214C

TECHNITES in the photo and in the nav lockup. Thin, wide-tracked.

Studio Ice

#C9D5E5

Field around the frosted glass panel in the photographic logo.

Panel Ice

#F4F7FF

Frosted glass plate and the favicon tile.

UI Neon

#0088FF

Site actions, kickers, focus rings. Adjacent to Stream Neon, slightly brighter.

Neon Bright

#3DB8FF

Gradient midpoint, hover energy, brighter states of UI neon.

Neon Glow

#5CE1FF

Highlights, glow fields, hairlines, holographic sheen.

Ice

#F5F9FF

Page field. The white of this system is slightly blue.

Ink

#0A1628

Headlines and primary text on light.

Slate

#5B6D86

Lede copy, supporting paragraphs.

Mist

#6B7C93

Nav labels, footer, quiet meta.

Surface

#FFFFFF

Glass fills, form fields, opaque cards.

03 / Gradients and glow

Light that moves

Atmosphere is built from ice washes, a neon sheen on Engineered., and a soft cyan glow behind glass.

Page field

radial #5CE1FF at 28% · radial #0088FF at 14% · linear #F7FBFF → #EEF6FF → #F5F9FF

Headline sheen

#0088FF → #5CE1FF 55% → #7AF0FF

Hairline

transparent → neon → glow → transparent

Glass fill

white 62% → white 28%, cyan hairline, 18px blur

Glow field

soft cyan orbs, never a hard spotlight

04 / Typography

Sora for signal. Geist for reading.

Sora

AI workflows.

Sora · Outfit, Geist, sans-serif
Wordmark, headlines, section titles, UI labels.

Geist Sans

Technites implements AI workflow automation for businesses that want systems, not software theater.

Geist Sans · ui-sans-serif, system-ui
Body, forms, long reading.

Geist Mono

#0088FF

Geist Mono · ui-monospace
Hex values, tokens, technical asides.

Engineered.

Hero · clamp(3.2rem, 8vw, 6.4rem) · 600 · -0.05em
Desktop h1. Mobile clamps to 2.4–3.2rem.

What we implement

Section · clamp(2.2rem, 5vw, 3.6rem) · 600 · -0.045em
h2 on the marketing site.

Fitted to how you actually operate.

Lede · 1.15rem / 1.65 · 400 · 0
Supporting paragraph under a title.

01 / Services

Kicker · 11px · 500 · 0.34em
Uppercase section index. 0.18em on small screens.

TECHNITES

Wordmark · 11px · 500 · 0.38em
TECHNITES beside the infinity mark. Navy #11214C, not bold.

Book a working session

Button · 11px · 600 · 0.14em
Uppercase. Pill shape.

05 / Buttons

Two controls

Primary fills with neon. Ghost keeps the glass.

Book a working sessionHow we work

Radius 999px · 11px uppercase · tracking 0.14em · primary shadow 0 8px 24px -8px neon
Ghost: 1px neon at 28% on white 40%, blur 12px

06 / Cards and glass

Plates that float

Glass card
Origin · τεχνίτης — master craftsman

01

Plate

Service and approach panels. Radius 28px, white 48%, blur 20px.

Glass: radius 22px, white 62%→28%, inset highlight, 1px cyan ring, 18px blur. On desktop the spec cards rotate in 3D; on small screens they stack.

07 / Space and radius

Tight machine, soft corners

8px

Tight inner gaps

12px

Card stack gap, action gap

16px

Nav padding, plate gaps

20px

Page gutter

28px

Section intro stack

40px

Block spacing

56px

Mobile section padding

88px

Desktop section padding

Glass · 22px

Floating spec cards

Plate · 28px

Service, approach, why panels, logo hero

Pill · 999px

Header, primary/ghost buttons