Brand & Design Reference
Design System.
The visual language behind KONTEXT Group. Colors, typography, components, and animation principles — everything needed to build on-brand experiences.
01 — Color Palette
Every shade serves a purpose.
Primary
Secondary
Backgrounds
Text
Borders
Click any swatch to copy the hex value to your clipboard.
02 — Typography
Inter. One family. Every weight.
We use Inter for all typography. Fluid sizing via clamp() ensures readability from mobile to ultrawide.
clamp(2.5rem, 6vw, 6rem)
weight: 700
tracking: -0.02em
Visualize what's next.
clamp(2rem, 4vw, 3.5rem)
weight: 700
tracking: -0.015em
Visualization that drives decisions.
clamp(1.5rem, 3vw, 2rem)
weight: 700
tracking: -0.01em
Three steps. Zero surprises.
clamp(1.25rem, 2vw, 1.5rem)
weight: 600
tracking: -0.005em
Design consulting that performs.
clamp(1.1rem, 1.5vw, 1.25rem)
weight: 600
tracking: 0em
Our process is collaborative.
clamp(0.875rem, 1vw, 1rem)
weight: 600
tracking: 0.01em
Des Moines, Iowa — Headquarters
1rem
weight: 400
tracking: 0em
Every service we offer is designed around one outcome: giving developers, investors, and prospects the visual evidence they need to act.
0.75rem
weight: 600
tracking: 0.3em
SELECTED WORK
Gradient Text
.text-gradient
Visualize what’s next.
.text-gradient-teal
Drives decisions.
03 — Logo
The mark. Treated with care.
Dashed line represents minimum clear space (1x logo height on all sides).
Clear Space
Maintain a minimum clear space of 1x the logo’s height on all sides. No text, imagery, or other elements should encroach on this area.
Minimum Size
The logo should never appear smaller than 24px in height for digital or 10mm for print to maintain legibility.
Backgrounds
The primary logo is designed for dark backgrounds (#0A0A0A to #111111). On light backgrounds, use the inverted variant. Never place the logo on busy photography without a scrim.
Don’ts
Never rotate, skew, apply drop shadows, change the color ratio, or add effects to the logo. The mark should always appear as provided.
04 — Components
Built for dark, designed for action.
Buttons
Primary
Secondary
Ghost
Disabled
Cards
3D Renderings
Photorealistic visualizations that sell the vision before ground is broken.
Lease-Up Velocity
2.3x
faster than market average
Tip
Cards use a 1px border that shifts from #1a1a1a to teal/30% opacity on hover.
Form Inputs
Badges
05 — Photography Style
Dark. Cinematic. Architectural.
Mood & Tone
Dark, dramatic, atmospheric. Imagery should feel premium and cinematic — think twilight exteriors, moody interiors with warm accent lighting, and strong architectural lines.
Color Treatment
Desaturated base with selective teal and warm accents. Never oversaturated. Shadows should be deep but not crushed. Aim for a film-grade color grade.
Composition
Strong leading lines, symmetry, and negative space. Architectural details should be prominent. Human figures are secondary — used for scale, never as the focal point.
Lighting
Golden hour, blue hour, and dusk are preferred for exteriors. Interiors should show designed lighting — pendants, sconces, ambient glow. Avoid flat, even lighting.
Example Mood
Twilight Exterior
Deep shadows, warm window glow, teal sky
Example Mood
Interior Vignette
Warm pendant glow, deep vignette edges
06 — Animation
Motion with meaning.
Scroll Reveal
.scroll-reveal
Elements fade in and translate up 28px as they enter the viewport. Uses IntersectionObserver with a 0.1 threshold.
0.75s cubic-bezier(0.16, 1, 0.3, 1)
Stagger Delays
.scroll-reveal-delay-{1-5}
Sequential reveal of sibling elements. Delays increment by 100ms (0.1s to 0.5s) for cascading entrance effects.
100ms increments
Hero Stagger
.hero-eyebrow → .hero-cta
On page load, hero elements animate in sequence: eyebrow (0.2s), headline (0.4s), subheading (0.65s), CTA (0.85s).
0.8–0.9s with stagger
Card Hover
.portfolio-card:hover
Cards lift -4px, scale 1.01x, and gain a teal glow shadow. Overlay content slides up 12px into view.
0.4s cubic-bezier(0.16, 1, 0.3, 1)
Parallax
.hero-parallax
Hero video/image shifts vertically on scroll at a reduced rate, creating depth. Handled via JS with will-change: transform.
Continuous on scroll
Primary Easing
All motion uses cubic-bezier(0.16, 1, 0.3, 1) — a fast-out, slow-in curve that feels natural and premium. This is used site-wide for scroll reveals, hover transitions, and page enters.
Respects prefers-reduced-motion — all animations are disabled for users who prefer reduced motion.
07 — Spacing & Grid
Consistent rhythm. Intentional whitespace.
Spacing Scale
Grid System
Container
Max-width of 80rem (1280px) with horizontal padding of 1.5rem (mobile) scaling to 2rem (desktop).
max-w-7xl mx-auto px-6 lg:px-8
Section Spacing
Sections use 6rem (96px) vertical padding on mobile, scaling to 8rem (128px) on desktop. Defined as --spacing-section.
py-24 lg:py-32
Grid Columns
Responsive 12-column grid via Tailwind utilities. Common patterns: 2-col (md:grid-cols-2), 3-col (md:grid-cols-3), 4-col (lg:grid-cols-4).
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6
Section Dividers
1px gradient lines between sections. Fade from transparent at edges to a subtle white at center. Never hard borders.
.section-divider
08 — Icons
Clean lines. Consistent weight.
Style
Outline (stroke) icons from Heroicons at 1.5px stroke weight. Never filled unless in a selected/active state. Rounded line caps and joins for a softer, premium feel.
Sizes
Standard icon size is 24px (w-6 h-6) for UI elements. Navigation arrows use 16px (w-4 h-4). Feature icons inside colored containers use 24px with a 40px container.
Examples
Icons render as inline SVG for maximum control. Color is inherited via currentColor.
Build With Us
Questions about our brand?
If you’re working on a project that involves the KONTEXT brand, reach out and we’ll make sure everything is aligned.
Get in Touch