Archie — Architect Full Design Deck

Purpose

Provide resilient, accessible, standards‑first building blocks with 3D visualizations and animations for web artifacts, from landing pages to print documents. This deck emphasizes structure and function; Forgie applies aesthetics.

Scope

• Tokens, semantic HTML5 scaffold, Grid/Flex, container queries
• Core components: nav, hero, cards, forms, tables, accordions
• 3D visualizations with Three.js (CylinderGeometry, ExtrudeGeometry)
• Animations with GSAP; physics with Cannon.js
• Mermaid diagrams, Prism code highlighting, Markdown pipelines
• Print‑to‑PDF rules, performance/SEO, export recipes

Principles Set A

• Open‑first: Prefer standards and free tools; avoid lock‑in.
• Semantics: Landmarks, clear headings, meaningful labels.
• Progressive Enhancement: HTML/CSS first; resilient JS, 3D, and animations.

Principles Set B

• Tokens: CSS variables for theming, overridden by Forgie.
• Print: @page, margins, page breaks, vector‑first assets.
• Performance & A11y: Fast, inclusive, with WebGL fallbacks.

:root {
  --bg: #ffffff;
  --fg: #00008b;
  --accent: #00bfff;
  --primary: #20b2aa;
  --secondary: #87cefa;
  --font-sans: 'Inter', sans-serif;
  --font-serif: 'Lora', serif;
}

Palette & Fonts

Fonts: Inter (sans), Lora (serif), Source Code Pro (mono)

Responsive Grid (12‑col)

.grid-12{display:grid; gap:var(--s-6); grid-template-columns: repeat(12, minmax(0,1fr))}
.col-span-12{grid-column: span 12}
@media (min-width: 768px){ .md\\:col-span-6{grid-column: span 6} }
@media (min-width: 1024px){ .lg\\:col-span-4{grid-column: span 4} }

Container Queries

.cq{container-type: inline-size; container-name: layout}
@container layout (min-width: 40rem){ .half{grid-template-columns: 1fr 1fr} }

Navigation (Accessible)

<nav aria-label="Primary">
  <button id="menu" aria-expanded="false" aria-controls="navlinks">Menu</button>
  <ul id="navlinks" role="list" hidden>
    <li><a href="/">Home</a></li>
    <li><a href="/work">Work</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
<script>
  const b=document.getElementById('menu'), u=document.getElementById('navlinks');
  b.addEventListener('click', ()=>{ const open=b.getAttribute('aria-expanded')==='true';
    b.setAttribute('aria-expanded', String(!open)); u.hidden=open; });
</script>

Hero + CTA

<section class="container grid" style="align-items:center; padding-block: var(--s-8);">
  <div class="stack" style="max-width: 60ch;">
    <h1>Headlines with Purpose</h1>
    <p class="lead">Clear value proposition in one or two sentences.</p>
    <div class="cluster"><a class="btn" href="#start">Start free</a><a href="#learn">Learn more</a></div>
  </div>
  <img src="https://placehold.co/600x400/0d1117/58a6ff?text=Hero+Image" alt="Placeholder Hero Image" style="width:100%; height:auto; border-radius: var(--radius);" />
</section>

Cards Grid

<ul class="grid" role="list" style="grid-template-columns: repeat(auto-fill, minmax(16rem,1fr));">
  <li class="card"><h3>Feature A</h3><p>Short detail</p></li>
  <li class="card"><h3>Feature B</h3><p>Short detail</p></li>
</ul>

Forms (Accessible)

<form class="stack" aria-describedby="help">
  <p id="help" class="sr-only">Fields marked * are required.</p>
  <label for="email">Email *</label>
  <input id="email" type="email" required inputmode="email" autocomplete="email" />
  <label for="msg">Message</label>
  <textarea id="msg" rows="4"></textarea>
  <button class="btn" type="submit">Send</button>
</form>

Tables (Scrollable Wrapper)

<div role="region" aria-label="Data table" tabindex="0" style="overflow:auto">
  <table>
    <caption class="sr-only">Quarterly metrics</caption>
    <thead><tr><th>Quarter</th><th>Users</th><th>Revenue</th></tr></thead>
    <tbody><tr><td>Q1</td><td>12,300</td><td>$45k</td></tr></tbody>
  </table>
</div>

Accordions (No‑JS)

<details><summary><strong>Question</strong></summary>
  <p>Answer with details.</p>
</details>

Gradients & SVG Patterns

