Internal Resource

Brand & Design Guidelines V1

A living reference for Smart Systems' visual identity, UI components, and interaction patterns.

Logo

Primary brandmark and usage guidelines. The logo should always have clear space around it equal to the height of the 'S' icon.

On Dark Backgrounds

On Light Backgrounds

Icon Mark (Navbar)

Available Logo Files

/logo/logo_white_200.png

/logo/logo_png.png

/logo/s_logo_png.png

/logo/logo.png

Typography

Three-font system providing clear hierarchy. Headings use a geometric sans-serif; body uses a humanist sans-serif; code and labels use a monospace.

Space Grotesk

Headings & Display — font-heading

--font-space-grotesk

Aa Bb Cc Dd

The Quick Brown Fox Jumps Over

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Weights: 700 (Bold)Used in: h1–h4, card titles, nav items, CTA labelsTracking: tight (-0.01em typical)

Inter

Body Copy & UI — font-sans

--font-inter

Aa Bb Cc Dd Ee Ff

Expert audio, video, and smart automation solutions for Chattanooga homes & businesses. Experience the future of connected living.

abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%&

Weights: 400, 500, 600, 700Used in: body text, descriptions, buttons, form inputs

Space Mono

Code, Labels & Badges — font-mono

--font-space-mono

Aa Bb Cc 0123

RESIDENTIAL • COMMERCIAL • EDUCATION

HOME / PORTFOLIO / PROJECT NAME

Weights: 400, 700Used in: breadcrumbs, category tags, code snippets

Type Scale

Hero H1Seamless Technology4.5rem / 72px

Page H1Career Opportunities2.25rem–3.75rem

Section H2Latest From Our Blog1.875rem–3rem

Card TitleIT/AV Installation Technician1.25rem–1.5rem

BodyExpert audio, video, and smart automation solutions.0.875rem–1rem

CaptionAvailable Mon-Fri, 9am - 5pm EST0.75rem / 12px

Nav ItemSOLUTIONS / PORTFOLIO / CAREERS0.75rem uppercase tracking-widest

Colors

Core palette derived from Tailwind utilities used across the site. The brand operates in dark mode with blue as the primary accent.

Primary Accent

bg-blue-600

Blue 600

bg-blue-400

Blue 400

bg-blue-50

Blue 50

Brand Gradient

from-cyan-400 → to-blue-500

Used on hero headline accent text, icon strokes, and gradient overlays.

Neutrals (Dark Mode — Primary)

#000000

Black

bg-neutral-950

Neutral 950

bg-neutral-900

Neutral 900

text-neutral-200

Neutral 200

text-neutral-400

Neutral 400

Neutrals (Light Sections)

#FFFFFF

White

bg-neutral-50

Neutral 50

bg-neutral-100

Neutral 100

border-neutral-200

Neutral 200

text-neutral-600

Neutral 600

text-neutral-900

Neutral 900

Semantic & Category

bg-red-600

Red 600

#38bdf8

Sky Blue

bg-slate-500

Slate 500

bg-purple-600

Purple 600

bg-blue-700

Blue 700

Used for portfolio category tags: Residential, Commercial, Education, Government.

Radii & Borders

Consistent corner radii and border treatments create visual cohesion across all components.

Border Radius Scale

rounded-sm

2px

Minimal rounding, subtle softening

rounded

4px

Cards, buttons, images, inputs, panels (PRIMARY)

rounded-md

6px

Larger panels, modals, overlays

rounded-full

9999px

Pills, avatars, badges, FAB

Border Styles

Dark Contextborder border-white/10Used on cards, panels, nav, footer on dark backgrounds

Glassmorphicborder border-white/20Used on hero feature cards with backdrop-blur

Light Contextborder border-neutral-200Used on cards, tags, and panels on white backgrounds

Light Subtleborder border-neutral-200/80Used on blog cards and featured posts

Separatorborder-t border-white/10Horizontal dividers between sections on dark backgrounds

Buttons

Button component variants, sizes, and contextual button patterns used throughout the site.

Component Variants (button.tsx)

default
bg-red-600, hover:bg-red-700

outline
border border-white/20, hover:bg-white/10

ghost
transparent, hover:bg-white/10

Sizes

h-9 px-3

h-10 px-4

h-11 px-8

