/* Logo exploration — 6 master-mark directions for Obsidia Each is delivered as a self-contained + pair. The sub-vertical pattern: master mark + small sub-glyph anchored bottom-right at ~35% size, inscribed in a soft circle so it reads as a "stamp" or "endorsement". */ /* ========================================================= MARK 01 — SHARD: angular obsidian shard, hard cuts, gold highlight on one facet (premium, sharp) ========================================================= */ function MarkShard({ size = 64, fg = OBSIDIA.gold, bg = OBSIDIA.carbon, mono = false }) { return ( {/* outer shard */} {/* facets */} ); } /* ========================================================= MARK 02 — MONOLITH "O": geometric O carved with a slash facet, evokes obsidian fracture inside a letterform ========================================================= */ function MarkMonolith({ size = 64, fg = OBSIDIA.gold, bg = OBSIDIA.carbon }) { return ( {/* fracture diagonal slicing the O */} {/* highlight dot */} ); } /* ========================================================= MARK 03 — KITE / FACETED DIAMOND: refined version of the diamond, sharper geometry + asymmetric light source ========================================================= */ function MarkKite({ size = 64, fg = OBSIDIA.gold, bg = OBSIDIA.carbon }) { return ( {/* outer kite */} {/* facet split */} {/* lower facets, hollow */} ); } /* ========================================================= MARK 04 — RIDGE: stacked horizontal cuts that read as stratified obsidian / typographic horizon ========================================================= */ function MarkRidge({ size = 64, fg = OBSIDIA.gold, bg = OBSIDIA.carbon }) { return ( {/* angled bars */} ); } /* ========================================================= MARK 05 — PRISM: triangular prism with golden core + chromatic split (premium tech vibe) ========================================================= */ function MarkPrism({ size = 64, fg = OBSIDIA.gold, bg = OBSIDIA.carbon }) { return ( {/* triangle */} {/* light ray entering */} {/* dispersion */} {/* core */} ); } /* ========================================================= MARK 06 — MERIDIAN: a custom Ø-style monogram — circle bisected by a sharp diagonal, highly recognizable at tiny sizes (favicon / app icon strength) ========================================================= */ function MarkMeridian({ size = 64, fg = OBSIDIA.gold, bg = OBSIDIA.carbon }) { return ( {/* diagonal slash, thicker */} {/* upper-right gold fill quadrant */} ); } /* small sub-glyphs — refined */ function SubWig({ size = 22, color = "currentColor" }) { return ( ); } function SubBake({ size = 22, color = "currentColor" }) { return ( ); } function SubTrade({ size = 22, color = "currentColor" }) { return ( ); } function SubLens({ size = 22, color = "currentColor" }) { return ( ); } function SubInk({ size = 22, color = "currentColor" }) { return ( ); } const SUB_GLYPHS = { wig: SubWig, bake: SubBake, trade: SubTrade, lens: SubLens, ink: SubInk }; /* Master + endorsed sub-mark badge (sub-glyph in a soft circle, blurred) */ function VerticalLockup({ MarkComp, vertical, size = 96, fg = OBSIDIA.gold, bg = OBSIDIA.carbon, accent }) { const SG = SUB_GLYPHS[vertical]; const v = VERTICALS[vertical]; const a = accent || v.accent; const sub = size * 0.42; return (
{/* soft halo */}
{/* sub stamp */}
); } /* Wordmark version — "obsidia" + dot + "wig" with the master mark leading and a tiny sub-glyph diffused at the bottom-right of the wordmark */ function WordmarkLockup({ MarkComp, vertical, scale = 1, fg = OBSIDIA.surface, accent, bg = OBSIDIA.carbon }) { const v = VERTICALS[vertical]; const a = accent || v.accent; const SG = SUB_GLYPHS[vertical]; const s = 38 * scale; return (
obsidia {v.name} {/* difuminated sub-glyph anchored bottom-right of wordmark */}
); } /* ================ Showcase artboards ================ */ const LogoExploration = () => { const directions = [ { id: "shard", name: "01 · Shard", desc: "Obsidiana facetada, cortes duros", Comp: MarkShard }, { id: "monolith", name: "02 · Monolith", desc: "Anillo cortado por una fractura", Comp: MarkMonolith }, { id: "kite", name: "03 · Kite", desc: "Diamante refinado, luz asimétrica", Comp: MarkKite }, { id: "ridge", name: "04 · Ridge", desc: "Estratos paralelos, horizonte", Comp: MarkRidge }, { id: "prism", name: "05 · Prism", desc: "Prisma con dispersión dorada", Comp: MarkPrism }, { id: "meridian", name: "06 · Meridian", desc: "Monograma Ø, fuerza a tamaño mínimo", Comp: MarkMeridian }, ]; return (
Exploración · Logo master

Seis direcciones

Cada dirección busca encarnar la obsidiana — piedra forjada, brillante, fracturada — con una geometría distinta. Elige una y refinamos.

{directions.map((d, i) => (
{/* mark + lockup */}
obsidia FORJADO PARA TU NEGOCIO
{/* mini scale row */}
{/* footer label */}
{d.name}
{d.desc}
→
))}
); }; /* The endorsement pattern: master + sub at bottom-right, applied across verticals */ const EndorsedLockups = ({ MarkComp = MarkKite, name = "Kite" }) => (
Patrón endorsado · {name}

obsidia· + sub-glifo

La marca maestra siempre lidera. El sub-glifo del vertical aparece como sello difuminado en la esquina inferior-derecha del logo o del wordmark — visible pero subordinado.

{/* row 1 — badge style: master glyph with sub stamp */}
A · Glifo + sello vertical
{Object.keys(VERTICALS).map(k => (
obsidia {VERTICALS[k].name}
))}
{/* row 2 — wordmark with diffused sub-glyph */}
B · Wordmark con sub-glifo difuminado
{Object.keys(VERTICALS).slice(0, 2).map(k => (
))}
{Object.keys(VERTICALS).slice(2).map(k => (
))}
{/* row 3 — application: app icons */}
C · App icons (60×60 iOS)
{Object.keys(VERTICALS).map(k => (
{/* tiny sub badge */}
{React.createElement(SUB_GLYPHS[k], { size: 12, color: "#fff" })}
obsidia · {VERTICALS[k].name}
))}
); Object.assign(window, { MarkShard, MarkMonolith, MarkKite, MarkRidge, MarkPrism, MarkMeridian, SUB_GLYPHS, VerticalLockup, WordmarkLockup, LogoExploration, EndorsedLockups, });