# HiKit Studio Brand Brief

> Machine-readable brand reference. Paste into any AI to brief it on the HiKit Studio brand.
> Source of truth: https://hikit.studio/brandbook  ·  Assets ZIP: https://hikit.studio/brand/hikit-brand-assets.zip

## 1. Foundation
- **Brand:** HiKit Studio
- **Essence:** The operating system for growing businesses.
- **What it is:** HiKit Studio is a systems-driven digital studio. Not a vendor. Not a freelancer collective. A small, sharp team that builds the website, runs the marketing and automates the operations for growing businesses. One team, one stack, one bill.
- **Positioning:** HiKit Studio is the operating system for growing businesses. We build the website, run the marketing and automate the operations. One team. One stack. One bill.
- **Promise:** Speed without sloppiness. Craft without theater. Systems without dependency.
- **Audience:** Founders, operators and marketing leads of businesses doing $15K to $500K per month who are tired of stitching together vendors and ready to upgrade from templated, manual operations to a modern digital system.

### Slogans (use verbatim)
- The operating system for growing businesses.
- We build the website, run the marketing and automate the operations.
- One team. One stack. One bill.
- Most agencies sell tactics. We sell a system.
- Speed without sloppiness. Craft without theater. Systems without dependency.
- Ship in days, not quarters.

## 2. Mission, Vision, Values
- **Mission:** Give every growing business an unfair advantage: a modern digital system that earns leads, closes them and runs itself.
- **Vision:** Replace the broken agency model with a productized, AI-native studio that ships in days, not quarters, and operates as a real partner inside the client's business.

### Values
- **Systems first:** Every output is repeatable, documented, measurable. We don't ship one-offs we can't rebuild in 30 minutes.
- **Speed beats theater:** Working beats perfect. Ship, measure, iterate. Decks don't earn revenue.
- **Outcomes over outputs:** We measure success in revenue, leads and hours saved. Not in deliverables.
- **Operator mindset:** We think like the founder, not like a vendor. Decisions are filtered by leverage and impact.
- **Honest craft:** Beautiful work that also performs. Form and function never separate.
- **AI native:** AI is built into how we work, not bolted on at the end.

## 3. Voice & Tone
- **Direct:** We get to the point. No buzzwords, no padding, no “unlock your potential.”
- **Confident:** We've built it before. We don't hedge with maybe, might, possibly.
- **Operator:** We talk in revenue, leverage, systems, output. Not vibes.
- **Warm:** Direct doesn't mean cold. We're humans helping humans.
- **Editorial:** Clean sentences. Strong verbs. Short paragraphs. Real cadence.

### Tone by context
- **Homepage / Hero:** Bold, declarative, one outcome per sentence.
- **Service pages:** Practical, structured, specific. Numbers and concrete examples.
- **Case studies:** Story-driven: problem, system, result. Metric-forward.
- **Sales follow-up:** Personal, warm, specific to what they said.
- **Proposals & contracts:** Plain English. No legalese where avoidable. Clear scope.
- **Social:** Editorial, opinionated, short. Build a point of view.
- **Email:** Like a smart friend who runs an agency. Useful, no fluff.

### Say this
- We build the website, run the marketing and automate the operations.
- Most agencies sell tactics. We sell a system.
- Your team stops doing repetitive work. Revenue doesn't stop.

### Not this
- We leverage cutting-edge AI to unlock unprecedented growth.
- Our holistic, end-to-end synergistic solutions empower your team.
- Let us help you on your digital transformation journey.

## 4. Writing rules
- No em dash. Ever. Use a period, a comma, parentheses or a colon.
- No “world class”, “cutting edge”, “unlock”, “empower”, “synergy”, “transform”, “journey”.
- No exclamation marks in body copy. Reserve for rare moments on social.
- Active voice always. “We ship in 14 days.” Not “Sites are shipped in 14 days.”
- Numbers, not vague claims. “+312% leads in 60 days” beats “massive growth.”
- Short paragraphs. 1 to 3 sentences. No walls of text.
- Sentence case for web headings. Title Case only for document headers and case study titles.
- Oxford comma used.
- Use real client words from sales calls. Mirror buyer language.

### Naming
- **Brand:** HiKit Studio: capital H, capital K, lowercase rest. Never “Hikit” or “HIKIT” in body copy. Logo can be all caps.
- **Services:** Title Case: Web Design & Development, AI Automation & Workflows, SEO & Performance Marketing, Branding & Visual Identity.
- **Departments:** Single-word labels: Development, Marketing, Automation, Brand.
- **Productized offers:** Verb-forward: “48hr Website Sprint”, “Operate Retainer”, “Brand Sprint”.

