burncloud-design

name	burncloud-design
description	Use this skill to generate well-branded interfaces and assets for BurnCloud, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable	true

Read the README.md file within this skill, and explore the other available files.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.

Skill contents at a glance

• README.md — brand context, content fundamentals, visual foundations, iconography
• colors_and_type.css — single source of truth for --bc-* tokens (colors, type, spacing, radii, shadows, transitions). Always import this, never hardcode tokens.
• assets/logo.svg + logo.ico — the orange flame mark. Never recolor.
• preview/ — small HTML reference cards (one per token group); useful as visual specs.
• ui_kits/desktop/ — high-fidelity React recreation of the Dioxus admin client. Lift components and patterns from here for new designs.

Hard rules (from system.md red lines, do not violate)

1. Apple HIG only. No Material, no Fluent, no neumorphism, no glassmorphism cosplay. Whitespace + weight + spacing carry hierarchy — not borders, not shadows.
2. Always use tokens. No hardcoded hex / px / ms. Import colors_and_type.css and reference --bc-*.
3. No 2px borders. No colored left-border accents. Hairlines only (1px solid var(--bc-border)).
4. No emoji in product UI. Heroicons outline, 16/20/24, currentColor, stroke-2. Emoji are allowed in long-form docs only.
5. No illustration, no stock photography. The flame logo + aurora animated background are the entire imagery system.
6. Status colors are never used alone — always paired with a dot or icon.
7. Default card = radius-sm (8px) + shadow-sm + 1px hairline border. Apple-restrained, not Material-rounded.
8. One easing curve (cubic-bezier(0.25, 0.1, 0.25, 1)); never hand-write timing functions.