STYLE GUIDE · itK-TECH DESIGN SYSTEM
LIVEENTRIES
37
total
CATEGORIES
12
sections
FILTERED
37
showing
LAST UPDATED
Mar 29
itk-vault
BILLING RATES
Billing Rates
ratesSTUDIO
Woodshed Studio Time$99.99
SERVICE CALLS
Minimum Service Call$49.99
Regular Service Call$99.99
Advanced Service Call$169.99
Training Service Call$99.99
HOSTING DOMAIN
Domain Registration$24.99
Monthly Base Hosting Fee$24.99
Annual Hosting Fee$239.99
SERVICE BLOCKS
10 Hour Service Block$799.99
20 Hour Service Block$1499.99
Ref: https://kennethjackson.tech/welcome/shop/
billingpricingrates
BRAND IDENTITY
Primary Brand Identity
identityNAMEitK-Tech
ADDRESS9507 Perry Avenue, Amarillo, Texas 79119
ADMIN EMAILkjackson@connectionsis.com
CLIENT EMAILkjackson@kennethjackson.tech
MOBILE PHONE(806) 341-8422
SERVICE EMAILservice@kennethjackson.tech
BUSINESS PHONE(806) 374-2323
PRIMARY DOMAINkennethjackson.tech
FORMAT RULES
▸Always written as itK-Tech (lowercase i-t-K, hyphen, capital T-e-c-h)
▸Never ITK Tech, Itk-tech, ITK-TECH, or itktech
▸Never spell out KennethJackson.Tech in Notion — it auto-links
brandidentitycontactitk-tech
Social Media & Links
socialXhttps://x.com/Kenneth_Jackson
GITHUBhttps://github.com/KennethJacksonTech
DISCORDhttps://discord.com/invite/h6CXpK4h
FACEBOOKhttps://www.facebook.com/kennethjacksontech/
LINKEDINhttps://www.linkedin.com/in/kenneth-jackson-57447530b/
INSTAGRAMhttps://www.instagram.com/kennethjacksontech/
WETRANSFERhttps://kennethjackson.wetransfer.com/
YOUTUBE LIVEhttps://www.youtube.com/c/KennethJackson1
YOUTUBE LOFIhttps://www.youtube.com/@itK-LoFi
YOUTUBE TECHhttps://www.youtube.com/channel/UCXiGvIESolcyIYHz04O3r0w
YOUTUBE MUSIChttps://www.youtube.com/@KennethJacksonMusic
brandsociallinks
Sub-Brands & Project Naming
sub_brands| NAME | PURPOSE |
|---|---|
| itK-Tech | Master brand — web dev, IT support, digital services |
| itK-Christine | Automotive AI assistant |
| itK-MechFlow | Mechanic workflow / shop management |
| itK-WebDev | Web development services |
| itK-WordPress | WordPress multisite network management |
| itK-YouTube | YouTube channel & video content |
| itK-Music Publishing | Music publishing arm |
| itK-Audio Projects | Audio/DSP development |
| itK-LCARS | Library Computer Access/Retrieval System — command center |
| itK-Della | Digital assistant operations & AI team management |
| itK-ScanKit | iOS scanner XCFramework |
Pattern: itK-[ProjectName] (camelCase or hyphenated after prefix)
brandsub-brandsnaming
CLIENT WORKFLOW
Client Site Tech Stack
stackUIReact 19.x
POSTCSS@tailwindcss/postcss 4.x
STYLINGTailwind CSS 4.x
DATABASESupabase (only if needed)
LANGUAGETypeScript 5.x
FRAMEWORKNext.js 16.x
DEFAULT MODEStatic Export (output: export, trailingSlash: true, images: { unoptimized: true })
DYNAMIC MODERemove output: export when Supabase is needed
clientstacknextjsworkflow
ATLAS Workflow Phases
atlas_phasesPHASES
Audit→Discovery→Design→Build→Review→Live
CHECKLIST
▸Site audit complete
▸Discovery complete
▸Design approved
▸Build complete
▸Content populated
▸Quality checklist passed
▸Client review approved
▸Domain cutover complete
clientatlasworkflowphases
ATLAS Build Order (12 Steps)
build_orderSTEPS
▸Theme first — extract colors, fonts, spacing from .pen file into globals.css
▸Layout shell — navigation, footer, page wrapper components
▸Homepage — hero section, key content blocks
▸Inner pages — About, Services, Contact, Gallery, etc.
▸Interactive features — forms, galleries, animations
▸Content population — real text, images, media
▸Polish — responsive tweaks, accessibility, meta tags, OG images
▸Visual QA — compare built site against .pen mockup, fix deviations
▸SITE.md — generate site documentation
▸Dev review — Kenneth reviews local build before Vercel deploy
▸Generate SITE.md — write complete site spec to site/SITE.md
▸Dev review — run dev server, Kenneth reviews locally
clientatlasbuildorder
Quality Checklist
qualityCHECKS
▸Built site matches .pen mockup design
▸SITE.md generated and accurate
▸Dev review completed before Vercel deploy
▸Responsive on mobile, tablet, desktop
▸All images have alt text
▸Semantic HTML (header, nav, main, section, footer)
▸Skip-to-content link for accessibility
▸prefers-reduced-motion respected
▸Meta tags and page titles set
▸Favicon in place
▸No console errors
▸Lighthouse score > 90 on all categories
▸All links work
▸Contact info accurate
▸SITE.md committed to repo
clientqualityqachecklist
Anti-Patterns
anti_patternsNEVER DO
▸Skip the Pencil design phase — designing before coding prevents rework
▸Read .pen files with Read/Grep — they are encrypted, use Pencil MCP tools only
▸Install a CSS framework on top of Tailwind
▸Use pages/ router — App Router only
▸Add a CMS unless the client will actually update content themselves
▸Over-abstract components for a 5-page site
▸Skip the theme setup — it is the foundation
▸Use blue in any color palette — Kenneth considers it hard on eyes and overused
clientanti-patternsrules
SITE.md Specification
site_mdREQUIRED SECTIONS
▸Client — business name, contact, location, phone, domain, social links
▸Brand Personality — tone and feel in plain language
▸Services — what the client offers
▸Stack — framework, libraries, versions, deployment target
▸Pages — every route with one-line description
▸Components — reusable components with file paths and descriptions
▸Forms — every form with field list, types, submission destination
▸Design System — colors, typography, spacing, corner radius, shadows
▸Images — logo details + photo inventory table
▸SEO — title pattern, default description, analytics ID
▸Content Management — who manages content and how
▸Formatting Standards — phone format, state names, etc.
▸Deployment — Vercel project name, GitHub repo, build command, domain
When: After build complete, before Vercel deploy. Update if significant changes during review.
Anti-pattern: Never skip — without SITE.md, recreating the site requires re-reading entire conversation history
clientsite-mddocumentationspec
CODE STANDARDS
File & Code Naming Conventions
namingENV FILES.env at project root, never committed to git
FILE NAMESkebab-case (style-guide.css, api-routes.js)
PATH ALIAS@/* maps to ./src/* in all Next.js projects
CSS CLASSESkebab-case (main-header, nav-item)
JS VARIABLEScamelCase (getUserData, isActive)
DATABASE TABLESsnake_case (wp_posts, user_sessions)
REACT COMPONENTSPascalCase (Navigation.tsx, Footer.tsx) — be consistent per project
codenamingconventions
Next.js Standards
nextjsROUTERApp Router only — never use pages/ router
DYNAMICRemove output: export when Supabase needed
NO PUSHNever auto-push — Vercel auto-deploys on push, burning build minutes. Kenneth batch-pushes.
STYLINGTailwind CSS v4 with @tailwindcss/postcss — no additional CSS frameworks
LANGUAGETypeScript required on all projects
STATIC DEFAULToutput: export for client sites (next.config.ts)
MECHFLOW VERSIONNext.js 15, full dynamic with Supabase
CLIENT SITE VERSIONNext.js 16, static export by default
codenextjsreactframework
Node.js / Express Conventions
node_expressAUTHJWT where applicable
PATTERNRESTful
MIDDLEWARE/middleware/ directory
ERROR HANDLINGCentralized error middleware
ROUTE ORGANIZATIONBy resource (/routes/vehicles.js, /routes/users.js)
codenodejsexpressapi
WordPress Conventions
wordpressTHEMESCustomizations in child themes, never edit parent themes
PLUGINSTest on staging before production
BULK OPSWP-CLI is preferred tool
DOMAIN MAPPINGApache vhosts for multisite domain mapping
codewordpressphp
GOTCHA Framework
gotchaMECHFLOW STRUCTUREapp/src/ (Next.js), goals/, tools/ (Python), context/, hardprompts/, args/
CLIENT SITE STRUCTURECLAUDE.md, goals/, tools/, context/, hardprompts/, args/, memory/, data/, design/, site/
DIRECTORIES
▸args/
▸context/
▸data/
▸goals/
▸hardprompts/
▸memory/
▸tools/
codegotchaframeworkstructure
COLOR SYSTEM
MechFlow Dark Mode (Default)
mechflow_dark#0A0A0AbackgroundApp background
#FAFAFAforegroundPrimary text
#171717cardCard/panel backgrounds
#FAFAFAcard-foregroundCard text
#E5E5E5primaryPrimary buttons, emphasis
#171717primary-foregroundText on primary
#262626secondarySecondary surfaces
#A1A1A1muted-foregroundSubdued text, labels
#262626accentHover states, highlights
#FF6568destructiveErrors, delete actions
#FFFFFF1AborderSubtle borders
#171717sidebarSidebar background
#1447E6sidebar-primaryActive sidebar item
Font: ui-sans-serif, system-ui, sans-serif
Radius: 0.625rem (10px)
colorsmechflowdark-modetokensdesign-system
MechFlow Light Mode
mechflow_light#FFFFFFbackgroundApp background
#0A0A0AforegroundPrimary text
#FFFFFFcardCard backgrounds
#171717primaryPrimary buttons
#F5F5F5secondarySecondary surfaces
#737373muted-foregroundSubdued text
#E40014destructiveErrors, delete actions
#E5E5E5borderBorders
colorsmechflowlight-modetokens
MechFlow Chart Colors
mechflow_charts#1447E6chart-1Primary data series
#00BB7Fchart-2Success/positive
#F99C00chart-3Warning/attention
#AC4BFFchart-4Highlight/alternate
#FF2357chart-5Alert/critical
colorsmechflowchartsdata-viz
LCARS Terminal Colors
lcars#FF9900--color-lcars-amberPrimary accent
#CC7700--color-lcars-goldSecondary accent
#FFCC99--color-lcars-peachSoft highlights
#CC99CC--color-lcars-lavenderTertiary accent
#9977AA--color-lcars-violetHeader/nav
#99CCFF--color-lcars-iceInfo/links
#5599FF--color-lcars-skyActive states
#000000--color-lcars-bgBackground
#FF9900--color-lcars-textDefault text
#1A1A2E--color-lcars-panelPanel backgrounds
⚠ NEVER use blue (#0000FF family) — amber/gold/peach palette only
Font: JetBrains Mono
Effects: scanlines, dark-mode-only
colorslcarsterminaldesign-system
COWORK PROTOCOL
Project Tracking Properties
trackingPROPERTIES
▸{"name":"Site Phase","type":"Select","values":"Audit → Discovery → Design → Build → Review → Live"}
▸{"name":"Current Site URL","type":"URL","purpose":"Existing site being replaced"}
▸{"name":"GitHub Repo","type":"URL","purpose":"Created during build phase"}
▸{"name":"Vercel Preview URL","type":"URL","purpose":"Set after first deploy"}
▸{"name":"Vercel Production URL","type":"URL","purpose":"Set after production deploy"}
▸{"name":"Stack","type":"Select","values":"Static Export, Supabase Dynamic, or WordPress"}
coworkprotocoltrackingnotion
Della ↔ Code Handoff
handoffRULEOne paste in, one paste back
CODE WRITES BACK
▸GitHub repo URL
▸Vercel URLs
▸Site Phase updates
▸Discovery answers
PROMPT STRUCTURE
▸Session Start Block
▸GOTCHA init
▸Hard Constraints
▸Numbered Steps
▸Execution Order
▸CoWork Report
COWORK AFTER BUILD
▸Update Site Phase to Review or Live
▸Update Contact record with new site URL
▸Update Domain record if cutover done
▸Add Vercel Production URL
▸Create ongoing maintenance tasks
▸Follow Launch & PR System
COWORK BEFORE BUILD
▸Create/update Project entry in Projects DB
▸Link to Contact and Domain records
▸Set Site Phase to Audit
▸Set Stack (Static Export or Supabase Dynamic)
▸Add Current Site URL if upgrading
▸Generate ATLAS initialization prompt with variables pre-filled
▸Tell Kenneth the prompt is ready
COWORK DURING BUILD
▸Update Site Phase as stages complete
▸Add GitHub Repo URL when provided
▸Add Vercel Preview/Production URLs
▸Create follow-up Tasks if needed
▸Update ATLAS checklist on project page
CODE READS AT SESSION START
▸Project page for this client
▸itK-Tech Style Guide
coworkprotocolhandoffcode
EDITORIAL
Typography & Formatting
typographyCTAInclude clear call-to-action at the end
HEADLINESTitle Case for H1, Sentence case for H2 and below
PARAGRAPHSShort — 2-4 sentences
STATE NAMESAlways spell out in full (Texas not TX, California not CA)
SUBHEADINGSEvery 2-3 paragraphs for scanability
DEFAULT FONTHelvetica
FOOTER NEVERNever Designed by itK-Tech or other variations
PHONE FORMAT(xxx) xxx-xxxx — always parentheses around area code, space, then hyphen
FOOTER CREDITMade in Amarillo, Texas by KennethJackson.Tech — linked to https://kennethjackson.tech
editorialtypographyformatting
Writing Voice
voiceTONEProfessional but approachable — knowledgeable without being stiff
STYLEDirect and clear — get to the point, respect the reader time
JARGONAvoid with clients; use plain language
PERSPECTIVEFirst person when representing itK-Tech (We build..., I specialize in...)
editorialvoicewritingtone
Video Content Standards
videoINTROBrief, under 15 seconds
OUTROSubscribe CTA + links to related content
THUMBNAILConsistent itK-Tech branding
DESCRIPTIONInclude relevant links, timestamps, and keywords
editorialvideoyoutube
Social Media Standards
social_mediaHANDLESConsistent across platforms where possible
HASHTAGSRelevant to the post, not excessive (3-5 max)
CROSS POSTKey content across platforms
ENGAGEMENTEngage with comments within 24 hours
editorialsocialmarketing
INFRASTRUCTURE
Infrastructure Defaults
coreDNSCloudflare (all domains)
SSLLet's Encrypt / Certbot
TIMEZONECentral (America/Chicago)
BRAND ASSETShttps://kennethjackson.tech/
WORDPRESS HOSTINGDebian/Apache on 34.134.132.78 (Apache for WordPress only)
DEFAULT DEPLOYMENTVercel (Next.js client sites and MechFlow)
WORDPRESS MULTISITEkennethjackson.tech (subdirectory install, 32+ sites)
infrastructurehostingdeployment
LESSONS LEARNED
WordPress Multisite Image Migration
wordpress_migration▸Upload paths differ by site ID (sites/24 vs sites/34)
▸Always try the [subdomain].kennethjackson.tech domain directly, not the wp.com CDN (returns 400s)
▸Strip ?ssl=1 params from image URLs
lessonswordpressmigrationimages
Firecrawl MCP
firecrawl▸Check token validity at start of any site audit
▸WebFetch works as fallback but can't do branding extraction or screenshots
▸Use Chrome browser tools as second fallback for screenshots and DOM inspection
lessonsfirecrawlmcpscraping
Pencil MCP Constraints
pencil▸textTransform property doesn't exist — use uppercase text directly
▸Georgia font is invalid — use Merriweather for serif
▸Max 25 operations per batch_design call
lessonspencilmcpdesign
Vercel Deployment
vercel▸Default project name from npx vercel uses directory name (site), which is generic
▸Set descriptive project name during first deploy (e.g., lee-blakeney-site not site)
▸Vercel project naming convention: [client-name]-site
▸Dev review before deploy is mandatory — Kenneth reviews localhost first
lessonsverceldeployment
Client Site Deliverables
deliverables▸Every client site repo must include SITE.md — documents site structure, theme, image inventory, deployment
▸Footer credit on all client sites: Made in Amarillo, Texas by KennethJackson.Tech
lessonsclientdeliverables
MECHFLOW
MechFlow Brand Basics
brandLOGOWrench icon mark (rounded square, dark background)
DOMAINmechflow.app
TAGLINEAuto Repair Shop Management
PRIORITYMechFlow is the PRIMARY project. Only actual customer work takes precedence.
AI ASSISTANTChristine (itK-Christine)
PARENT BRANDitK-Tech (sub-brand: itK-MechFlow / itK-Christine)
PRODUCT NAMEMechFlow (one word, capital M, capital F)
SOCIAL HANDLE@mechflowapp (consistent across all platforms — accounts not yet created)
TARGET AUDIENCEIndependent auto repair shops, fleet managers, service writers, technicians
mechflowbrandidentity
MechFlow Brand Voice
voiceTONEConfident and capable — built by someone who understands the shop floor
STYLENo-nonsense — shop owners don't have time for fluff
TECHNICALTechnical but accessible — respect the mechanic craft without overcomplicating
VALUE PROPThe all-in-one platform that runs your shop — from estimate to invoice, diagnostics to accounting
mechflowvoicebrandwriting
MechFlow Component Standards
componentsTYPESsrc/lib/supabase/database.types.ts
TECH STACKNext.js 15, Supabase, shadcn/ui, Tailwind CSS v4, TypeScript, Zod, react-hook-form
URL FIELDS<WebsiteInput> from @/components/ui/website-input
TABLE COUNT124
PHONE FIELDS<PhoneInput> from @/components/ui/phone-input
DATA FETCHINGServer components for data fetching, client components for interactivity
CUSTOMER NAMEScustomerDisplayName() from @/lib/utils
STATE DROPDOWNS<StateSelect> from @/components/ui/state-select (full state names, never abbreviated)
mechflowcomponentscodestandards
MechFlow Typography
typographyBODYSystem regular, 14-16px
APP UISystem font stack (no custom fonts — fast, native feel)
HEADINGSSystem bold, sized by shadcn/ui defaults
MARKETINGTBD (define when marketing pages are built)
mechflowtypographyfonts
TERMINOLOGY
Terminology Rules
naming✓ CustomernotClient / Contact (in MechFlow context)
✓ ContactsnotClients (in Notion context)
✓ Contact TasksnotClient Tasks
✓ itK-TechnotKennethJackson.Tech (in Notion text)
✓ itK-TechnotKJ Tech
✓ Contacts DashboardnotClients Dashboard
terminologynamingconventions
WORKSPACE COLORS
Workspace Area Colors
notion_areas| AREA | COLOR | USED IN |
|---|---|---|
| Projects | Blue | Tasks, Projects DB |
| Woodshed | Purple | Tasks, Projects DB |
| Personal | Green | Tasks |
| Contacts | Orange | Tasks |
| Editorial | Pink | Tasks |
| itK-Tech | Purple | Projects DB (Area) |
workspacecolorsnotion