Swiss International

<div class="grid grid-cols-1 sm:grid-cols-3 gap-0" style="border: 2px solid var(--color-border);">
				@swissSwatch("Red", "#e63329", "#fff")
				@swissSwatch("Black", "#1a1a1a", "#fff")
				@swissSwatch("White", "#ffffff", "#1a1a1a")
			</div>

<div x-data="{ size: 1 }" class="swiss-rule pt-8 mt-8">
				<div class="flex items-center gap-6 mb-6 flex-wrap">
					<span class="swiss-label">Scale Factor</span>
					<input type="range" min="0.5" max="3" step="0.1" x-model="size" class="w-48 cursor-pointer"/>
					<span class="swiss-label font-mono" x-text="parseFloat(size).toFixed(1) + 'x'">1.0x</span>
				</div>
				<p
					class="font-bold leading-none"
					style="font-family: var(--font-display); color: var(--color-secondary);"
					{ templ.Attributes{":style": "'font-size: calc(var(--font-size-display) * ' + size + ')'"}... }
				>Helvetica Neue</p>
				<p class="swiss-label mt-4" x-text="'Computed: calc(5rem × ' + parseFloat(size).toFixed(1) + ')'"></p>
			</div>

@swissArticleCard("Design Systems", "Grid as Foundation", "The grid is not a cage — it is a liberation from chaos. When elements align to a common module, the eye can rest and the mind can read. Structure is the invisible architecture of good design.")
			@swissArticleCard("Typography", "Weight Creates Hierarchy", "Bold speaks first. Regular speaks second. Light speaks last. Weight is not decoration — it is the sequence in which information is consumed. Hierarchy is direction.")
			@swissArticleCard("Color", "Red as Signal", "In Swiss design, red is never decoration. It is a signal: stop, look, this matters. Black carries the content. White gives it room to breathe. Red marks what cannot be ignored.")

<form
				hx-post="/guides/swiss/demo-form"
				hx-target="#swiss-form-response"
				hx-swap="innerHTML"
				class="space-y-6"
			>
				<div>
					<label class="block swiss-label mb-2" for="swiss-name">Name</label>
					<input id="swiss-name" name="name" type="text" placeholder="Your name" class="swiss-input"/>
				</div>
				<div>
					<label class="block swiss-label mb-2" for="swiss-email">Email</label>
					<input id="swiss-email" name="email" type="email" placeholder="your@email.com" class="swiss-input"/>
				</div>
				<div>
					<label class="block swiss-label mb-2" for="swiss-role">Role</label>
					<select id="swiss-role" name="role" class="swiss-input cursor-pointer">
						<option value="">— Select role —</option>
						<option value="designer">Designer</option>
						<option value="developer">Developer</option>
						<option value="director">Art Director</option>
					</select>
				</div>
				<div class="flex items-center gap-3">
					<input type="checkbox" id="swiss-grid" name="grid" class="w-4 h-4 cursor-pointer" style="accent-color: var(--color-primary);"/>
					<label for="swiss-grid" class="swiss-label cursor-pointer">I believe in the grid</label>
				</div>
				<!-- Radio buttons -->
				<div>
					<p class="swiss-label mb-3">Preferred Era</p>
					<div class="space-y-2">
						<label class="flex items-center gap-3 cursor-pointer" style="font-size: 0.875rem;">
							<input type="radio" name="era" value="1950s" class="w-4 h-4 cursor-pointer" style="accent-color: var(--color-primary);"/>
							1950s — Basel School
						</label>
						<label class="flex items-center gap-3 cursor-pointer" style="font-size: 0.875rem;">
							<input type="radio" name="era" value="1960s" checked class="w-4 h-4 cursor-pointer" style="accent-color: var(--color-primary);"/>
							1960s — International Style
						</label>
						<label class="flex items-center gap-3 cursor-pointer" style="font-size: 0.875rem;">
							<input type="radio" name="era" value="1970s" class="w-4 h-4 cursor-pointer" style="accent-color: var(--color-primary);"/>
							1970s — Post-Modernist Reaction
						</label>
					</div>
				</div>
				<div class="swiss-rule pt-4">
					<button type="submit" class="swiss-btn text-sm">Submit via HTMX</button>
				</div>
			</form>

<div>
				<input
					type="text"
					name="q"
					placeholder="Filter articles..."
					class="swiss-input mb-4"
					hx-get="/guides/swiss/search"
					hx-target="#swiss-search-results"
					hx-swap="innerHTML"
					hx-trigger="input changed delay:300ms, search"
				/>
				<div id="swiss-search-results">
					@swissArticleCard("Design Systems", "Grid as Foundation", "The grid is not a cage — it is a liberation from chaos.")
					@swissArticleCard("Typography", "Weight Creates Hierarchy", "Bold speaks first. Regular speaks second. Light speaks last.")
					@swissArticleCard("Color", "Red as Signal", "In Swiss design, red is never decoration. It is a signal.")
				</div>
			</div>