Files
agent-skills/skills/hallmark/references/components/n2-floating-chip.md
T
MalinandClaude Sonnet 5 65c01ddb43 feat: add hallmark design skill
Anti-AI-slop design skill (greenfield pages, audits, redesigns, design
extraction from URLs/screenshots) -- installed and validated in an
earlier session, was sitting untracked. Full reference library:
components, macrostructures, themes, genres, verbs (audit/redesign).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-15 14:29:38 +02:00

617 B

N2 · Floating chip

A small fixed chip in a corner — wordmark + a single action ("Try it"). Doesn't sit in document flow. Use when: the page is fold-heavy and traditional nav would fight the content. Don't confuse with: C4 Sticky bottom bar (which is full-width).

<aside class="nav-chip">
  <a class="wordmark">Studio</a>
  <a class="cta-outline">Try →</a>
</aside>
.nav-chip { position: fixed; top: var(--space-md); right: var(--space-md); display: inline-flex; gap: var(--space-md); padding: 0.5rem 0.75rem; background: var(--color-paper); border: 1px solid var(--color-rule); }