TERRITORY

Overview

TERRITORY is a German creative agency brand system rooted in **Architectural Minimalism with Accent Boldness**—a design philosophy that pairs austere, near-black surfaces (rgb(0, 0, 0) backgrounds) with a single, unapologetic accent color (vivid orange #ff6900) to create maximum visual impact. The aesthetic evokes precision, confidence, and creative authority: a dark canvas that makes every interactive element sing. The brand serves ambitious companies seeking transformative creative work, and the UI conveys that seriousness through restraint and contrast.

The voice is direct, purposeful, and unadorned. TERRITORY speaks in active imperatives and concrete outcomes—never flowery, never apologetic. Vocabulary leans toward impact, results, and agency: "Love Results by Creating Impact," "Contact us," "Auswahl erlauben" (Allow selection). Tone is professional yet approachable, German-precise yet creatively confident. Example sentence in brand voice: "Wir transformieren Ihre Vision in messbare Ergebnisse durch strategisches Design und unverwechselbare Kommunikation."

Colors

The color system is built on **high-contrast minimalism**: a deep black foundation (#000000) paired with a vibrant orange primary accent (#ff6900) that commands attention on every CTA and interactive element. Primary (#ff6900) is used exclusively for call-to-action buttons, active states, and brand-critical interactions—it is the signature accent that separates TERRITORY from competitors. Secondary (#1032cf, a deep cobalt blue) provides a supporting accent for secondary actions, tabs, and status indicators, creating visual hierarchy without diluting the primary's authority. Tertiary (#046bd2, a brighter blue) is reserved for links and tertiary interactions. The surface stack progresses from pure black (surface: #000000) through carefully calibrated grays (surface-container: #141414, surfac

Typography

The type system pairs **Montserrat** (geometric, confident, brand-forward) for all headings and labels with **Open Sans** (neutral, readable, accessible) for body text. This pairing communicates both creative authority (Montserrat's bold, structured letterforms) and approachability (Open Sans's warm, open counters). Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements and page titles; headline-lg (40px, 700 weight) anchors section introductions; headline-md (28px, 600 weight) breaks up content; title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) is used for rich content and descriptions, while body-md (16px, 400 weight, 24px line-height) handles standard paragraph text. Label-md (14px, 600 weight, 0.01em tracking) a

Layout

The layout system uses a **12-column fluid grid** with a fixed container max-width of 1240px, centered on the viewport. Page rhythm is driven by the spacing scale: lg spacing (40px) separates major sections; md spacing (24px) divides cards and content blocks; sm spacing (12px) provides breathing room within components. The gutter (24px) is applied consistently to left/right margins on all container widths, ensuring content never touches the viewport edge. White-space is aggressive and intentional—the dark background makes generous margins feel premium rather than wasteful. Sections use margin-block-start: 24px and margin-block-end: 0 to create predictable rhythm; the first and last children of containers have zero margin to prevent double-spacing at boundaries. On mobile (< 768px), reduce

Elevation & Depth

Depth is conveyed through **shadow layering and border definition** rather than color shifts. Level 1 (Base/Surface): no shadow; 1px solid border in outline-variant (#666666) defines the edge. Level 2 (Standard Card/Hover): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used for cards, input fields, and default interactive states; border remains 1px outline-variant. Level 3 (Elevated/Modal/Active): box-shadow: 0 32px 68px rgba(0, 0, 0, 0.3), applied to modals, expanded cards, and primary CTAs on hover. All shadow transitions use cubic-bezier(0.4, 0, 0.2, 1) over 200ms to feel responsive without be

Shapes

The shape philosophy is **Technical Precision with Subtle Warmth**—corners are sharp enough to feel modern and intentional, but never harsh. Buttons and primary interactive elements use lg radius (1rem / 16px) to feel inviting and clickable; cards and containers use lg radius (1rem) to match; input fields use DEFAULT radius (0.5rem / 8px) for a more utilitarian, form-like appearance. Badges and pills use full radius (9999px) to signal compact, self-contained information. The rationale: lg radius (16px) is the visual "sweet spot" for a modern, approachable brand—it's not as cold as 4px (which r

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses backgroundColor: {colors.primary} (#ff6900), textColor: {colors.on-primary} (#ffffff), padding: 12px 24px, height: 48px, rounded: {rounded.lg} (16px), and a 2px solid border in primary color. On hover, **button-primary-hover** shifts backgroundColor to {colors.primary-container} (#ff8c33, a lighter orange), maintains the border, and applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1). **button-secondary** mirrors the primary structure but uses backgroundColor: transparent, textColor: {colors.secondary} (#1032cf), and a 2px border in secondary; on hover, it fills with {colors.secondary-container} (#0274be). **button-ghost** is a tertiary option with

Do's and Don'ts

**Do**

• Do use primary orange (#ff6900) exclusively for primary CTAs and brand-critical interactions—never dilute it with secondary uses.
• Do maintain the 24px gutter and 40px section spacing to preserve the premium, spacious feel of the dark canvas.
• Do apply 2px solid borders to all interactive elements (buttons, inputs) to define edges crisply against the dark background.
• Do use Montserrat for all headings and labels to reinforce the brand's geometric, confident personality.
• Do transition all interactive states over 200ms with cubic-bezier(0.4, 0, 0.2, 1) to feel responsive without jarring.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover to create subtle elevation and visual feedback.

**Don't**

• Don't use opacity shifts alone for hover states—always pair with color or shadow changes for clear feedback.
• Don't apply rounded corners larger than 16px (lg) to buttons or cards; it softens the technical precision of the brand.
• Don't use secondary or tertiary colors on primary CTAs; orange (#ff6900) is the only acceptable primary button color.
• Don't reduce the gutter below 16px on mobile; the dark background requires breathing room to avoid claustrophobia.
• Don't mix Montserrat and Open Sans weights arbitrarily; follow the typography scale strictly (700 for headings, 600 for labels, 400 for body).
• Don't apply text-shadow to body text larger than 18px; it becomes visible and breaks the clean aesthetic.