Produtos
Sistema cromático hierárquico, geometrias 3D wireframe e assets de identidade para cada produto do ecossistema MSCREATIVE.SYSTEMS. Cada entidade tem paleta, forma e linguagem visual próprias — derivadas de função, não de gosto.
Sistema Cromático
Código cromático derivado da essência funcional de cada produto. Diálogo de temperatura e profundidade.
/* Product accent palettes — Midnight Era v3.0 (DEC-001 a DEC-018) */
[data-product="ms"] { --p-ms-accent1: #A89D80; --p-ms-accent2: #756750; }
[data-product="fronteiristas"] { --p-fronteiristas-accent1: #B5BF9A; --p-fronteiristas-accent2: #7A8562; }
[data-product="oracle"] { --p-oracle-accent-start: #E8397A; --p-oracle-accent-end: #E87800; }
[data-product="neuro"] { --p-neuro-accent1: #00C9C8; --p-neuro-accent2: #007A7A; }
[data-product="style"] { --p-style-accent1: #E8397A; --p-style-accent2: #F55A2A; }
[data-product="design"] { --p-design-accent1: #909098; --p-design-accent2: #525258; }
[data-product="execution"] { --p-execution-accent1: #E87800; --p-execution-accent2: #BF4800; }
/* Chumbo Quente per-product overrides (carousel capas) */
[data-product="mscs"] { --ds-cq-bg: #0A0A0E; --ds-cq-headline: #6A6A6A; --ds-cq-emphasis: #A85A30; --ds-cq-rule-end: #6A3818; }
[data-product="oracle"] { --ds-cq-bg: #0A0C10; --ds-cq-headline: #5E5545; --ds-cq-emphasis: #8A6A18; --ds-cq-rule-end: #5A4010; }
[data-product="fronteiristas"] { --ds-cq-bg: #0A0C10; --ds-cq-headline: #5A5550; --ds-cq-emphasis: #8A7A62; --ds-cq-rule-end: #5A5040; }
[data-product="neuro"] { --ds-cq-bg: #0A0C10; --ds-cq-headline: #4A4460; --ds-cq-emphasis: #5A9AAA; --ds-cq-rule-end: #3A5A6A; }
[data-product="style"] { --ds-cq-bg: #0A0C10; --ds-cq-headline: #5B4C50; --ds-cq-emphasis: #9A6068; --ds-cq-rule-end: #6A3A42; }
[data-product="design"] { --ds-cq-bg: #0A0C10; --ds-cq-headline: #4A5060; --ds-cq-emphasis: #5A7A9A; --ds-cq-rule-end: #3A4A6A; }
[data-product="execution"] { --ds-cq-bg: #0A0C10; --ds-cq-headline: #5A5040; --ds-cq-emphasis: #9A7048; --ds-cq-rule-end: #6A4828; }
3D Geometries
Cada entidade do ecossistema possui uma forma geométrica 3D wireframe com rotação contínua. Canvas 2D com projeção perspectiva e matrizes de rotação nos 3 eixos.
<!-- Include the engine -->
<script src="js/wireframe-engine.js"></script>
<!-- Declarative: data attributes auto-init -->
<canvas data-geometry="icosaedro"
data-color1="#A89D80" data-color2="#756750"
data-speed-x="0.12" data-speed-y="0.16" data-speed-z="0.06"
data-fov="3.5"
width="240" height="240"></canvas>
<script>MSCS_Wireframe.initAllGeometries();</script>
<!-- Available geometries (7):
icosaedro — MSCS (20 faces, platonic solid)
mobius — Creative Oracle (twisted loop)
threshold — Fronteiristas (stella octangula, 2 tetraedros)
tensegrity — Design Codex (bars + tension cables)
turbine — Style Codex (helicoidal blades)
dendritico — Neuro Codex (synaptic branches)
gyroscope — Execution Codex (3 orbital rings)
-->
<!-- Manual init (alternative) -->
<canvas id="my-canvas" width="200" height="200"></canvas>
<script>
MSCS_Wireframe.initGeometry(
'my-canvas', 'tensegrity',
'#909098', '#525258',
[0.13, 0.16, 0.09], 3.5
);
</script>
Assets de Identidade
Compilação dos elementos de identidade visual por produto: headlines editoriais, fragmentos ASCII e assinatura MS. Cada produto carrega sua linguagem — visual e verbal.
Headlines por Produto
const PRODUCT_HEADLINES = {
mscs: { title: 'A Morte do Gosto Pessoal', em: 'Pessoal', color: '#A85A30' },
oracle: { title: 'Árbitro Não Opina — Governa', em: 'Opina', color: '#8A6A18' },
fronteiristas: { title: 'Curadoria É o Último Ato Criativo', em: 'Criativo', color: '#8A7A62' },
neuro: { title: 'Seu Cliente Não Decide — Reage', em: 'Decide', color: '#5A9AAA' },
style: { title: 'Tendência É Preguiça de Identidade', em: 'Preguiça', color: '#9A6068' },
design: { title: 'Estratégia Sem Estrutura É Opinião', em: 'Estrutura', color: '#5A7A9A' },
execution: { title: 'Plano Sem Execução É Ficção', em: 'Execução', color: '#9A7048' },
};
ASCII Fragments por Produto
░▒▓█▓▒░ ╔══╗ ║▪▪║ ╚══╝ ▸ SYS.RENDER ▸▸▸
※──※──※──※ ┌※┐ │ ※│ └※┘ ※ ORACLE.SYS ※
◇──◇──◇──◇ ╔◇╗ ║◇◇║ ╚◇╝ ◇ ARCHIVE.SYS ◇
◎──◎──◎──◎ ┌──┐ │◎◎│ └──┘ ◎ PERCEPT.LAYER ◎
❋──❋──❋──❋ ╭──╮ │❋❋│ ╰──╯ ❋ STYLE.ENGINE ❋
⊞──⊞──⊞──⊞ ┌──┐ │⊞⊞│ └──┘ ⊞ STRUCT.ENGINE ⊞
▶──▶──▶──▶ ╔──╗ ║▶▶║ ╚══╝ ▶ EXEC.ENGINE ▶
const ASCII_FRAGMENTS = {
mscs: '░▒▓█▓▒░ ╔══╗ ║▪▪║ ╚══╝ ▸ SYS.RENDER ▸▸▸',
oracle: '※──※──※──※ ┌※┐ │ ※│ └※┘ ※ ORACLE.SYS ※',
fronteiristas: '◇──◇──◇──◇ ╔◇╗ ║◇◇║ ╚◇╝ ◇ ARCHIVE.SYS ◇',
neuro: '◎──◎──◎──◎ ┌──┐ │◎◎│ └──┘ ◎ PERCEPT.LAYER ◎',
style: '❋──❋──❋──❋ ╭──╮ │❋❋│ ╰──╯ ❋ STYLE.ENGINE ❋',
design: '⊞──⊞──⊞──⊞ ┌──┐ │⊞⊞│ └──┘ ⊞ STRUCT.ENGINE ⊞',
execution: '▶──▶──▶──▶ ╔──╗ ║▶▶║ ╚══╝ ▶ EXEC.ENGINE ▶',
};
MS Signature Mark
Especificações
SVG inline, fill="currentColor". Viewbox: 0 0 67.2 51.75.
Carousel: source line (20px, 15%) + brand mark (48px, 6%).
Disponível via MSCS_Wireframe.MS_SIG_SVG.
// Access the inline SVG string from the wireframe engine
const svgMarkup = MSCS_Wireframe.MS_SIG_SVG;
// Insert into DOM
document.querySelector('.brand-mark').innerHTML = svgMarkup;
// Usage in carousel bottom strip (Space Mono 10px, opacity 6%)
<div class="slide-brand" style="opacity: 0.06; width: 48px;">
<!-- MS_SIG_SVG injected here -->
</div>