Brandbook v1.0The brandoperating system
The visual and verbal system behind everything HiKit Studio ships. Colors, type, voice, motion and rules, in one place and built to copy.
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, but never cold. We talk like an operator who has built it before.
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.
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.
- 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, ready to download and share with the team. Click a format to save it.
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-first and high-contrast. Green is the single signal color. 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.
Two voices: a confident display face for structure, Inter for everything readable, JetBrains Mono for data.
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.
- Tight tracking on display: -0.02em to -0.04em.
- Never center long body copy. Left-aligned, ragged right.
- Max line length 70 characters for body, 50 for hero.
- Eyebrows: mono, uppercase, +0.15em tracking, green.
An 8px baseline carries the whole system. Everything is a multiple of 8.
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: 96 to 128px vertical (py-12 / md:py-24).
- Radius capped at 8px. sm 2px, base 4px, lg 8px, full 9999px.
- Editorial text max width 720px; grids and showcases up to 1280px; hero and 3D run full-bleed.
Editorial, technical and human. Real over staged, always.
- 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.
If a motion doesn't clarify the system, we cut it.
- 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.
- 01Lucide Icons as base (ISC license), custom additions in the same style.
- 02Stroke-based, 1.5px stroke, 24px artboard, rounded join, square cap.
- 03Never mix outline and filled icons in one screen.
- 04Illustration: editorial, system-inspired. Brand neutrals + green only. Never cartoony.
Buttons, sizes, states and forms. Switch variants with the tabs, drag the slider to feel the radius.
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.
WCAG 2.2 AA on every surface.
- 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.