b1a35783bb
- Merge Infrastructure + Secure + Systems → SNS Networking (Business #1) - Merge Web + Software + Cloud → SNS Digital (planned) - SNS Support unchanged (planned) - Add infra/ folder with 16 FOSS-first buildable designs - Update all agent knowledge, division briefs, legal structure - Restructure businesses/ from 7 to 3 operating folders
79 lines
5.0 KiB
HTML
79 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<!-- SNS Web — color scheme + logo prompt. Inherits parent brand (../../ai-core/knowledge/sns.md). -->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SNS Web — Brand Sheet</title>
|
|
<style>
|
|
:root{--navy:#0A1628;--darkgray:#20252B;--white:#F6F7F9;--parent-cyan:#10C8D8;--accent:#EC4899;/* Magenta */}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{background:var(--navy);color:var(--white);font-family:"IBM Plex Sans",Inter,system-ui,Arial,sans-serif;line-height:1.5;padding:48px 24px}
|
|
.wrap{max-width:920px;margin:0 auto}
|
|
h1{font-family:Oxanium,Sora,Rajdhani,system-ui,sans-serif;font-weight:700;font-size:2.2rem;letter-spacing:.5px}
|
|
h1 .light{font-weight:300;color:var(--accent)}
|
|
.tag{color:var(--parent-cyan);font-size:1.05rem;margin:4px 0}
|
|
.accent-bar{height:6px;width:120px;background:var(--accent);border-radius:3px;margin:14px 0 32px}
|
|
h2{font-family:Oxanium,Sora,sans-serif;font-weight:600;font-size:1.15rem;margin:34px 0 14px;text-transform:uppercase;letter-spacing:1.5px}
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
|
|
.sw{border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
|
|
.chip{height:88px}
|
|
.meta{padding:10px 12px;background:var(--darkgray);font-size:.82rem}
|
|
.meta b{display:block;font-size:.9rem;margin-bottom:2px}
|
|
.hex{font-family:"IBM Plex Mono",monospace;color:var(--parent-cyan)}
|
|
.signature{grid-column:1/-1}
|
|
.signature .chip{height:120px;display:flex;align-items:flex-end;padding:12px}
|
|
.signature .lbl{background:rgba(10,22,40,.55);color:#fff;padding:4px 10px;border-radius:6px;font-size:.8rem}
|
|
.type{background:var(--darkgray);border-radius:10px;padding:18px 20px}
|
|
.type p{margin:4px 0;font-size:.95rem}
|
|
.promptbox{position:relative;background:#0d1a30;border:1px solid rgba(236,72,153,.4);border-radius:10px;padding:20px;margin-top:12px}
|
|
pre{white-space:pre-wrap;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.85rem;color:#dfe7f5}
|
|
button{position:absolute;top:12px;right:12px;background:var(--accent);color:#fff;border:0;padding:8px 14px;border-radius:6px;font-size:.8rem;cursor:pointer;font-weight:700}
|
|
button:active{transform:translateY(1px)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<h1>SNS <span class="light">Web</span></h1>
|
|
<div class="tag">Your Presence, Engineered</div>
|
|
<div class="accent-bar"></div>
|
|
|
|
<h2>Signature Accent</h2>
|
|
<div class="grid">
|
|
<div class="sw signature"><div class="chip" style="background:#EC4899"><span class="lbl">Magenta <span class="hex">#EC4899</span></span></div></div>
|
|
</div>
|
|
|
|
<h2>Base Palette (constant across all SNS brands)</h2>
|
|
<div class="grid">
|
|
<div class="sw"><div class="chip" style="background:#0A1628"></div><div class="meta"><b>Primary Navy</b><span class="hex">#0A1628</span></div></div>
|
|
<div class="sw"><div class="chip" style="background:#20252B"></div><div class="meta"><b>Dark Gray</b><span class="hex">#20252B</span></div></div>
|
|
<div class="sw"><div class="chip" style="background:#F6F7F9"></div><div class="meta" style="color:#20252B;background:#F6F7F9"><b>White</b><span class="hex" style="color:#00A8C6">#F6F7F9</span></div></div>
|
|
<div class="sw"><div class="chip" style="background:#10C8D8"></div><div class="meta"><b>Parent Cyan</b><span class="hex">#10C8D8</span></div></div>
|
|
</div>
|
|
|
|
<h2>Typography</h2>
|
|
<div class="type">
|
|
<p><b>Display:</b> Oxanium / Sora / Rajdhani — geometric, "SNS" heavier.</p>
|
|
<p><b>Body:</b> IBM Plex Sans / Inter — clean, highly legible.</p>
|
|
<p><b>Rule:</b> flat, no gradients, works in 1-color, black & white, embroidery, laser, vinyl.</p>
|
|
</div>
|
|
|
|
<h2>ChatGPT Logo Prompt</h2>
|
|
<div class="promptbox">
|
|
<button onclick="navigator.clipboard.writeText(document.getElementById('p').innerText)">Copy</button>
|
|
<pre id="p">Design a minimal, geometric logo for "SNS Web," a professional web-engineering, hosting, and digital-presence company. Flat vector style, no gradients, no 3D, no shadows — clean, precise, architectural and timeless, like the mark of a serious engineering firm rather than consumer tech.
|
|
|
|
Symbol: an abstract geometric mark suggesting an engineered front door or structured portal — a clean modular frame, window, or grid implying a crafted digital presence. Engineered, modular, and recognizable without text.
|
|
|
|
Color: deep navy #0A1628 as the primary, a single magenta accent #EC4899, and white #F6F7F9. Two colors maximum. Must also read cleanly in solid one-color and in pure black-and-white.
|
|
|
|
Typography: pair the icon with a clean geometric sans-serif wordmark "SNS Web" (in the style of Oxanium / Sora / IBM Plex Sans) — "SNS" heavier, "Web" lighter.
|
|
|
|
Layout: horizontal lockup, icon left and wordmark right, on a plain flat background. High contrast, generous negative space, centered, logo-sheet presentation.
|
|
|
|
Avoid: globes, "www" text, browser windows/address bars, cursors, monitors, wifi arcs, clip art, gradients, drop shadows, mascots, and generic web/IT imagery.</pre>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|