ADS Brand — Component Library

Living style guide. Source of truth for all ADS web properties. Last updated May 2026.

Brand Colors
Arc Orange
#ff7f00
PMS 151 C
Studio Charcoal
#3c3c3c
PMS 447 C
Lens Blue
#339fd9
PMS 299 C
White
#ffffff
—
Black
#000000
Process Black C
UI / Accessible Variants
Orange UI
#b75b00
4.5:1 on white
Blue UI
#267bb4
4.5:1 on white
Gray Light
#f7f7f7
Background
Typography
New Century Schoolbook Bold — 48px — H1
The studio behind the brand.
New Century Schoolbook Bold — 36px — H2
Design that works harder.
New Century Schoolbook Bold — 24px — H3
Strategy, design, and execution.
Univers Next Pro Regular — 16px — Body — line-height 1.6
We partner with ambitious brands to build identity systems, digital products, and communications that hold up over time. From first brief to final file, we treat every engagement as a long-term relationship.
Univers Next Pro Medium — 12px — Label — letter-spacing 0.04em — uppercase
Brand Identity · Digital Design · Strategy
Buttons
Get Started Learn More Learn More → Small Primary Small Secondary Large Primary
Cards
Brand Identity
Visual Systems That Last
We build brand identities rooted in strategy — logos, color systems, typography, and the rules that govern them.
See our work →
Digital Design
Websites With Intention
From marketing sites to web apps, we design for clarity, performance, and brand alignment from day one.
View case studies →
AI Operations
Intelligence That Acts
We build the AI layer that makes your systems smarter — automated workflows, agent pipelines, and custom tooling.
Learn more →
Logo Variants
Primary logo
Primary — light backgrounds
Reversed logo
Reversed — dark backgrounds
White logo
White — brand backgrounds
Arc mark
Mark only — square
Black logo
Black — single color
Brand Textures

Abstract arc mark used as a background texture on documents, proposals, and hero sections. Use at low opacity — never compete with foreground content.

On White
On Gray
On Charcoal
Usage rules: White/gray backgrounds — use as-is (lines are already very light). Charcoal/dark backgrounds — invert + reduce opacity to ~10–15%. Never scale below 50% of original size. Always position off-edge or cropped — never centered.
Section Patterns
Services
Light Section
White background. Arc Orange eyebrow. Charcoal heading. Use for main content areas.
Primary CTA
Process
Gray Section
Soft gray background. Same text treatment as light. Use to visually separate content blocks.
Secondary CTA
About
Dark Section
Studio Charcoal background. White heading. Use for contrast moments and CTAs.
Get in Touch
Brand Section
Arc Orange background. Use sparingly — hero moments and brand-forward callouts only.
Learn More