Icon h-10 w-10

Contextual Patterns

Footer CTA / Careers CTAbg-blue-600 hover:bg-blue-400 rounded shadow-lg font-bold

Careers "View Details"bg-neutral-900 hover:bg-neutral-700 rounded

Filter Pills (Portfolio)

rounded-full text-xs font-bold tracking-wider

Chat FABw-14 h-14 rounded-full bg-blue-600 shadow-2xl

Cards

Card patterns used across the site — from dark glassmorphic hero cards to clean white content cards.

Base Card

The shadcn card component. Dark bg with subtle white/10 border.

rounded border-white/10 bg-neutral-950

Glassmorphic Card

Hero feature cards. Gradient bg with backdrop-blur and white/20 border.

border-white/20 bg-gradient-to-br from-black/60 to-black/80 backdrop-blur-md

Content Card (Light)

Blog, testimonials. White bg, neutral-200 border, shadow-sm, hover:shadow-xl.

bg-white border-neutral-200/80 shadow-sm hover:shadow-xl hover:-translate-y-1

“Smart Systems transformed our conference room. The AV setup is flawless.”

★

Jane SmithOffice Manager

Testimonial: bg-white rounded shadow-sm border-neutral-200

RESIDENTIAL

The Highland Theater

Immersive 12-seat Dolby Atmos private cinema.

Portfolio: rounded border-white/10 shadow-xl | gradient overlay from-black/95 | category tag rounded font-mono

Interactions & Motion

Framer Motion powers all animations. Transitions are smooth and purposeful, never gratuitous.

Hover: Image Scaletransition-transform duration-700 group-hover:scale-105Blog & portfolio image zoom on hover

Hover: Card Lifthover:shadow-xl hover:-translate-y-1 duration-300Blog cards float on hover

Hover: Text Colorgroup-hover:text-blue-400 transition-colors duration-300Titles shift to blue-400 on card hover

Hover: Arrow Shiftgroup-hover:translate-x-1 group-hover:-translate-y-1ArrowUpRight icon diagonal shift

Entrance: Fade Upinitial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }}Hero cards entrance (Framer Motion)

Mega Menuinitial={{ opacity: 0, rotateX: -15 }} duration: 0.453D flip reveal with perspective

Chat Panelinitial={{ x: '100%' }} type: 'spring' damping: 25Slide-in from right with spring physics

Accordionheight: 0 → auto, opacity: 0 → 1, ease: [0.16, 1, 0.3, 1]Smooth expand/collapse for career accordions

Infinite Scrollanimate={{ x: ['0%', '-50%'] }} duration: 175, repeat: InfinityPortfolio bento horizontal marquee

Testimonialsanimate-scroll-up / animate-scroll-down 120s linear infiniteVertical column auto-scroll via CSS animation

Key Components

Overview of the primary component library used across the site.

Navbar

Fixed translucent nav with mega-menu dropdown, hamburger for mobile.

components/layout/Navbar.tsx

Footer

4-column grid with brand, market links, company links, and contact + CTA card.

components/layout/Footer.tsx

PageSubHeader

Reusable hero banner with background image, breadcrumbs, title, and subtitle.

components/layout/PageSubHeader.tsx

Hero

Full-viewport hero with skyline bg, gradient headline, and two glassmorphic CTAs.

components/home/hero.tsx

PortfolioBento

Horizontally scrolling bento grid of portfolio cards with infinite marquee.

components/home/PortfolioBento.tsx

BlogSection

3-column blog grid with animated grid pattern bg, fetched from WordPress API.

components/home/BlogSection.tsx

Testimonials

5-column vertical auto-scrolling testimonial cards with masked edges.

components/home/Testimonials.tsx

CustomChatPanel

Slide-in AI chat panel with suggested questions and typing indicator.

components/chat/CustomChatPanel.tsx

Button

3 variants (default/outline/ghost), 4 sizes (sm/default/lg/icon).

components/ui/button.tsx

Card

Base card shell with CardHeader, CardTitle, CardContent sub-components.

components/ui/card.tsx

AnimatedGridPattern

SVG grid with staggered opacity animations for decorative backgrounds.

components/ui/animated-grid-pattern.tsx

LightRays

Decorative conic gradient light rays used in the footer.

components/ui/light-rays.tsx