$npx -y skills add ashmoonori-afk/BurnGuard --skill nord --agent claude-code
Installs into .claude/skills of the current project.
Are you the author of Nord?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/ashmoonori-afk-nord-burnguard)
---
name: builtin-nord-design
description: Use this bundled Nord theme to create token-driven interfaces and visual artifacts.
user-invocable: true
---
Read README.md first, then use colors_and_type.css as the single source of truth.
## Quick reference
- Reference color, type, spacing, radius, elevation, and motion tokens by CSS variable name.
- Preserve the paired foreground tokens whenever a semantic background is used.
- Use the local display/body/mono fonts specified in README.md and colors_and_type.css. Reference shared local fonts while working; include required font files and licenses on export. No CDN.
- Keep components coherent with the theme's shape and contrast rather than adding unrelated decoration.
## Local typography
- Display: Space Grotesk; body: DM Sans; numbers/code: IBM Plex Mono with tabular numerals. Korean fallback: Pretendard; finish with generic serif/sans-serif/monospace.
- Body 16–18px, line-height 1.6; supporting copy at least 14px/1.5. Headings 32–64px responsive, line-height 1.15 (Korean 1.3); allow wrapping and 200% zoom without clipping.
- Keep readable contrast (4.5:1 body, 3:1 large text), visible focus, and avoid ultra-light text. Use only supplied weights.
- Reference the shared local font stylesheet while working in BurnGuard; export packages include the required font files and licenses. No CDN, external font import, or system-only replacement. Preserve supplied brand fonts.
## Required layout
Read Navigation, Hero, Footer, Layout and Responsive in README.md before arranging content. Apply the named region patterns and every corresponding --layout-* value; use family tokens for the body. Preserve the theme identity and supplied art. Direction variants may change emphasis but retain these regions unless the user overrides them. Check wide and narrow rendering and 200% zoom.
## Navigation
Follow README.md's Navigation section and the corresponding --layout-* tokens. Use top navigation with a 1180px maximum width and 88px header height. At compact widths, use brand plus close control and stacked product/service disclosures. Stack columns and move featured content below links.
Reference: https://www.navbar.gallery/navbar/chesapeake-plywood
## Hero
Follow README.md's Hero section and the corresponding --layout-* tokens. Place a restrained introduction above a useful three-part feature baseline and a large crisp product panel; keep the footer spare and ledger-like. Retain the theme's existing image-fit, palette, font family and locally generated art unless a written theme invariant requires a more protective framing.
Reference: https://supahero.io/hero/zed
## Footer
Follow README.md's Footer section and the corresponding --layout-* tokens. Reserve 460px as the desktop minimum closing height with 3 information columns or groups. Use whitespace and a vertically organized address ledger rather than many equal navigation columns. Give contact details readable minimum type sizes.
Reference: https://www.footer.design/sites/esr
## Surfaces
Pick the surface that matches the deliverable and declare its tokens in the authored CSS: `surfaces/website.css` (`--web-*`) for pages, `surfaces/slides.css` (`--slide-*`) for 1920x1080 decks, `surfaces/content.css` (`--content-*`) for fixed artboards. `README.md` carries the composition rules under `## Slide deck` and `## Content artboards`; never carry a website grid, navigation bar or reading measure into a fixed frame.