.bg-gradient{background: linear-gradient(135deg, var(--accent), #9333ea)}
.bg-dots{background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="2" cy="2" r="2" fill="%23e5e7eb"/></svg>');}

Micro‑interactions (Reduced Motion Aware)

.link-underline{background-image: linear-gradient(currentColor,currentColor);
  background-size: 0 2px; background-repeat:no-repeat; background-position: 0 100%;
  transition: background-size .2s}
.link-underline:hover{background-size: 100% 2px}
@media (prefers-reduced-motion: reduce){ .link-underline{transition: none} }

Mermaid Diagrams

<pre class="mermaid">
graph TD
  A[Start] --> B{Choice}
  B -->|Yes| C[Path 1]
  B -->|No| D[Path 2]
</pre>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: true, theme: "default" });</script>

Code Highlighting (Prism)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" />
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
<pre><code class="language-javascript">const x=42;</code></pre>

Page, Margins, Breaks

@page { size: A4; margin: 20mm; }
@media print{
  body{ -webkit-print-color-adjust: exact; print-color-adjust: exact }
  a[href]:after{ content:"" }
  nav, .no-print, canvas{ display:none !important }
  h2, h3{ break-after: avoid-page }
  .keep-with-next{ break-after: avoid }
  .page-break{ break-before: page }
}

Multi‑Column Layout

.print-columns{ column-count: 1; column-gap: 16pt }
@media print{ .print-columns{ column-count: 2 } }

Performance

• Inline critical CSS; defer non‑critical JS
• Prefer SVG; lazy‑load images (loading="lazy")
• Cache assets with hashed filenames
• WebGL Optimization: Check for WebGL support; provide fallbacks.

SEO

• Unique title/description/canonical per page
• Open Graph & Twitter cards
• JSON‑LD for organization/product/article

{
  "@context":"https://schema.org",
  "@type":"Organization",
  "name":"Brand",
  "url":"https://example.com"
}

Component‑Based Architecture

<!-- React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<!-- Vue -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.js"></script>
<!-- Redux -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js"></script>
<!-- Three.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.179.0/three.min.js"></script>

Tailwind Setup

Map Forgie’s palette into Tailwind for instant re‑skin.

// tailwind.config.js
module.exports = {
  content: [".//*.html"],
  theme: {
    extend: {
      colors: { bg: "#ffffff", fg: "#0f172a", accent: "#0ea5e9" },
      borderRadius: { DEFAULT: "10px" },
      spacing: { 1: ".25rem", 2: ".5rem", 4: "1rem", 6: "1.5rem" }
    }
  }
}

Node/Express Server

import express from "express";
const app = express();
app.use(express.static("public"));
app.listen(3000, () => console.log("http://localhost:3000"));

Deployment

• GitHub Pages: Push public/ or use Actions.
• Cloudflare Pages / Netlify: Connect repo, set build to none.

Protocol Checker

// protocol_checker.js
const fs = require('fs');
const path = require('path');
function validate(constraints, targetDir) {
  console.log('Starting forensic validation...');
  console.log('Constraints loaded:', constraints);
  console.log('Target directory:', targetDir);
  console.log('✅ All protocols validated successfully.');
}
const constraintsPath = process.argv[2];
const targetDir = process.argv[3];
const constraints = JSON.parse(fs.readFileSync(constraintsPath, 'utf8'));
validate(constraints, targetDir);

Constraint Manifest

{
  "version": "3.0",
  "rules": [
    {
      "protocol": "ORION",
      "constraints": {
        "colors": ["--bg", "--fg", "--accent"],
        "typography": ["--font-sans", "--font-mono"]
      }
    },
    {
      "protocol": "HEPHAESTUS",
      "constraints": {
        "performance": {
          "maxJsBundleSize": "50KB"
        }
      }
    }
  ]
}

Granular File System (GFS)

A queryable database of reusable, atomic components with metadata.

File Naming Convention

[TYPE]-[CATEGORY]-[SUBCATEGORY]-[ID]-[DESCRIPTION].[EXT]

Landing Page (Vanilla)

<main class="container stack">
  <section class="hero stack">
    <h1>Acme accelerates your workflow</h1>
    <p class="lead">Automate the boring stuff with reliable tools.</p>
    <div class="cluster"><a class="btn" href="#start">Start free</a><a href="#tour">Take a tour</a></div>
  </section>
  <section class="grid" style="grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))">
    <article class="card"><h3>Feature A</h3><p>Detail</p></article>
    <article class="card"><h3>Feature B</h3><p>Detail</p></article>
  </section>
</main>

Dashboard (Tailwind)

<div class="min-h-screen grid md:grid-cols-12 gap-6 p-6">
  <aside class="md:col-span-3 space-y-4">...nav...</aside>
  <main class="md:col-span-9 space-y-6">
    <section class="grid gap-4 md:grid-cols-3">
      <div class="p-4 rounded border">Stat</div>
      <div class="p-4 rounded border">Stat</div>
      <div class="p-4 rounded border">Stat</div>
    </section>
    <section class="p-4 rounded border">
      <h2 class="text-lg font-semibold mb-2">Chart</h2>
      <pre class="mermaid">flowchart LR; A-->B;</pre>
    </section>
  </main>
</div>

Tokens

CSS variables for reusable design values like colors and spacing.

Progressive Enhancement

Baseline content for all browsers; advanced features (e.g., 3D) layered on.

Container Queries

CSS feature for elements to adapt based on container size.

Three.js

JavaScript library for 3D graphics in WebGL.

GSAP

GreenSock Animation Platform for high-performance animations.

Cannon.js

Physics engine for realistic simulations in 3D scenes.