Brandbook v1.0The brandoperating system
One brand, written down. Colors, type, voice and motion, with the rules that hold them together. Copy any line, hand it to a teammate or an AI, and the work still sounds like us.
Start readingHiKit 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.
The operating system for growing businesses.
Speed without sloppiness. Craft without theater. Systems without dependency.
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.
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.
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.
Give every growing business an unfair advantage: a modern digital system that earns leads, closes them and runs itself.
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.
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.
Direct, never cold. We write like the operator who shipped the thing, not the brochure that imagined it.
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.
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.
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.
Nine habits that keep our copy ours. Break one and the writing starts sounding like everyone else.
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.
One wordmark, one monogram, two surfaces. Recolor it, stretch it or add a shadow and it stops being ours.
- 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.
Every logo, mark and favicon, in the formats you actually need. Take one file or the whole set as a ZIP. Always pull from here, never rebuild a logo from a screenshot.
Wordmark (dark surfaces)
White HiKit + green Studio. Use on #0A0A0A and dark photography.
Wordmark (light surfaces)
Ink HiKit + green Studio. Use on #F6F7F2, white and light imagery.
Usage: always download fresh from here, never re-export or recolor. Wordmark on dark uses the white file, on light the ink file. The monogram is for square placements only.
Dark by default, loud only where it counts. Green is the one signal color, so wherever it lands it means 'this matters'. Click any swatch to copy its value.
- 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.
Three typefaces, one job each. A display face for the loud moments, Inter for everything you read, mono for anything a machine would print.
Aa
Monument Extended
--font-display
Headings, hero, navigation. Inter is the live fallback until the licensed woff2 ships.
Aa
Inter
--font-body
Paragraphs, UI, labels. 16px / 1.6 line height.
Aa
JetBrains Mono
--font-mono
Metrics, code, timestamps, eyebrows.
Sentence case. One outcome, no period. 3 to 8 words. Lead with the result, not the feature.
“We build the website, run the marketing and automate the operations”
One sentence that adds proof or specificity under the headline. Grey, 18–20px, ends with a period. Max ~18 words.
“One team, one stack, one bill, for businesses doing $15K to $500K a month.”
The fixed brand line. Use verbatim, never paraphrase. 3 to 7 words. Appears in headers, footers, decks and bios.
“The operating system for growing businesses.”
Mono, uppercase, green. 1 to 3 words. Names the section, never repeats the headline.
“VOICE & TONE”
- 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.
Spacing is a decision, not a vibe. Every gap is one of ten tokens on an 8px grid, so two people building two different pages still land on the same rhythm. Tight values group things that belong together; big values push sections apart.
Content snaps to 12 columns (max 1280px). Cards span 4, a two-up splits 6 / 6, a feature is 8 / 4. Tablet collapses to 8 columns, mobile to 4. The gutter is one spacing token (24px).
Radius is capped at 8px across the brand.
- 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.
Pad cards with space-4 (24px).
Eyeball 20 or 25px and break the grid.
Separate sections with space-9 (128px).
Cram them with a guessed 40px gap.
Snap every block to the 12-column track.
Float blocks at made-up widths.
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.
Real rooms, real work, caught candid.
Staged handshakes and stock smiles.
Muted grade, lifted blacks, one focal point.
Oversaturated frames fighting for attention.
Crisp product UI on a dark canvas.
Cartoon people floating in pastel.
- 01Editorial, technical and human. Three buckets: abstract systems imagery, real workspace/process shots, crisp product UI.
- 02Real over stock. If stock, unstaged and muted only.
- 03Treatment: slight desaturation, lifted blacks, contrast bias, subtle 3-5% grain on heroes.
- 04One strong focal point. Intentional negative space. No collage chaos.
- 05People: candid, environmental. No forced smiles, no handshake clichés.
Every animation has to earn its frames. If it doesn't help someone understand the thing, it doesn't ship.
- 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.
Mono Ink
Matte geometry on near-black, single green accent. Quiet, editorial.
Glass System
Translucent layered glass on #0A0A0A with subtle green emission points.
Primary set: Lucide (ISC license). Default 24px artboard, 1.5px stroke, green #00FF94 on dark. Custom icons match the same stroke and grid.
- 01Stroke-based, 1.5px stroke, 24px artboard, rounded join, square cap.
- 02Never mix outline and filled icons in one screen.
- 03Illustration: editorial, system-inspired. Brand neutrals + green only. Never cartoony.
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.
Green fill #00FF94, ink text #020806. The single key action.
Transparent, 1px white/35 border. Supporting actions.
Text + arrow, animated underline. Low-emphasis links.
Red fill #DC2626. Irreversible actions only.
Capped at 8px across the brand. 0 = sharp, 8 = soft.
Green fill (#00FF94), ink text (#020806), 600 weight, 48px height, 8px radius. Hover → #00E085.
Transparent, 1px white/35% border, white text. Hover → white/8% fill.
Text only with arrow icon and an animated underline.
Surface white/4% on #0A0A0A, 1px white/8% border, 8px radius. Hover lifts -2px with green glow.
56px height, #2A2A2A border, 8px radius. Focus → 2px green outline.
Mono, 10-12px, uppercase, +0.15em tracking, green (#00FF94).
- 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.
The brand the moment it leaves the building. Feeds, stories and paid ads, one voice scaled to each surface. If a stranger can't tell our ad from our site, it's working.
Accessible or it doesn't ship. WCAG 2.2 AA on every surface, no asterisks.
- Contrast 4.5:1 for body text, 3:1 for large text and UI.
- Every interactive element keyboard-reachable with a visible 2px green focus ring.
- All non-text content has alt text; decorative images use empty alt.
- All motion respects prefers-reduced-motion with a static fallback.
- Heading hierarchy never skips a level.
- Skip-to-content link on every page; form errors announced via aria-live.
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.
Brandbook v1.0One source of truth for everything HiKit ships. Questions or changes route through brand review.