112 lines
10 KiB
HTML
112 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="color-scheme" content="light dark">
|
|
<meta name="description" content="Mosaic Stack brand studies. A local, interactive review of identity, type, and color. Not a working product.">
|
|
<title>Mosaic Stack · Brand studies</title>
|
|
<link rel="icon" href="assets/logos/assembly.svg" type="image/svg+xml">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="brand.js" defer></script>
|
|
<script src="board.js" defer></script>
|
|
</head>
|
|
<body>
|
|
<a class="skip" href="#main">Skip to brand studies</a>
|
|
<header class="masthead">
|
|
<a class="brand-home" href="#top" aria-label="Mosaic Stack brand board, top"><span data-logo></span><span>Mosaic Stack</span></a>
|
|
<div class="masthead-note">Brand studies <span class="edition">01 / for discussion</span></div>
|
|
<a href="#review" class="review-link">Review guide <span aria-hidden="true">↗</span></a>
|
|
</header>
|
|
<div id="top" class="layout">
|
|
<aside class="controls" aria-label="Brand preview controls">
|
|
<div class="control-inner">
|
|
<p class="eyebrow">Make it yours</p>
|
|
<p class="control-intro">Change the palette, not the product.</p>
|
|
<fieldset class="mode-control"><legend>Appearance</legend><div class="segmented" id="modes">
|
|
<label><input type="radio" name="mode" value="light" checked><span>Light</span></label>
|
|
<label><input type="radio" name="mode" value="dim"><span>Dim</span></label>
|
|
<label><input type="radio" name="mode" value="dark"><span>Dark</span></label>
|
|
</div></fieldset>
|
|
<label class="field" for="palette">Color palette<select id="palette"></select></label>
|
|
<label class="field" for="font">Typography<select id="font"></select></label>
|
|
<label class="field" for="mark">Logo concept<select id="mark"></select></label>
|
|
<p class="local-note">Preview only. Your choices stay in this browser when storage is available.</p>
|
|
<nav aria-label="Brand board sections">
|
|
<a href="#identity"><span>01</span> Identity</a>
|
|
<a href="#typography"><span>02</span> Typography</a>
|
|
<a href="#color"><span>03</span> Color system</a>
|
|
<a href="#components"><span>04</span> Iconography & controls</a>
|
|
<a href="#review"><span>05</span> Your review</a>
|
|
</nav>
|
|
<button id="reset" class="text-button" type="button">Reset preview</button>
|
|
</div>
|
|
</aside>
|
|
<main id="main" tabindex="-1">
|
|
<noscript><p class="notice">JavaScript is needed for these interactive studies. Enable it and reload. The requirements and review notes are also available as Markdown files in this folder.</p></noscript>
|
|
<section class="intro" aria-labelledby="intro-title">
|
|
<div class="intro-copy"><p class="eyebrow">Mosaic Stack / identity exploration</p>
|
|
<h1 id="intro-title">One identity.<br>Many ways to work.</h1>
|
|
<p class="lead">An AI operating system for the things you make, manage, and do together.</p>
|
|
<p>Let's choose the visual language before we choose the dashboard. Compare three marks, three sans-serif families, and ten palettes in three appearances.</p>
|
|
<a href="#identity" class="inline-link">Start with the mark <span aria-hidden="true">↓</span></a>
|
|
</div>
|
|
<div class="identity-stage" aria-label="Current brand combination">
|
|
<div class="stage-meta"><span id="current-palette">Harbor</span><span id="current-mode">Light</span></div>
|
|
<div class="stage-mark" data-logo></div>
|
|
<div class="stage-wordmark">Mosaic Stack<span>mosaicstack.dev</span></div>
|
|
<div class="stage-bottom"><span>Independent pieces.<br>A shared place to work.</span><span class="stage-swatch" aria-hidden="true"></span></div>
|
|
</div>
|
|
</section>
|
|
<section id="identity" class="board-section" aria-labelledby="identity-title">
|
|
<div class="section-heading"><div><p class="eyebrow">01 / Identity</p><h2 id="identity-title">Recognizable without a color.</h2></div><p>Each concept starts as a single-color shape. Choose one to see it in the page header and brand specimen.</p></div>
|
|
<div id="logo-grid" class="three-grid"></div>
|
|
<p class="section-note">Original concept studies, not cleared trademarks. Small-size recognition and final proportions need your judgment. No logo is approved yet.</p>
|
|
</section>
|
|
<section id="typography" class="board-section" aria-labelledby="type-title">
|
|
<div class="section-heading"><div><p class="eyebrow">02 / Typography</p><h2 id="type-title">A voice you can read all day.</h2></div><p>Compare the same content at the same sizes. Each choice changes the board, while these specimens keep their own typeface.</p></div>
|
|
<div id="font-grid" class="three-grid"></div>
|
|
<div class="type-scale"><span><b>32</b>Section heading</span><span><b>20</b>Card title</span><span><b>16</b>Body & controls</span><span><b>13</b>Supporting labels</span><p>Sentence case. Tabular numerals for data. Comfortable line spacing. Monospace reserved for actual code in later designs.</p></div>
|
|
<p class="section-note">Local Latin font files, four weights each, licensed under SIL OFL. Other scripts fall back to system fonts and need later multilingual testing.</p>
|
|
</section>
|
|
<section id="color" class="board-section" aria-labelledby="color-title">
|
|
<div class="section-heading"><div><p class="eyebrow">03 / Color system</p><h2 id="color-title">Ten palettes. Same Mosaic.</h2></div><p>Hue relationships give each palette a reason. Contrast determines the usable shades. Choose any appearance directly on a palette card.</p></div>
|
|
<div class="color-principles"><p><b>Light</b>Pale tinted canvas, clean surfaces.</p><p><b>Dim</b>Charcoal layers with a restrained tint.</p><p><b>Dark</b>Deep color, with lighter raised surfaces.</p></div>
|
|
<div id="palette-grid" class="palette-grid"></div>
|
|
<div class="token-panel"><div><h3 id="token-title">Current tokens</h3><p>Actual values used by this preview, not production configuration.</p><button type="button" id="export" class="secondary">Download palette tokens</button></div><dl id="tokens"></dl></div>
|
|
<p class="section-note">Success, warning, and error are separate roles. They always have a label or symbol. A red brand palette never makes color alone mean "error".</p>
|
|
</section>
|
|
<section id="components" class="board-section" aria-labelledby="components-title">
|
|
<div class="section-heading"><div><p class="eyebrow">04 / Iconography & controls</p><h2 id="components-title">Quiet details. Clear meaning.</h2></div><p>One original outline family, with a 24-unit grid and consistent 1.75-unit strokes. Labels carry meaning; icons help recognition.</p></div>
|
|
<div id="icon-grid" class="icon-grid"></div>
|
|
<div class="component-grid">
|
|
<div class="component-panel"><p class="eyebrow">Interaction specimen / local only</p><h3>A useful bit of feedback</h3><p>Try the button and state selector. No workspace or agent is created.</p>
|
|
<label class="field" for="sample-title">Example project name<input id="sample-title" type="text" value="Summer reading notes" maxlength="160" aria-describedby="sample-help"></label>
|
|
<p id="sample-help" class="small">This field stays intact when you preview an error.</p>
|
|
<label class="field" for="sample-state">Component state<select id="sample-state"><option value="ready">Ready</option><option value="loading">Loading</option><option value="empty">Empty</option><option value="error">Error</option><option value="success">Success</option></select></label>
|
|
<div id="sample-feedback" class="feedback" role="status"></div>
|
|
<div class="button-row"><button id="sample-action" class="primary" type="button">Preview success</button><button type="button" class="secondary" disabled>Unavailable</button></div>
|
|
</div>
|
|
<div class="component-panel"><p class="eyebrow">Surface & status specimen</p><h3>Depth without a gradient</h3>
|
|
<div class="layer-sample"><span>Canvas</span><div><span>Surface</span><div>Raised surface <span class="sample-badge">Selected</span></div></div></div>
|
|
<ul class="status-list"><li class="success"><span data-icon="check"></span>Ready for review</li><li class="warning"><span data-icon="warning"></span>Needs your attention</li><li class="danger"><span data-icon="error"></span>Could not save. Try again.</li></ul>
|
|
<p class="small">8 px control corners, 16 px comparison panels, and a 4 px spacing scale. No animation is required to understand a state change.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="review" class="board-section review-section" aria-labelledby="review-title">
|
|
<div><p class="eyebrow">05 / Your review</p><h2 id="review-title">Choose a direction,<br>not a finished brand.</h2><p class="lead">My starting recommendation is Assembly, DM Sans, and Harbor.</p><p>The mark connects to the name, the font stays approachable, and blue gets room to be blue. Relay and Aperture offer less literal alternatives.</p></div>
|
|
<div class="review-panel"><h3>What I'd like your take on</h3><ol><li>Which mark feels like Mosaic, including at 16 px?</li><li>Which font feels best in controls and longer text?</li><li>Which palette should be the default? Try it in all three appearances.</li><li>What should feel different before we design the dashboards?</li></ol>
|
|
<label class="field" for="review-notes">Your notes<textarea id="review-notes" rows="4" placeholder="Try Relay with DM Sans. Harbor is close, but…"></textarea></label>
|
|
<p class="small">Notes stay in this browser if storage is available. Download a copy to keep them. Nothing is sent to Dewey.</p>
|
|
<button type="button" class="primary" id="download-review">Download review notes</button>
|
|
<p id="selection-summary" class="small"></p>
|
|
</div>
|
|
</section>
|
|
<footer><p>Local brand prototype · Not a live Mosaic Stack interface</p><p>Branding review comes next. The five dashboard designs have not been built.</p><a href="RESEARCH.md">Reference observations & inspection limits</a></footer>
|
|
</main>
|
|
</div>
|
|
<p id="announcement" class="sr-only" role="status" aria-live="polite"></p>
|
|
</body>
|
|
</html>
|