// SecurityV0 brand mark explorations
const SLATE = "#565e74";
const SLATE_DIM = "#373f54";
const TEAL = "#006b62";
const RED = "#ba1d1d";
function MarkBracket({ size = 56, color = "#fff", bg = SLATE }) {
// Bracket monogram — [S] in code-style brackets, signaling the "V0" / engineering posture
return (
);
}
function MarkBracketV0Upper({ size = 56, color = "#fff", bg = SLATE }) {
// [V0] — uppercase, tighter, more architectural
return (
);
}
function MarkBracketV0Lower({ size = 56, color = "#fff", bg = SLATE }) {
// [v0] — lowercase, softer, reads as code/version literal
return (
);
}
function MarkShield({ size = 56, color = "#fff", bg = SLATE }) {
// Layered shield — two offset shields suggest "defense in depth"
return (
);
}
function MarkOrbit({ size = 56, color = "#fff", bg = SLATE }) {
// Orbit — V0 with a circling dot, suggests scanning / monitoring loop
return (
);
}
function MarkWordmark({ size = 56, color = "#fff", bg = SLATE }) {
// Just a rounded square with S/V0
return (
);
}
function MarkStacked({ size = 56, color = "#fff", bg = SLATE }) {
// Two stacked blocks — "layered" posture
return (
);
}
function MarkNotch({ size = 56, color = "#fff", bg = SLATE }) {
// Notch / chevron — "v" of V0 cut into a square
return (
);
}
const MARK_COMPONENTS = {
bracket: MarkBracket,
bracketV0Upper: MarkBracketV0Upper,
bracketV0Lower: MarkBracketV0Lower,
shield: MarkShield,
orbit: MarkOrbit,
wordmark: MarkWordmark,
stacked: MarkStacked,
notch: MarkNotch,
};
const MARK_META = {
bracket: { name: "Bracket monogram [S]", note: "Code-style brackets · engineering posture", tag: "[ S ]" },
bracketV0Upper: { name: "Bracket [V0] · uppercase", note: "Architectural, tighter — reads as a label", tag: "[ V0 ]" },
bracketV0Lower: { name: "Bracket [v0] · lowercase mono", note: "Code-literal version cue · monospace", tag: "[ v0 ]" },
shield: { name: "Layered shield", note: "Defense-in-depth, two offset shields", tag: "shield · V0" },
orbit: { name: "Orbit", note: "V0 with scanning dot — continuous monitoring", tag: "V0 ●" },
wordmark: { name: "Wordmark only", note: "Soft square, single letter — calmest option", tag: "S" },
stacked: { name: "Stacked block", note: "Two layers — posture/evidence stack", tag: "▭ ▭" },
notch: { name: "Notch / chevron", note: "Negative-space V cut from a block", tag: "△ SV0" },
};
function Wordmark({ color = "#0b0f10", muted = "#717c82", size = 22 }) {
// SecurityV0 — two-tone wordmark: SecurityV in solid, 0 in muted (or vice versa)
return (
Security
V0
);
}
function BrandCard({ variant, risk }) {
const Mark = MARK_COMPONENTS[variant];
const meta = MARK_META[variant];
const RiskBadge = window.RiskBadge;
return (
{/* Light */}
{meta.name} · light
{risk && RiskBadge &&
}
{meta.note}
{meta.tag}
{/* Dark */}