Zetta v1.6

Components · Text & content

Code

Monospace code, inline or in a block. Inline code is a small Geist Mono run on a muted surface; a block adds a header with a language label and a copy control. Both sit on the same muted surface so code reads as distinct from prose without shouting.

Preview

Run npm run build to produce the static site.

bash 
npm install
npm run dev

Build with the skill

No package to install — hand this to your AI to generate or migrate the component in your stack.

Prompt for your AI 
Apply the Zetta "Code" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `code` spec (variants: inline, block, block-header) and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `code` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Anatomy & rules

Use the `fetchUser(id)` function to load the profile.
                                            ↑ code-inline

╭──────────────────────────────────────╮
│ TYPESCRIPT                     [copy]│  ← code-block-header
│──────────────────────────────────────│
│ const user = await fetchUser(id);    │  ← code-block
│ console.log(user.displayName);       │
╰──────────────────────────────────────╯
State Visual
Default Syntax-highlighted code block, {colors.surface-muted} background
Hover (with copy) Copy button becomes visible in top-right corner
Copied Copy button shows check icon, "Copied" tooltip for 2s
Inline {colors.surface-muted} background, inline with text

When to use

  • Token names, function names, CLI commands, file paths inside prose → inline code.
  • Sample code, config files, API responses → code block.

When not to use

  • Long single-line values that could wrap — prefer code block even for one line if it is > 60 chars.
  • Code-like styling for emphasis — use Bold or Italic in body text instead.

Do

  • Always include the language prop on code blocks — it helps screen readers and enables syntax highlighting.
  • Show a copy button on all code blocks containing runnable or pasteable content.

Don't

  • Don't use <pre> without <code> — screen readers need the semantic element.
  • Don't wrap inline code across line breaks.
  • Always specify the language for syntax highlighting.
  • Copy button aria-label: "Copy code".
  • After copy: aria-label changes to "Copied" for 2 seconds, then reverts.
  • Inline code: wrap in backticks in source. Max ~40 characters inline before using a block.
  • Block code: include a language label when the language is not obvious from context.

Keyboard

Key Behavior
Tab Move focus to the copy button (visible on hover/focus)
Enter / Space Copy the code block to clipboard

Accessibility

  • Inline: <code> element is sufficient — no additional ARIA needed.
  • Code block: <pre role="region" aria-label="Code snippet: [language]"> when the block is a significant standalone region.
  • Copy button: aria-label="Copy code", changes to aria-label="Copied" for 2 seconds after click.

Spec

Values and token references resolved straight from the Zetta spec.

code-inline
fontFamily
Geist Mono
fontSize
0.875em
fontWeight
400
backgroundColor
{colors.surface-muted}
borderColor
{colors.hairline}
borderWidth
1px
borderRadius
{rounded.sm}
paddingX
0.3em
paddingY
0.1em
textColor
{colors.ink}
display
inline
code-block
fontFamily
Geist Mono
fontSize
13px
fontWeight
400
lineHeight
1.60
backgroundColor
{colors.surface-muted}
borderColor
{colors.hairline}
borderWidth
1px
borderRadius
{rounded.base}
padding
{spacing.md}
textColor
{colors.ink}
overflowX
auto
display
block
code-block-header
display
flex
alignItems
center
justifyContent
space-between
paddingX
{spacing.md}
paddingY
{spacing.xs}
borderBottom
1px solid {colors.hairline}
backgroundColor
{colors.surface-pressed}
code-block-lang
fontFamily
Geist
fontSize
11px
fontWeight
500
textColor
{colors.muted}
textTransform
uppercase
letterSpacing
0.06em
code-block-copy
iconSize
{icons.sizeMap.sm}
iconColor
{colors.muted}
cursor
pointer
borderRadius
{rounded.sm}
padding
4px
code-block-copy-hover
iconColor
{colors.ink}
backgroundColor
{colors.surface-muted}