Brand Identity
TNG-STUDIO-ID-01 · Brand System v1.0 · Immutable
Identity Mark
Shipwreck Mast: The Tangison Studio Mark
- Use logo-light on dark backgrounds
- Use logo-dark on light backgrounds
- Maintain clearspace equal to mark height
- Minimum size: 24px height
- Rotate, skew, or alter the mark
- Place on busy backgrounds without container
- Use mark without wordmark
- Change the mark colors
Favicon Scale
64×64
32×32
16×161:2.8 ratio
Wordmark System
Specifications
Color System
White and bone backgrounds dominate. Dark sections used sparingly. Signal Teal is the single accent.
Primary
Skeleton Bone
#F6F4EF
skeleton-bone
Page base, light backgrounds
Signal White
#FFFFFF
signal-white
Cards, panels, maximum contrast
Atlantic Black
#111315
atlantic-black
Primary text, dark sections
Terminal Black
#0A0B0C
terminal-black
Deepest dark, footer
Accent
Signal Teal
#2CB5B4
signal-teal
CTAs, links, STUDIO descriptor, highlights
Supporting
Ocean Mist
#E6F2F1
ocean-mist
Subtle teal tint, hover states
Fog Gray
#D9D7D2
fog-gray
Secondary text, dividers
Ink Muted
#6B6860
ink-muted
Secondary text
Signal Teal in Context
Typography
Cabinet Grotesk
Headlines Only · 800 to 900The primary display typeface. Used exclusively for headlines, section titles, and the wordmark. tracking: -0.04em.
We design and build digital experiences
Strategic · Functional · Beautiful
Satoshi
Body Text · 300 to 400The primary body typeface. Used for paragraphs, descriptions, and interface text. line-height: 1.6.
We believe great design is invisible. It doesn't draw attention to itself. It draws attention to the work. Every pixel, every line of code, every interaction serves the idea. That's the Tangison Studio approach.
JetBrains Mono
Metadata · Labels · 400The monospace typeface. Used for metadata, labels, version numbers, and navigation items ONLY. Never dominant. tracking: 0.1 to 0.3em, size: 9 to 12px, uppercase preferred.
TNG-STUDIO-ID-01 · BRAND SYSTEM V1.0
DISCOVER → DEFINE → DESIGN → DEVELOP → LAUNCH
LAST UPDATED: 2026-03-04 · IMMUTABLE
Design Elements
2px height. Signal Teal. Used as section dividers and emphasis.
Unicode arrow. Always follows primary CTA text.
Signal Teal bg, white text, Cabinet Grotesk bold, 14px 28px padding, 6px border-radius.
Transparent bg, Signal Teal border and text, same sizing.
Illustration Style
Analogue Namibia: Named Brand Asset
Analogue Namibia
1970s to 1990s documentary and travel photography. Think grainy 35mm film, faded Kodachrome and Ektachrome colour shifts, slight overexposure, natural Namibian light. The aesthetic of National Geographic field photography from that era, not staged, not cinematic, not digital. Real-feeling analogue grain, slightly desaturated warm tones, high contrast between light and shadow. Images must feel found, not art-directed.
Subject Matter: Namibian Locations Only
Use only well-known, recognisable Namibian places.
People Rules
Whenever a person appears they must be in fast motion: running, walking with purpose, turning away. Motion blur on the person is required. They should be unrecognisable, a streak of movement. The person represents speed: the studio moves fast, thinks fast, builds fast.
Colour Feel
Motion System
Easing Curve
cubic-bezier(0.16, 1, 0.3, 1)Duration Range
0.6s to 1.2s for all entrance animations
0.4s for hover and micro-interactions
Rules
- All entrance: opacity 0→1 + translateY 24px→0, staggered by 0.1s
- No bounce. No spring.
- Always include prefers-reduced-motion support.
ease: cubic-bezier(0.16, 1, 0.3, 1)
duration: 0.6s to 1.2s
entrance: opacity 0→1, translateY 24px→0
Anti-Patterns
Illustration gradients
Gradients are forbidden in illustrations only. UI overlays and atmospheric sections may use subtle gradients.
Shadows on text
No text-shadow or drop-shadow on type.
Border-radius > 4px
All elements use sharp corners. Maximum 4px radius.
Decorative blobs
No abstract shapes, floating elements, or decorative blobs.
Filler copy
Silence is design. Remove unnecessary words.
Bounce animations
No bounce, spring, or playful easing curves.
Brand Board
Cabinet Grotesk 900
Satoshi 300: Body text for all reading experiences
JETBRAINS MONO 400: METADATA AND LABELS
Designing the interfaces through which intelligence becomes useful.