## 5. Logo
- The wordmark is the primary identity. Geometric, confident, tight tracking.
- Clear space on all sides equals the height of the capital H.
- Minimum size: 24px height on screen, 12mm in print.
- Use the monogram H for favicons, avatars and app icons, never the full wordmark.
- Variants: dark-surface (white mark) and light-surface (ink mark) only. No color logos, no effects.

## 6. Color
**Core neutrals**

| Name | Value | Token | Use |
| --- | --- | --- | --- |
| HiKit Black | `#0A0A0A` | `--color-background` | Primary canvas |
| Surface | `#111111` | `--color-surface` | Cards & panels |
| Surface Raised | `#161616` | `--color-surface-raised` | Elevated UI |
| Border | `#1A1A1A` | `--color-border` | Hairline dividers |
| Border Strong | `#2A2A2A` | `--color-border-strong` | Inputs & emphasis |

**Signal green**

| Name | Value | Token | Use |
| --- | --- | --- | --- |
| Signal Green | `#00FF94` | `--color-accent` | CTAs / links / focus |
| Accent Hover | `#00E085` | `--hk-accent-hover` | Hover state |
| Accent Ink | `#020806` | `--hk-accent-ink` | Text on green |
| Accent Muted | `rgba(0,255,148,0.08)` | `--color-accent-muted` | Tinted fills |
| Accent Dim | `rgba(0,255,148,0.25)` | `--color-accent-dim` | Glows & borders |

**Text & light mode**

| Name | Value | Token | Use |
| --- | --- | --- | --- |
| Text Primary | `#FFFFFF` | `--color-text-primary` | Headings & body on dark |
| Text Secondary | `#999999` | `--color-text-secondary` | Sub-copy, captions |
| Text Muted | `#444444` | `--color-text-muted` | Disabled, hints |
| Light Base | `#F6F7F2` | `html[data-theme=light]` | Light-mode canvas |
| Light Surface | `#FFFFFF` | `--hk-bg-soft` | Light-mode cards |

**Functional**

| Name | Value | Token | Use |
| --- | --- | --- | --- |
| Success | `#16A34A` | `-` | Confirmations |
| Warning | `#F59E0B` | `-` | Caution states |
| Error | `#DC2626` | `-` | Errors, destructive |
| Info | `#2563EB` | `-` | Neutral info |

