Brand & Design Reference

Design System.

The visual language behind KNTXT 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.

Heading 1

clamp(2.5rem, 6vw, 6rem)

weight: 700

tracking: -0.02em

Visualize what's next.

Heading 2

clamp(2rem, 4vw, 3.5rem)

weight: 700

tracking: -0.015em

Visualization that drives decisions.

Heading 3

clamp(1.5rem, 3vw, 2rem)

weight: 700

tracking: -0.01em

Three steps. Zero surprises.

Heading 4

clamp(1.25rem, 2vw, 1.5rem)

weight: 600

tracking: -0.005em

Design consulting that performs.

Heading 5

clamp(1.1rem, 1.5vw, 1.25rem)

weight: 600

tracking: 0em

Our process is collaborative.

Heading 6

clamp(0.875rem, 1vw, 1rem)

weight: 600

tracking: 0.01em

Des Moines, Iowa — Headquarters

Body

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.

Caption / Eyebrow

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.

KNTXTGroup

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

Text Input

Select

Textarea

Badges

3D RenderingFeaturedAnimationDraft

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

Custom Cursor

.cursor-dot / .cursor-ring

8px teal dot with a 36px ring that follows the mouse with eased lag. Expands on interactive elements.

Continuous, 0.2–0.3s ease

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

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

80px

96px

128px

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 KNTXT brand, reach out and we’ll make sure everything is aligned.

Get in Touch