Interactive Canvas & Brand Engine

Design System Manager

A component-driven visual system. Upload marks, wordmarks, and taglines and they lock to the construction grid automatically — configure custom wordmarks and preview dynamic vector lockups.

Brand Logos & Marks

Dynamic brand lockups generated in real time and locked to a construction grid. Upload custom vector graphics for the mark, wordmark, and tagline, or fall back to text/preset icon — then download resolution-independent SVGs.

Primary Horizontal Lockup

Centered Emblem & Wordmark with Custom Tagline

Brand Mark (App Icon)

Favicons / Avatars / App Store

Primary Vertical

Centered / Vertical Spaces

Wordmark

Compact Headers & Footers

Official Tagline

Marketing Copy & Social Headers

Dark Mono

Light Mono

Clear Space Rule (1× Mark Height, Computed)

Color Palette

Primary Brand Palette

Copy

Brand Primary

Main button actions, glow accents, and active states.

#6366f1

Copy

Brand Secondary

Gradient end points, secondary badges, and highlights.

#ec4899

Core Surfaces

Background #0a0a0c

Surface 1 #131316

Surface 2 #1c1c21

Service Category Tokens

Typography System

Headings (Plus Jakarta Sans)

Hero Title

Section Heading

Subsection Header

Body Copy & Weights

Body Large (text-lg, font-light)

This standard hero body copy is used directly under H1 headers. It provides effortless legibility and comfortable line-height.

Body Regular (text-sm, leading-relaxed)

Card descriptions and interface body copy utilize Regular (400) weight for clean visual contrast across light and dark displays.

Iconography & Service Mapping

System services mapped to Lucide vector icons with contextual color tokens.

Basic UI Components

Buttons

Form Inputs

Text Input

Message Area

Advanced Dynamic Logic Engine

Interactive Scope & Budget Estimator

Estimated Budget Range

Select Services

Tap pills to calculate scope

Est. Minimum $0