**Rules**
- Dark-first. #0A0A0A carries the page; green is a signal, never a wash.
- One green moment per fold maximum. It marks the single most important action.
- 60 / 30 / 10: 60% dark surfaces, 30% white/grey type, 10% green and imagery.
- Body copy is white (#FFFFFF) or secondary grey (#999999) on dark. Pure black is for the canvas, not text.
- All combinations meet WCAG AA: 4.5:1 for body, 3:1 for large text and UI.

## 7. Typography
**Families**
- **Display:** Monument Extended (`--font-display`) · Headings, hero, navigation. Inter is the live fallback until the licensed woff2 ships.
- **Body:** Inter (`--font-body`) · Paragraphs, UI, labels. 16px / 1.6 line height.
- **Mono:** JetBrains Mono (`--font-mono`) · Metrics, code, timestamps, eyebrows.

**Scale (size → semantic role)**

| Style | Role | Size | Line | Weight | Tracking |
| --- | --- | --- | --- | --- | --- |
| Display XL | H1 / Hero | clamp(44px, 5.5vw, 88px) | 0.9 | 700–800 | -0.03em |
| Display LG | H2 / Section | clamp(30px, 3.8vw, 60px) | 0.95 | 700 | -0.02em |
| Display MD | H3 / Subsection | clamp(24px, 3vw, 42px) | 1.05 | 600 | -0.01em |
| Display SM | H4 / Card title | clamp(18px, 2vw, 28px) | 1.1 | 600 | 0 |
| Subtitle / Lead | Lead paragraph | 18–20px | 1.55 | 400 | 0 |
| Body | H5 / Body | 16px | 1.6 | 400 | 0 |
| Caption | H6 / Caption | 14px | 1.5 | 400 | 0 |
| Eyebrow | Label / Kicker | 10–12px | 1.2 | 500 | +0.2em |

**Headline, subtitle & tagline**
- **Headline (H1/H2):** Sentence case. One outcome, no period. 3 to 8 words. Lead with the result, not the feature. _Example: “We build the website, run the marketing and automate the operations”_
- **Subtitle / lead:** One sentence that adds proof or specificity under the headline. Grey, 18–20px, ends with a period. Max ~18 words. _Example: “One team, one stack, one bill, for businesses doing $15K to $500K a month.”_
- **Tagline:** The fixed brand line. Use verbatim, never paraphrase. 3 to 7 words. Appears in headers, footers, decks and bios. _Example: “The operating system for growing businesses.”_
- **Eyebrow / kicker:** Mono, uppercase, green. 1 to 3 words. Names the section, never repeats the headline. _Example: “VOICE & TONE”_

**Rules**
- Map sizes to semantics, not the reverse. Display XL is H1 and appears once per page.
- Tight tracking on display: -0.02em to -0.04em. Body stays at 0.
- Never center long body copy. Left-aligned, ragged right.
- Max line length: 70 characters for body, 50 for hero.
- Never skip a heading level (no H1 straight to H3) for accessibility.

## 8. Grid & spacing
- Desktop: 12-column grid, 1280px max content width (max-w-7xl), 24–48px outer gutter.
- 8px baseline rhythm. Every spacing token is a multiple of 8.
- Section padding: 96px mobile, 128px desktop (py-12 / md:py-24).
- Radius capped at 8px: sm 2px, base 4px, lg 8px, full 9999px.
- Editorial text maxes at 720px; grids and showcases at 1280px; hero and 3D run full-bleed.

**Spacing tokens (8px baseline)**
- `space-1` = 4px · Icon-to-label, tag padding
- `space-2` = 8px · Inline gaps, chip padding
- `space-3` = 16px · Stacked text, list rows
- `space-4` = 24px · Card padding, grid gaps
- `space-5` = 32px · Card padding (roomy)
- `space-6` = 48px · Between content blocks
- `space-7` = 64px · Sub-section spacing
- `space-8` = 96px · Section padding (mobile)
- `space-9` = 128px · Section padding (desktop)
- `space-10` = 160px · Hero breathing room

**Radii**
- `--radius-sm` = 2px
- `--radius` = 4px
- `--radius-lg` = 8px
- `--radius-full` = 9999px

## 9. Imagery
Every image carries the brand, so every image follows one look. Photography, product screenshots, AI-generated renders: if it goes out under our name, it answers to this section. The test is simple. A photo, a UI capture and a generated frame should look like they came from the same room.

- Editorial, technical and human. Three buckets: abstract systems imagery, real workspace/process shots, crisp product UI.
- Real over stock. If stock, unstaged and muted only.
- Treatment: slight desaturation, lifted blacks, contrast bias, subtle 3-5% grain on heroes.
- One strong focal point. Intentional negative space. No collage chaos.
- People: candid, environmental. No forced smiles, no handshake clichés.

**Aspect ratios**
- Hero: 16:9 / full-bleed
- Case cards: 4:5 or 1:1
- Editorial inline: 3:2
- Social: 1:1 feed, 9:16 reel

## 10. Motion & 3D
- Motion is meaning, not decoration. If it doesn't clarify the system, cut it.
- Entry easing: cubic-bezier(0.22, 1, 0.36, 1). Exit: cubic-bezier(0.32, 0, 0.67, 0).
- Duration: 180-320ms for UI micro-interactions, 600-1200ms for hero choreography.
- Always respect prefers-reduced-motion with a static fallback.
- Scroll-triggered clips: ≤6s, posters required, under 3MB of video per page.

**Stack:** Framer Motion (primary), GSAP + ScrollTrigger (hero & case-study choreography), Lottie (loops & icons), Spline runtime (live 3D, ≤3MB per scene)

## 11. Icons
Primary set: Lucide (ISC license). Default 24px artboard, 1.5px stroke, green #00FF94 on dark. Custom icons match the same stroke and grid.

- Stroke-based, 1.5px stroke, 24px artboard, rounded join, square cap.
- Never mix outline and filled icons in one screen.
- Illustration: editorial, system-inspired. Brand neutrals + green only. Never cartoony.

## 12. UI components
These are the components, not a menu to browse. Each variant and size has one job, so you reach for the one the moment calls for instead of inventing a new button. We settle it here so nobody redesigns a control at 2am.

**Button sizes**
- **Small:** h 36px, pad-x 16px, 13px / 600, radius 4px · Dense UI: toolbars, table rows, filters.
- **Medium:** h 48px, pad-x 24px, 14px / 600, radius 8px · The default. Standard actions across the site.
- **Large:** h 56px, pad-x 32px, 16px / 600, radius 8px · Primary CTAs: hero, pricing, end-of-page.

**Usage**
- One primary (green) button per view. Everything else is secondary or ghost.
- Label in sentence case or uppercase mono for eyebrows. Verb-first: “Book a call”, “Get the audit”.
- Minimum touch target 44 × 44px. Small buttons keep 44px hit area via padding.
- Focus ring is always a 2px green outline at 2px offset. Never remove it.
- Disabled drops opacity to 40% and removes the hover. Never hide the label.

**Forms**
- **Input height:** 56px (large), 48px (default). 8px radius, #2A2A2A border.
- **Label:** 14px, above the field, secondary grey (#999999).
- **Focus:** Border turns green + 2px green ring at 30% opacity.
- **Error:** Red (#DC2626) border and helper text below, announced via aria-live.
- **Placeholder:** Muted grey (#444444). Never used as a replacement for a label.

## 13. Social media
**Formats**
- **Profile avatar:** Monogram H on #0A0A0A. 400 × 400px, never the full wordmark.
- **Cover / banner:** Wordmark + tagline on dark, 1 green accent. LinkedIn 1584 × 396, X 1500 × 500.
- **Feed post:** 1:1 (1080 × 1080) or 4:5 (1080 × 1350). Dark canvas, big display headline.
- **Story / Reel:** 9:16 (1080 × 1920). Safe margins 250px top / 350px bottom.
- **Link / OG image:** 1200 × 630. Headline + green underline + logo bottom-left.

**Post structure**
- Carousel: cover (hook), 3–5 insight slides, summary, CTA slide.
- Hook in the first 5 words. Lead with the outcome or the contrarian take.
- One idea per post. Display headline + 1–2 supporting lines.
- CTA is soft and specific: “Steal the system”, “Full breakdown in comments”.

**Rules**
- **Bio:** “The operating system for growing businesses. We build the website, run the marketing and automate the operations.” Add city + one proof number.
- **Hashtags:** 3–6 max, lowercase, specific. e.g. #webdesign #automation #smb. No 30-tag walls.
- **Handle:** @hikitstudio everywhere. Display name “HiKit Studio”.
- **Accent:** Exactly one green moment per asset: a word, an underline or a shape.

## 14. Advertising & campaigns
**Copy**
- One promise per ad. Lead with the outcome, not the service.
- Use a number: “+312% leads in 60 days” beats “grow faster”.
- Primary text 1–2 short lines. Headline ≤ 40 characters. No buzzwords.
- CTA is verb-first and concrete: “Book a call”, “Get the audit”, “See the system”.
- Never more than one green element, and it lives on the CTA.

**Channels**
- **Meta (feed):** 1:1 / 4:5 image or 9:16 reel. Headline ≤ 40 char, primary text ≤ 125 char.
- **Google (display):** Responsive: 1200 × 628, 300 × 250, 728 × 90, 160 × 600. Logo + 1 line + CTA.
- **LinkedIn:** 1200 × 627 single image or doc ad. Operator tone, proof-led, B2B framing.
- **YouTube:** 6s bumper or 15s skippable. Hook in 2s, logo + CTA end card.

**Visual**
- Dark canvas (#0A0A0A), white display headline, green CTA only.
- One product screenshot or one abstract system visual. Never both.
- Logo bottom-left or top-left, clear space respected.
- Same type system as the site: display for the hook, mono for the metric.

## 15. Brand don'ts
- Don't use em dashes anywhere.
- Don't gradient or recolor the logo. Green is flat and exact.
- Don't introduce colors outside this palette without brand approval.
- Don't use more than one green / primary CTA per fold.
- Don't use staged corporate stock or cartoon-people illustration.
- Don't use motion that fails the reduced-motion test.
- Don't center long body copy.
- Don't use the buzzword list: world-class, cutting-edge, unlock, empower, transform, journey.
- Don't put emoji in proposals, contracts, case studies or service pages.

## 16. Downloadable assets
All logos, marks and favicons (predictable URLs):
- Wordmark (dark surfaces) (SVG): https://hikit.studio/brand/logo/hikit-logo-dark.svg
- Wordmark (dark surfaces) (PNG): https://hikit.studio/brand/logo/hikit-logo-dark.png
- Wordmark (light surfaces) (SVG): https://hikit.studio/brand/logo/hikit-logo-light.svg
- Wordmark (light surfaces) (PNG): https://hikit.studio/brand/logo/hikit-logo-light.png
- Monogram (SVG): https://hikit.studio/brand/mark/hikit-mark.svg
- Monogram (PNG): https://hikit.studio/brand/mark/hikit-mark.png
- Monogram (white) (PNG): https://hikit.studio/brand/mark/hikit-mark-white.png
- Monogram (black) (PNG): https://hikit.studio/brand/mark/hikit-mark-black.png
- Favicon (adaptive SVG) (SVG): https://hikit.studio/brand/favicon/icon.svg
- favicon.ico (ICO): https://hikit.studio/brand/favicon/favicon.ico
- App icon 512 (PNG): https://hikit.studio/brand/favicon/icon-512.png
- Apple touch icon (PNG): https://hikit.studio/brand/favicon/apple-icon-180.png

ZIP of everything: https://hikit.studio/brand/hikit-brand-assets.zip