// site.jsx — KevlexOS.com one-page site.
// Tokens (T, serif, sans, mono) and primitives (MonoLabel, Dot, Rule, TopStrap,
// SiteHeader, SiteFooter) are provided by shared.jsx via window.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "split",
"accent": "#F5A623",
"showBrief": true,
"badgeRadius": "circle",
"logoOnCardSize": 96
}/*EDITMODE-END*/;
// ── Top amber strap + header ────────────────────────────────────────────────
// (TopStrap, SiteHeader, SiteFooter, T, serif, sans, mono, MonoLabel, Dot,
// Rule all come from shared.jsx.)
// ── Hero ────────────────────────────────────────────────────────────────────
function Hero({ accent, showBrief }) {
return (
The Index
Tuesday · May 2026
A small suite of tools,
built for one team.
KevlexOS is the home of Kevlex Digital's internal product suite —
a quiet, opinionated set of tools we build for how we actually work.
Not for sale. Not for show.
{showBrief && }
);
}
function MetaBlock({ label, value, dim }) {
return (
);
}
// ── Morning brief preview card (echoes onboarding screen) ───────────────────
function BriefPreview({ accent }) {
const items = [
{ n: 1, title: 'Workshop follow-up', meta: 'Internal', action: 'APPROVE' },
{ n: 2, title: 'Weekly review draft', meta: 'Strategy', action: 'DELEGATE' },
{ n: 3, title: 'Vendor shortlist', meta: 'Ops', action: 'APPROVE' },
];
return (
{/* Folder tab */}
{/* card header */}
Morning Brief · 05:30
{/* serif statement */}
Today, three things move
or nothing else does.
{items.map((it) => (
{it.n}
{it.title}
· {it.meta}
{it.action}
))}
Preview · Kevlex EA
Open ↗
{[
['§', '01', 'The Suite', accent],
['§', '02', 'Kevlex EA · in use', null],
['§', '03', 'Three more · in development', null],
['§', '∞', 'Built sharp', accent],
].map(([sym, n, label, hl], i) => (
{sym}
{n}
{label}
))}
§ 01 — The Suite
One tool in the dock.
{' '}
The rest are on the bench.
04 entries · 01 shipped
{/* Cards grid */}
The team’s operating manual, mid-task.}
body="Process Street meets a learning module. New hires read what they need—and run the step—in the same screen."
tag="DEV"
capability="Checklists · Modules · Onboarding"
stacked
/>
AI Knowledge Base}
tagline={<>The instructions, where the AI reads.}
body="An MCP-powered knowledge base that steers every AI on the team. Guidelines in one place, applied everywhere, output gets sharper."
tag="DEV"
capability="MCP · Guidelines · Quality"
/>
Performance Manager}
tagline={<>A career, monitored kindly.}
body="Skill development tracked over time. AI quietly watches output to coach—and to give every team member their own honest read."
tag="DRAFT"
capability="Growth · Coaching · Self-eval"
/>
);
}
function EACard({ accent, badgeRadius, logoSize }) {
return (
{/* (Whole card is the link target.) */}
{/* Top row: logo + status */}
{/* Title block */}
EA · Kevlex
Your AI-powered{' '}
chief of staff.
A morning brief, an inbox of signals, and an executor that drafts,
schedules, and logs — pending three keys: approve, delegate, dismiss.
{/* Capability lines, mono uppercase tracked */}
{[
['A', 'Morning briefs'],
['B', 'Inbox actions'],
['C', 'Auto-execution'],
].map(([k, v]) => (
· {k}
{v}
))}
{/* Hairline corner mark with arrow indicator */}
↗
);
}
function ToolCard({ accent, index, short, name, tagline, body, tag, capability, stacked }) {
return (
{/* Top row: index badge + status pill */}
Kevlex · {short}
{body}
{capability}
);
}
function ComingCard({ accent, index, name, tag, hint, muted }) {
const isDraft = !muted;
return (
{/* Placeholder badge — empty squircle echoing logo footprint */}
{index}
{tag}
{muted ? {hint} : name}
{!muted && (
{hint}
)}
);
}
// ── System / about strip ─────────────────────────────────────────────────────
function SystemStrip({ accent, theme }) {
const warm = theme !== 'dark';
const bg = warm ? T.warm : T.surfaceDark2;
const ink = warm ? T.ink : T.warm;
const dim = warm ? T.warmDim : T.dim;
const hair = warm ? T.warmHair : T.hair;
return (
§ 02 — The System
One team. One vocabulary.{' '}
One dock.
Built like a magazine you can run from. Confident type, generous
whitespace, no chrome you'll grow tired of.
Three keys, not three menus. Every tool answers the same question
first: what moves today?
Each tool ships internally before it ships anywhere else.
We use what we build, every day, before we trust it to anyone else.
No marketing site. No public roadmap. No CTA. The work is the brief.
);
}
function Tenet({ n, title, children }) {
return (
);
}
// ── Footer ──────────────────────────────────────────────────────────────────
// Footer comes from shared.jsx as .
// ── Wordmark detail block (showcases the typographic split) ────────────────
function WordmarkDetail({ accent, theme }) {
const warm = theme !== 'dark';
const bg = warm ? T.warm2 : T.deep;
const ink = warm ? T.ink : T.warm;
const dim = warm ? T.warmDim : T.dim;
const hair = warm ? T.warmHair : T.hair;
return (
Kevlex
OS
§ 00 — The Wordmark
Editorial serif for the company name. Tracked uppercase mono for the suffix.
Same split runs through every tool in the dock — display lines speak,
labels keep order.
);
}
// ── App ─────────────────────────────────────────────────────────────────────
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const theme = t.theme; // 'split' | 'dark' | 'warm'
const accent = t.accent;
const showBrief = t.showBrief;
// Page background follows the hero half — splits join visually via section bgs
const pageBg = theme === 'warm' ? T.warm : T.deep;
const pageFg = theme === 'warm' ? T.ink : T.warm;
return (
{theme === 'warm'
?
: }
setTweak('theme', v)}
/>
setTweak('accent', v)}
/>
setTweak('showBrief', v)}
/>
setTweak('badgeRadius', v)}
/>
setTweak('logoOnCardSize', v)}
/>
);
}
function LogoPreviewStack({ accent, radius }) {
return (
);
}
// ── Warm theme variants (header comes from shared SiteHeader; Hero & Meta only) ──
function HeroWarm({ accent, showBrief }) {
return (
The Index
Tuesday · May 2026
A small suite of tools,
built for one team.
KevlexOS is the home of Kevlex Digital's internal product suite —
a quiet, opinionated set of tools we build for how we actually work.
Not for sale. Not for show.
{showBrief && }
);
}
function MetaBlockWarm({ label, value, dim }) {
return (
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();