01 · Foundation
Brand Core
Everything visual and verbal flows from these principles. When in doubt, return here.
Brand Name
Klok Ventures — always two words, title case. Never "KlokVentures" (one word), never "klok ventures" (lowercase), never "KLOK VENTURES" (all caps) in editorial contexts.
Pronunciation
"Clock Ventures" — Klok rhymes with clock. If writing for an audience that might not know, use: "Klok (pronounced 'clock') Ventures."
Founder
Connor Klok — Digital Product Consultant. Always use full name on first reference. "Connor" alone is fine in casual contexts.
Positioning Statement (internal use)
Klok Ventures builds custom Progressive Web Apps for small and mid-size businesses — delivered fast, priced fairly, and powered by AI-assisted development that passes the savings to the client.
Brand Personality
⚡
Sharp
Precise, technical, no fluff. Every word earns its place.
🔧
Builder
Makes real things. Shows work. Demos over decks.
🤝
Straight
Transparent about tools, pricing, and process. No agency theater.
These three words should describe every piece of content, every design decision, and every client interaction.
02 · Identity
Logo & Brand Mark
Two distinct assets make up the Klok Ventures visual identity: the compass rose primary logo and the double chevron favicon. Each has a specific role and should never be substituted for the other.
Primary Logo — Compass Rose
Primary Mark · Use at 48px and above
File: klokventures-logo.png · Format: PNG with transparent background ·
Minimum size: 48px · Use: Nav lockup, document headers, email signatures, social profile images, presentations, any context where the full mark can be shown clearly.
Meaning
The compass rose represents direction and navigation — Klok Ventures helps businesses find the right path forward with technology. The dominant blue needle points northeast: growth, forward motion, and precision. The metallic silver points reinforce the "built to last" quality positioning.
Nav Lockup — Dark Background
KlokVentures
Nav size: Logo 32×32px · Wordmark Azeret Mono 700 16px · Gap 10px · Vertically centered
Nav Lockup — Light Background
KlokVentures
Light variant: Same logo PNG (transparent bg works on any surface) · Wordmark shifts to #1C1C1E / --blue-dim
Large Lockup — Hero / Document Use
KlokVentures
Digital Product Consulting
Large lockup: Logo 64×64px · Wordmark 28px · Tagline below in Azeret Mono 10px muted · Gap 16px · For presentations, proposals, document covers
Footer Variant — Text Only
KlokVentures
Footer uses text-only wordmark, no logo image. "Klok" in var(--muted) · "Ventures" in var(--blue). Subdued to not compete with footer content.
Favicon & App Icon — Double Chevron
64px
32px
16px
File: klokventures-favicon.png · Format: PNG ·
Use: Browser tab favicon, mobile home screen icon, social profile avatar (small), any context under 48px where the compass rose loses detail.
Meaning
The double chevron communicates forward motion and momentum — built for the web, pointing forward. It scales to 16px without losing its shape, making it the ideal favicon. The nested arrows also subtly reference code brackets and directional navigation.
HTML Implementation
<!-- In every <head> — favicon -->
<link rel="icon" type="image/png" href="klokventures-favicon.png">
<!-- Nav logo lockup -->
<img src="klokventures-logo.png" alt="Klok Ventures"
style="height:32px;width:32px;object-fit:contain;flex-shrink:0">
Logo Usage Rules
✓ Do
Use the compass rose at 48px and above. Use the chevron favicon at sizes below 48px. Keep the PNG as-is — transparent background works on dark and light surfaces. Maintain the wordmark alongside the logo in nav contexts.
✗ Don't
Use the compass rose as a favicon — it loses all detail at 16px. Use the chevron as the primary logo — it lacks the brand story. Crop, recolor, add effects, or recreate either mark. Place either logo on a background that reduces contrast below accessible thresholds.
Clear Space
Always maintain clear space around the logo equal to half the logo's height on all sides. At 32px nav size, that's 16px of breathing room on each side. Never crowd the logo against text, edges, or other graphic elements.
03 · Visual
Color
A precise, minimal palette built around deep graphite and electric blue. Every shade has a specific role — don't improvise.
Core Palette
Black
#0E0E10 · --black
Page background, deepest layer
Dark
#16161A · --dark
Section backgrounds, nav, footer
Panel
#1E1E24 · --panel
Cards, raised surfaces, inputs
Blue
#2D6BE4 · --blue
Primary accent, CTAs, active states
Blue Dim
#1A4BA8 · --blue-dim
Button hover states, pressed states
Silver
#C8CAD0 · --silver
Body text, secondary content
White
#F2F0EC · --white
Headlines, primary text, logo
Muted
#6A6A76 · --muted
Placeholders, timestamps, labels
Semantic Colors
Green
#2E8B4A · --green
Success, confirmed, complete
Amber
#D4A017 · --amber
Warning, pending, in-progress
Red
#C0332A · --red
Error, critical, destructive actions
Divider
--divider: rgba(200,202,208,0.1) /* Use for all borders and separators */
Never use a solid color for borders — always use --divider. This keeps the dark theme feeling layered rather than boxy.
Color Don'ts
✓ Do
Use exact hex values from this palette. Use CSS variables, not raw hex, in code. Use --blue for one primary accent per page.
✗ Don't
Introduce new colors not in this palette. Use pure white (#FFFFFF) — use --white (#F2F0EC). Use more than one accent color on a single page.
04 · Visual
Typography
Two typefaces. One for display and body, one for all technical and labeling contexts. Never deviate.
Typefaces
Sora
Primary / Display
Headlines, subheadings, body copy, UI labels. Weights used: 300 (light), 400 (regular), 500 (medium), 600 (semibold), 700 (bold).
Google Fonts · fonts.google.com/specimen/Sora
Azeret
Mono / Technical
Logo, nav, eyebrows, labels, code, timestamps, stats, buttons, tags. Weights used: 400 (regular), 500 (medium), 700 (bold).
Google Fonts · fonts.google.com/specimen/Azeret+Mono
Type Scale
Custom apps.
Built to run.
Built to run.
Agency-quality output. Without the overhead.
How the process works
Working demo — delivered fast
I build custom apps for businesses that deserve better software than what's available off the shelf — delivered in days, not months.
What used to take a team of developers weeks to produce, I can deliver in a fraction of the time using modern AI-assisted tools — without sacrificing quality.
Third-party infrastructure used to host or operate Client's application is subject to those providers' terms of service.
Klok Ventures · Digital Products
Start a Project
Construction · Real Estate · Restaurant
Last updated June 25, 2026 · © 2026 Connor Klok
05 · Components
Buttons
Three button types. Use Primary for one main action per page. Ghost for secondary actions. Outline Blue for nav-level CTAs.
/* Primary — one per page, main CTA */
.btn-primary {
font-family: 'Azeret Mono', monospace; font-size: 12px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
background: var(--blue); color: white; border: none;
padding: 14px 28px; cursor: pointer;
}
.btn-primary:hover { background: var(--blue-dim); }
/* Ghost — secondary actions */
.btn-ghost {
background: transparent; color: var(--silver);
border: 1px solid var(--divider); padding: 14px 28px;
}
.btn-ghost:hover { border-color: var(--silver); color: var(--white); }
/* Outline Blue — nav CTAs */
.btn-outline-blue {
color: var(--blue); border: 1px solid var(--blue); padding: 7px 14px;
}
.btn-outline-blue:hover { background: var(--blue); color: white; }
Rule: Never use a border-radius on buttons. Zero radius is a deliberate design choice that creates the precise, technical aesthetic. All buttons use Azeret Mono, all caps, 0.1em letter-spacing.
06 · Components
Cards & Panels
Three surface levels create depth. Use --dark for alternate sections, --panel for cards, highlight boxes for callouts.
Standard Card
Construction
BuildLog
Field ops: punch list, daily log, safety, change orders
Real Estate
OpenDoor
Property tour with buyer notes and lead capture
Restaurant
Mezzanine
Table-side menu, ordering, and loyalty
Card: background var(--panel) · border 1px solid var(--divider) · no border-radius · hover: border-color var(--blue), translateY(-2px) · transition 0.15s
Highlight Box
This is an important callout. Use for key statements, warnings, or context that should stand out from body text without being a button or header.
Highlight: background var(--panel) · border 1px solid var(--divider) · border-left 3px solid var(--blue) · padding 16px 20px
Section Alternation
Page background → var(--black) #0E0E10
Alternate section → var(--dark) #16161A
Page background → var(--black) #0E0E10
Alternate section → var(--dark) #16161A
Pages alternate between --black and --dark for sections. Never use a third background color. The --panel color is for elevated elements within sections (cards, inputs, code blocks) only.
07 · Components
Tags & Status
Used for status indicators, labels, and category chips. Always Azeret Mono, all caps, with a dimmed background of the semantic color.
Active
Complete
Pending
Critical
Draft
.tag {
font-family: 'Azeret Mono', monospace; font-size: 9px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px;
}
.tag-blue { background: rgba(45,107,228,0.2); color: var(--blue); }
.tag-green { background: rgba(46,139,74,0.15); color: #4CAF70; }
.tag-amber { background: rgba(212,160,23,0.15);color: var(--amber); }
.tag-red { background: rgba(192,51,42,0.15); color: #E06060; }
.tag-muted { background: rgba(255,255,255,0.06);color: var(--muted);}
08 · Structure
Layout & Grid
Pages are structured with a consistent max-width, padding, and the signature grid background pattern for hero sections.
Max Widths
Content
1000px
Standard page sections (section, .section-full-inner)
Long-form
760px
Legal pages, articles, intake forms
Wide
1100px
Marketing pages with side-by-side layouts
Nav height
56px
Fixed nav — always 56px, never changes
Hero Grid Background
48px × 48px grid · var(--divider)
.hero-grid {
position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(var(--divider) 1px, transparent 1px),
linear-gradient(90deg, var(--divider) 1px, transparent 1px);
background-size: 48px 48px;
/* Fade in from top and bottom */
mask-image: linear-gradient(to bottom,
transparent 0%, rgba(0,0,0,0.3) 30%,
rgba(0,0,0,0.3) 70%, transparent 100%);
}
The grid background appears in hero sections only — never in content sections. It is always positioned absolute within a relative hero container.
Horizontal Rules & Dividers
/* Standard divider — between sections within a page */
border-top: 1px solid var(--divider);
/* Left accent border — highlight boxes and section markers */
border-left: 3px solid var(--blue);
09 · Structure
Spacing
A consistent spacing scale. Use these values — don't freestyle. Everything is a multiple of 4px.
4px
xs
Icon gaps, tight internal padding
8px
sm
Tag padding, chip gaps, small margins
12px
md
Button gaps, card gaps, nav links
16px
lg
Section heading margin, card padding inner
20px
xl
Card padding, hero eyebrow margin
24px
2xl
Page horizontal padding, nav padding, footer
32px
3xl
Stat row padding, between-element gaps
40–48px
4xl
Section content padding, hero bottom
80px
5xl
Full section vertical padding (top and bottom)
10 · Communication
Voice & Tone
Klok Ventures sounds like a sharp, confident builder who respects the client's intelligence. Not an agency. Not a startup. Not a freelancer apologizing for their rates.
Core Voice Principles
Lead with the benefit
Never lead with the feature. "Works offline" is a feature. "Your crew can log on a job site with no signal" is a benefit. Always frame in terms of what it means for the client.
Be specific
"Faster" means nothing. "What used to take 3 hours on paper now takes 12 minutes" means something. Prefer numbers, specifics, and real examples over adjectives.
Own the methodology
Never apologize for using AI. Lead with it as a client benefit: faster delivery, lower cost, same quality. The expertise is Connor's — AI is a tool, like power tools for a contractor.
No agency-speak
Avoid: "synergy," "leverage," "disruptive," "scalable solutions," "best-in-class," "seamless." Write like you're talking to a business owner over coffee, not pitching a VC.
Voice Examples
✓ This is how Klok Ventures sounds
"I use AI as a core part of my development workflow — and that's why your project costs less and moves faster than it would anywhere else."
✗ Not this
"Our innovative AI-powered platform leverages cutting-edge technology to deliver best-in-class digital solutions at scale."
✓ This is how Klok Ventures sounds
"Tell me what's broken. I'll build something that fixes it — and put it in your hands fast enough that you can show your team this week."
✗ Not this
"We offer comprehensive digital transformation services tailored to meet the unique needs of your organization."
Tone by Context
Website copy
Confident, punchy, specific. Short sentences. Leads with outcomes.
Client emails
Direct and professional. No pleasantries that add nothing. Get to the point in the first sentence.
Demo app copy
Match the industry's voice. A roofing app sounds different from a med spa app — calibrate to the client's world.
Legal / contracts
Plain English where possible. Explain what things mean. "We don't start work until you pay the deposit" is better than "Commencement of services is contingent upon receipt of retainer."
11 · Interaction
Motion
Transitions are precise and fast. Nothing dramatic — motion should confirm an interaction, not call attention to itself.
/* Standard transition — color and border changes */
transition: color 0.15s, border-color 0.15s, background 0.15s;
/* Card hover lift */
transition: border-color 0.15s, transform 0.15s;
transform: translateY(-2px); /* on hover */
/* Panel fade-in (page transitions, modals) */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
animation: fadeIn 0.2s ease;
/* Progress bar fill */
transition: width 0.4s ease;
Rule: 0.15s for hover states. 0.2s for panel/modal appearance. 0.4s for progress indicators. Never use easing functions other than ease or linear. Never exceed 0.4s for any UI transition.
12 · Implementation
CSS Variables
Copy this :root block into every new page. Never hardcode hex values inline — always reference variables so the palette can be updated in one place.
:root {
/* ── CORE PALETTE ── */
--black: #0E0E10; /* Page background */
--dark: #16161A; /* Section alt background, nav, footer */
--panel: #1E1E24; /* Cards, inputs, code blocks */
--blue: #2D6BE4; /* Primary accent, CTAs, active states */
--blue-dim: #1A4BA8; /* Hover states for blue elements */
--silver: #C8CAD0; /* Body text, secondary content */
--white: #F2F0EC; /* Headlines, primary text, logo */
--muted: #6A6A76; /* Placeholders, captions, timestamps */
--divider: rgba(200,202,208,0.1); /* All borders and separators */
/* ── SEMANTIC ── */
--green: #2E8B4A; /* Success, confirmed, complete */
--amber: #D4A017; /* Warning, pending, in-progress */
--red: #C0332A; /* Error, critical, destructive */
}
Font Import
/* Always load both weights for both fonts */
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@300;400;500;700&family=Sora:wght@300;400;500;600;700&display=swap');
13 · Implementation
Page Templates
Every page type in the Klok Ventures ecosystem uses one of these templates. Start from here, not from scratch.
Existing Pages
index.html
Main marketing / landing page template
klokventures-intake.html
Multi-step form template with progress bar
klokventures-privacy-policy.html
Legal page template with sidebar (this page uses the same pattern)
klokventures-checklist.html
Interactive checklist / tracker template
klokventures-brand.html
Brand guidelines template (this page)
Rules for Every New Page
01Import both Google Fonts (@import at top of <style>)
02Include the full :root CSS variable block
03Use the standard nav with live clock and "Klok<span>Ventures</span>" logo
04Include a hero section with the grid background, eyebrow, and title
05End with the standard footer linking back to the main site and legal pages
06All pages must be self-contained single HTML files — no external CSS files
07No border-radius on buttons, cards, or inputs — zero radius is intentional
08Client demo apps have their own visual identities — these rules apply to Klok Ventures brand pages only
When Building a New Page — Ask Yourself
Does it use both typefaces correctly? Are all colors from the palette? Does the nav match exactly? Does it have the grid hero? Do the buttons follow the button rules? Would Connor be comfortable putting his name on this?
If yes to all — ship it. If no to any — fix it first.