The J6 Venture
website, specified.
Everything a designer or developer needs to rebuild j6venture.com pixel-for-pixel — the logo system, colour tokens, typography, spacing grid, every component, the live hero animations, the full copy deck, and a section-by-section anatomy of the live page. Built to work across both light and dark surfaces, and structured as a living Design Kit — drop it into the site so the team can preview components and download brand collateral in one place.
How to use this document
This is a self-contained, offline HTML file. Every logo is embedded and downloadable, every colour is click-to-copy, and the reference screenshots are baked in. Host it, share it, or open it locally — nothing is fetched from a server.
Click any colour swatch or token value to copy its hex to your clipboard.
Every logo tile has a ↓ SVG button that saves the vector file directly.
Use the Light / Dark switch in the top bar to flip the component playground surfaces.
Specifications below are drawn from the live j6venture.com build and the J6 Venture Design System v1.0. Where the live site and the written system differ, both values are noted so you can choose the canonical one.
Light and dark — not dark-only
The original brand kit was authored dark-first. The live website is the opposite: it is predominantly light, anchored by two dark blocks (the stats band and the footer) and punctuated by accent-coloured cards in black, lime and purple. This contract specifies every token and component for both surfaces so nothing breaks when it lands on a white background.
White text, lime highlights, faint grid texture. Used sparingly to create contrast and gravity.
Black text on white / warm off-white (#F9F9F7). Purple italics for emphasis, lime reserved for CTAs.
Lime and Black are the constants across both modes (a primary CTA is always lime background + black text). Everything else — text colour, borders, muted greys — has a distinct light value and dark value. The paired token table is in Surface Modes.
Logo system — the Citation Mark
A bold serif J with an italic superscript 6, a lime authority rule through the J's foot, and four greyed registration ticks framing it like a viewfinder. The ticks read as a footnote glyph; the rule reads as authority. Together: be the cited source.
Wordmark & lockups
Logo variations — 8 treatments
Eight sanctioned colour/treatment variants. v1 (lime rule) is canonical. v4 (lime period) is the wordmark treatment used in the site nav — "J6.venture". v3 (purple rule) is reserved for AI / intelligence contexts only.
Color system
A strict four-colour core — Black for structure, White for readability, Lime for action, Purple for intelligence — with a functional grey scale. Click any swatch to copy its hex.
Lime appears on a maximum of 1–2 elements per viewport. Allowed: nav active underline (2px), primary CTA background, card top-bar hover reveal, eyebrow labels at 70% opacity, canvas glows. Never on body text; never as a background larger than a button.
Surface modes — light & dark tokens
The definitive paired reference. Every semantic role has a value for dark surfaces and a value for light surfaces. Build both.
| Role | On dark surface | On light surface |
|---|---|---|
| Primary text | White #FFFFFF | Black #0A0A0A |
| Secondary text | rgba(255,255,255,0.70) | Gray 700 #374151 |
| Muted text | rgba(255,255,255,0.40) | Gray 500 #6B7280 |
| Borders / dividers | rgba(255,255,255,0.07–0.12) | Gray 200 #E5E7EB |
| Surface lift | rgba(255,255,255,0.03–0.06) | Gray 50 #F9FAFB |
| Card background | #0F0F0F / rgba(255,255,255,0.02) | White #FFFFFF |
| Section alt bg | Dark Gray #141414 | Off-white #F9F9F7 / #F9FAFB |
| Primary CTA | Lime #C2FF00 bg + Black #0A0A0A text — identical in both modes | |
| Lime token bg | rgba(194,255,0,0.07) | rgba(194,255,0,0.10) |
| Purple token bg | rgba(109,40,217,0.09) | rgba(109,40,217,0.09) · text #6D28D9 |
Toggle the playground with the top-bar switch to preview components on each surface.
Typography
Two workhorse faces plus a mono for data. Libre Baskerville carries editorial authority (headlines, the wordmark). IBM Plex Sans handles all body/UI. IBM Plex Mono appears only in labels, code and data.
| Level | Face | Size / weight / leading |
|---|---|---|
| Display (Hero H1) | Libre Baskerville | 52–72px · 700 · 1.1 · italic final phrase |
| Heading 1 | Libre Baskerville | 40–48px · 700 · 1.15 |
| Heading 2 | IBM Plex Sans | 28–36px · 700 · 1.2 |
| Heading 3 | IBM Plex Sans | 22–24px · 600 · 1.3 |
| Eyebrow / Label | IBM Plex Mono* | 11–12px · 0.16–0.22em · UPPERCASE |
| Body Large | IBM Plex Sans | 18–20px · 400 · 1.65 |
| Body Default | IBM Plex Sans | 16px · 400 · 1.6 · max-width 720px |
| Body Small | IBM Plex Sans | 14px · 400 · 1.5 |
| Caption / Meta | IBM Plex Sans | 12px · 400 · Gray 500 |
| Code / Token | IBM Plex Mono | 13–14px · 500 · 1.7 |
*The written system lists eyebrows as IBM Plex Sans 700 tracked 0.12em; the live site and UI kit render them in IBM Plex Mono. Both are shown — pick one and apply consistently.
Never use Libre Baskerville below 24px. Hero headlines italicise the final phrase for rhythm. Body max-width 720px · 60–80 chars/line. One typeface per component — do not mix.
Spacing & layout grid
An 8px base grid governs everything. Section padding uses the larger end (80–160px) for editorial breathing room.
Buttons
The website uses fully-pill (100px radius) buttons. Primary is lime with black text and is identical on both surfaces. Secondary/ghost buttons invert per surface.
| Variant | Spec | Hover |
|---|---|---|
| Primary (lime) | bg #C2FF00 · text #0A0A0A · no border · radius 100px · pad 14×32 · IBM Plex Sans 14–15 / 600 · ls 0.04em · min-width 140 | brightness(1.08) + scale(1.02); active scale(0.97) |
| Ghost (dark surface) | transparent · text #FFF · 1.5px rgba(255,255,255,0.25) | border #FFF + bg rgba(255,255,255,0.05) |
| Ghost (light surface) | transparent · text #0A0A0A · 1.5px #0A0A0A | bg #0A0A0A + text #FFF |
| Dark fill (hero, light bg) | bg #0A0A0A · text #FFF · pill | slight lift / opacity |
| Hero CTA (lime-lg) | primary + 4s box-shadow glow pulse: 0 0 0 0 → 0 0 0 16px rgba(194,255,0,0) | glow cycles continuously |
Secondary system (for data/console/document UI) uses a squarer 6px-radius, uppercase IBM Plex Mono button with optional lime hover-brackets. The pill button is canonical for the marketing site.
Cards, badges & chips
Cards are the primary content container. White on light sections, dark-surface on dark. The lime top-bar reveal on hover (scaleX 0→1) is the signature interaction. Dark cards may carry lime viewfinder brackets at two corners.
| Property | Light card | Dark card |
|---|---|---|
| Background | #FFFFFF | #0F0F0F / rgba(255,255,255,0.02) |
| Border | 1px #E5E7EB | 1px rgba(255,255,255,0.12) |
| Radius | 12–16px (resource cards 12, feature cards 16) | |
| Padding | 28–32px desktop · 16–24 mobile | |
| Hover | translateY(−4px) + shadow 0 12px 40px rgba(0,0,0,0.08); lime top-bar 3px scaleX(0→1) 0.3s | |
| Accent corners | — | 12px lime L-brackets, top-left + bottom-right |
Forms & inputs
Used in the newsletter ("The Signal") and Get-Started capture. Clean, low-friction, pill-shaped on the site; underline-style in the console UI kit.
| Property | Dark | Light |
|---|---|---|
| Height | 52px desktop · 48px mobile | |
| Radius | 100px (pill) | |
| Border | 1px rgba(255,255,255,0.15) | 1px #D1D5DB |
| Background | rgba(255,255,255,0.06) | #FFFFFF |
| Placeholder | rgba(255,255,255,0.35) | #9CA3AF |
| Focus | border #C2FF00 + box-shadow 0 0 0 3px rgba(194,255,0,0.12) | |
Iconography — the real icon set
These are the actual line icons from the live site, rebuilt as clean 1.5px-stroke SVGs (rounded caps/joins, currentColor so they inherit lime/purple/ink). No third-party icon library — every glyph is bespoke. On the site they sit lime-tinted inside rounded-square chips.
Arrow → is the primary directional element. Align to text cap-height. Never mix filled and outline icons in one context. Feature/industry icons: lime line icon in a rounded-square chip. Check marks render as a black tick inside a lime disc.
Motion & interaction
One rule: motion communicates meaning, not decoration. A single scroll-reveal system unifies content entry; hero canvases are bespoke per page (see the live demos below).
| Interaction | Specification |
|---|---|
| Scroll reveal | opacity 0→1 + translateY(28px→0) · 0.7s · cubic-bezier(0.16,1,0.3,1) · IntersectionObserver threshold 0.15 · delays d1 0.15 / d2 0.30 / d3 0.45 / d4 0.60 · fires once |
| Hover transitions | 0.2–0.3s ease |
| Card hover | translateY(−4px) + shadow deepen; lime top-border scaleX(0→1) from left, 0.3s |
| Button press | scale(0.97) on :active |
| Nav backdrop | backdrop-filter blur(12px); bg opacity shift on scroll / theme |
| Hero CTA | 4s sinusoidal box-shadow glow pulse |
Hero animations — live
The bespoke motion pieces, running for real (not screenshots). The Siri orb and ambient glow are reproduced from the live site's exact CSS; the network, mesh and growth curves are faithful rebuilds of the documented per-page hero canvases. All are self-contained — copy the markup straight into the build.
| Page | Hero animation concept |
|---|---|
| Homepage | Siri orb — radial lime+purple blob drift (intelligence) + ambient corner glows |
| Beyond-Google block | AI network — orb hub wired to ChatGPT/Claude/Perplexity/Google/Bing/Gemini with travelling pulses |
| Service pages | Ambient orbs + mesh textures, contextual per service |
| Prompt Library / pages | Neural mesh — 34 drifting nodes, cluster activation, [VARIABLE] particle drift |
| AEO page | Citation graph — entity nodes + authority connections, zero-click viz |
| About page | Rising growth trajectories — 9 hockey-stick curves with lime inflection markers |
All ambient animation should respect prefers-reduced-motion — freeze on a representative static frame. Ambient layers sit at z-index 0 behind content (z-index 1) and never block interaction (pointer-events:none).
Page anatomy — section by section
The full homepage, top to bottom, with the light/dark designation and build spec for every section. Click any screenshot to enlarge. The site is light-dominant with two dark anchors (§04 stats, §12 footer) and tri-colour accent cards.
Navigation (sticky)
LightFixed 64px
Hero
Light · off-whitePurple italicSiri orbCase studies — 'Not promises. Proof.'
Light1 dark cardPurple italic
Dark stats band
DARK #0A0A0ALime highlight
Beyond Google — AI network
LightLive orbServices — SEO / GEO dual panel
Light
Services — 'Every lever. One engine.' (tabbed)
LightLime active tab
Methodology — 'How the J-curve actually happens.'
Light
Industries — 6-card grid
LightPurple statsTestimonials
Light · off-white1 purple card
The Vault — resource cards
LightBlackLimePurple
Final CTA + footer
Light CTADark footer
Full copy deck
Every line of copy on the page, organised by section. Expand a section to read or copy its text verbatim.
Hero
AI + HUMAN SEO ENGINE — INDIA & BEYOND
J6 blends AI precision with human editorial instinct to build compounding organic growth — faster rankings, more qualified traffic, real revenue.
Book Strategy Session → · See Case Studies
LIVE GROWTH SAMPLE · ALORE.IO · SAAS · +158K organic clicks · In 6 months — from near-zero to compounding
Stat counters + client marquee
[N]K+ Monthly organic visits delivered · [N]M+ Search impressions generated · [N]× Average growth multiple
ORGANIC GROWTH DELIVERED FOR
Alore.io · AssetVantage · Varniya · DrAnshuAgarwal.com · Early-Stage SaaS · D2C Brands · Healthcare Practices · E-commerce
Case studies
Every engagement has one goal: measurable, compounding organic growth that doesn't disappear when you stop paying.
+158K — Organic clicks in 6 months. From quiet search presence to a massive J-curve. 15M impressions. Average position lifted from 56 to 27.8.
+312% — Organic sessions tripled in 8 months. From seed-stage obscurity to top-ranking fintech platform. Pipeline transformed.
21.2 — Average position reached in 3 months, up from 60+. 4,760 organic clicks from high-intent shoppers. 457K impressions.
10× — Impressions boosted 10× in under 90 days. Top 10 local rankings for gynecology searches. 3,000+ clicks despite tier-2 city constraints.
Dark stats band
158K Organic clicks delivered — Single client, 6-month engagement · 15M+ Search impressions generated — Across all active client accounts · 5× Average traffic multiple — Across D2C, SaaS, Healthcare verticals · 30 days To first page 1 ranking — Fastest recorded result in our portfolio
Beyond Google
BEYOND GOOGLE
Search is no longer Google-only. We build visibility across traditional search results and the AI platforms now answering your customers' questions — wherever intent lives.
ChatGPT · Claude · Perplexity · Google · Bing · Gemini
Services — SEO
SEARCH ENGINE OPTIMISATION
Full-stack SEO covering technical foundations, content, and authority — so you rank across Google, Bing, and every traditional search surface.
Technical SEO audit — crawlability, Core Web Vitals, site architecture and schema · Content strategy & production — search-intent mapped, editorial-grade, AI-assisted drafting · Link building & authority — topical trust signals through targeted digital PR and outreach · Programmatic SEO — scale category, product, and location pages
Tags: SEO Strategy · Technical SEO · Content Production · Link Building · Site Architecture · Search Intent Mapping · Programmatic SEO · Analytics & Reporting
Services — GEO
GENERATIVE ENGINE OPTIMISATION
Optimising your content and entity signals so AI platforms — ChatGPT, Perplexity, Gemini — cite, quote, and recommend your brand in generated answers.
LLM content scoring — rewriting content to be citation-friendly and factually dense · Entity & schema optimisation — structured data, LLMs.txt, knowledge graph signals · Source authority building — earned mentions and citations across trusted domains AI models reference · Zero-click & AI overview targeting — answer-layer visibility for high-intent queries
Tags: LLM Content Scoring · AI Citation Signals · Entity SEO · Schema & LLMs.txt · Source Authority · Zero-click Targeting · AI Crawler Optimisation · Content Clustering
Services — tabbed
Content Creation (Editorial-grade, AI-assisted) · SEO Strategy (Research, roadmap, execution) · Technical SEO (Crawl, speed, architecture) · Link Building (Authority & topical trust) · Website Design & Dev (WordPress, CRO-optimised)
We combine AI-speed research with editorial judgment to produce content that earns rankings, builds topical authority, and actually converts readers into buyers — not just traffic numbers.
✓ Topical cluster architecture · AI-assisted research & drafting · Human editorial review · Search intent mapping · CRO-optimised formatting · Competitive gap analysis
Methodology
01 / Deep Diagnosis — We audit your site, map your keyword universe, dissect competitors, and identify every invisible growth ceiling before writing a single word.
02 / Growth Blueprint — A prioritised 12-month roadmap: quick wins, compound plays, and authority-building moves — all mapped to your revenue goals, not vanity metrics.
03 / AI-Accelerated Execution — Content, technical fixes, and link building executed at AI speed with human editorial oversight — so quality never gets sacrificed for velocity.
04 / Compound & Scale — Every month builds on the last. Rankings compound, authority grows, and traffic curves up — the J-curve becomes your sustainable growth engine.
Industries
SaaS Companies — Product-led growth needs organic fuel… (+158K organic clicks — Alore.io in 6 months)
Fintech & SaaS — Compliance-aware, trust-first SEO… (+312% organic sessions — AssetVantage in 8 months)
Healthcare & Medical — Local visibility for practices and clinics… (10× impressions in 90 days — Dr. Anshu)
E-commerce — Programmatic SEO at scale… (#21 avg. position in 3 months — Varniya)
Early-Stage Ventures — Zero to first rankings fast… (30d to first Page 1 ranking)
Consulting & IT Services — Thought leadership content that attracts enterprise buyers… (2× qualified lead generation)
Testimonials
“J6 didn't just improve our rankings — they built us a compounding growth engine. The traffic curve speaks for itself. Genuine strategic partners, not just a vendor.” — Vikas M., CEO · Alore.io
“J6 understood the fintech space intuitively — the content they built for us wasn't just ranking, it was converting. Our organic pipeline tripled in under a year.” — AssetVantage Team, Fintech SaaS Platform
“Our local search presence transformed completely. Patients are now finding us through searches we never expected to rank for. The ROI has been remarkable.” — Dr. Anshu Agarwal, Gynaecologist · Tier-2 City Practice
The Vault
Practical frameworks from our team. No fluff — the same playbooks we use with clients. Downloaded by 1,400+ founders & marketers.
GENERATIVE AI · The GEO Playbook 2026 — A step-by-step framework for ranking inside ChatGPT, Claude, and Perplexity — the new front page of the internet.
TECHNICAL SEO · The SaaS SEO Blueprint — 47 checks every SaaS site needs before spending a dollar on content — from crawl budget to schema to Core Web Vitals.
CONTENT STRATEGY · The Compounding Content System — How to build a content engine that multiplies organic reach month-over-month — without hiring a full editorial team.
Final CTA + footer
NOW TAKING NEW CLIENTS — LIMITED SPOTS
Book a free 30-minute strategy session. We'll audit your current SEO, identify your biggest opportunities, and show you what a realistic growth curve looks like for your business.
Book Strategy Session → · See our work first
Brand tagline: AI + Human SEO Engine for fast, scalable organic growth. Without the overhead.
COMPANY: About J6 · Our Work · Careers · Contact
SERVICES: Content Creation · SEO Strategy · Technical SEO · Link Building · Web Design & Dev
INDUSTRIES: SaaS Companies · D2C Brands · Healthcare · E-commerce · Early-Stage
RESOURCES: Blog · Ebooks · SEO Whitepapers · Free Tools · Case Studies
© 2026 J6 Venture. All rights reserved. · Privacy Policy · Terms of Service · Cookie Policy
Asset index — the Design Kit
All vector logos are embedded and downloadable from the Logo and Variations sections above — this is the collateral the team pulls from. The full production package additionally ships the raster and social assets listed here.
| Group | Contents |
|---|---|
| 01 · Mark | SVG (dark/light × default/no-rule/pure) + PNG 256/512/1024/2048 |
| 02 · Lockup | Horizontal + stacked × dark/light — SVG + PNG 800/1600/3200 |
| 03 · Wordmark | Type-only "J6 venture" — SVG + PNG 800/1600/3200 |
| 04 · Variations | 8 treatments (v1–v8) — SVG + PNG 256/512/1024 |
| 05 · Social | avatar 400/1080 (dark/light) · X banner 1500×500 · LinkedIn 1584×396 · OG 1200×630 |
| 06 · Favicon | SVG + PNG 16→512 · apple-touch 180 · android 192/512 · site.webmanifest · HEAD snippet |
| 07 · Icons | Bespoke line-icon set (platforms, services, methodology, industries) — see §06.3 |
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"> <link rel="manifest" href="/favicon/site.webmanifest"> <meta name="theme-color" content="#0A0A0A">
Build checklist
A designer or developer who ticks every box below has reproduced the J6 Venture site faithfully — on both light and dark surfaces.
Need a token exported in a specific format (Figma variables, Tailwind config, CSS custom properties), or the icon set as a sprite? That can be generated from this same source.