Read the README.md file within this skill, and explore the other available files:
colors_and_type.css — drop-in CSS variables (--grc-orange, --grc-dark, --grc-gray, --fg-1, --fg-3, …) and semantic type rules (h1, h2, .eyebrow, .lede, etc). References ./fonts/ for local Inter.fonts/ — vendored Inter woff2 files (weights 400, 500, 600, 700, 800, 900). No Google Fonts dependency.assets/ — the logo, orange brand mark, leadership headshots, and merch product shots. Copy these into your artifact; do not recreate them.preview/ — reference cards for colors, type, spacing, components, and iconography. Open any of these to see the system applied.slides/ — 12 brand-ready slide templates (Title, Section, Problem, Approach, Stat, Quote, Certification, Roadmap, Code, Comparison, Pillars, Closer). Built on <deck-stage> at 1920×1080. Copy + adapt for new decks.ui_kits/website/ — full marketing-site recreation (Home, Academy, Stories, Join, FAQ) as JSX components.ui_kits/certplatform/ — Academy cert-platform recreation (Dashboard, Course, Lesson player, Labs, Exam readiness).PUBLISHING.md — how to install as a Claude Code skill against the grcengclub/ repo, and how to publish to the club.
If creating visual artifacts (slides, mocks, throwaway prototypes, landing pages, social images, etc), copy assets out of assets/ and reference them with relative paths. Build static HTML files for the user to view. Use Inter from Google Fonts and Lucide icons via CDN — both are already referenced in colors_and_type.css / the UI kit.
If working on production code, copy the tokens from colors_and_type.css into the target project's own token system and read the rules in README.md to become an expert in designing with this brand.
Core brand rules — do not violate
- One accent color only: orange
#E8650A. No bluish-purple gradients. No multi-color palettes. Orange lives on CTAs, link text, eyebrows, icons, and accent spans like <span class="text-brand-orange">Club</span>.
- Dark mode only. Page
#0D0D0D, alt section #1A1A1A, cards #2A2A2A. Sections alternate page / alt for vertical rhythm.
- Typography is Inter, heavy weights for display (800/900). Display headlines use
tracking-tight. Eyebrows are UPPERCASE orange with wide tracking.
- Iconography is Lucide line icons at default stroke. When emphasized, they sit in a
rounded-full bg-orange/10 text-orange circular well. No emoji, ever.
- Card recipe:
bg-[#2A2A2A] + border border-[#3A3A3A] + rounded-xl + p-6 + hover:border-orange/50. No drop shadows on cards; shadows only on primary CTAs (a warm orange glow).
- Voice is builder-energy: direct, imperative, second-person. "Stop scrolling, start engineering." "From checkbox GRC to engineered systems." "Not just a book club. A movement." Never vendor-speak.
If the user invokes this skill without any other guidance, ask them what they want to build or design (deck, landing page, social, Academy surface, merch concept?), ask a few scoping questions (audience, length, variants desired, tone tweaks), and act as an expert designer who outputs HTML artifacts — or production code — depending on the need.
1---2name: grc-engineering-club-design3description: Use this skill to generate well-branded interfaces and assets for GRC Engineering Club, either for production or throwaway prototypes/mocks/decks. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping the website, Academy, slides, social, and merch concepts.4---56Read the `README.md` file within this skill, and explore the other available files:78- `colors_and_type.css` — drop-in CSS variables (`--grc-orange`, `--grc-dark`, `--grc-gray`, `--fg-1`, `--fg-3`, …) and semantic type rules (`h1`, `h2`, `.eyebrow`, `.lede`, etc). References `./fonts/` for local Inter.9- `fonts/` — vendored Inter woff2 files (weights 400, 500, 600, 700, 800, 900). No Google Fonts dependency.10- `assets/` — the logo, orange brand mark, leadership headshots, and merch product shots. Copy these into your artifact; do not recreate them.11- `preview/` — reference cards for colors, type, spacing, components, and iconography. Open any of these to see the system applied.12- `slides/` — **12 brand-ready slide templates** (Title, Section, Problem, Approach, Stat, Quote, Certification, Roadmap, Code, Comparison, Pillars, Closer). Built on `<deck-stage>` at 1920×1080. Copy + adapt for new decks.13- `ui_kits/website/` — full marketing-site recreation (Home, Academy, Stories, Join, FAQ) as JSX components.14- `ui_kits/certplatform/` — Academy cert-platform recreation (Dashboard, Course, Lesson player, Labs, Exam readiness).15- `PUBLISHING.md` — how to install as a Claude Code skill against the `grcengclub/` repo, and how to publish to the club.1617If creating visual artifacts (slides, mocks, throwaway prototypes, landing pages, social images, etc), **copy assets out of `assets/` and reference them with relative paths**. Build static HTML files for the user to view. Use Inter from Google Fonts and Lucide icons via CDN — both are already referenced in `colors_and_type.css` / the UI kit.1819If working on production code, copy the tokens from `colors_and_type.css` into the target project's own token system and read the rules in `README.md` to become an expert in designing with this brand.2021### Core brand rules — do not violate2223- **One accent color only: orange `#E8650A`.** No bluish-purple gradients. No multi-color palettes. Orange lives on CTAs, link text, eyebrows, icons, and accent spans like `<span class="text-brand-orange">Club</span>`.24- **Dark mode only.** Page `#0D0D0D`, alt section `#1A1A1A`, cards `#2A2A2A`. Sections alternate page / alt for vertical rhythm.25- **Typography is Inter, heavy weights for display** (800/900). Display headlines use `tracking-tight`. Eyebrows are UPPERCASE orange with wide tracking.26- **Iconography is Lucide line icons** at default stroke. When emphasized, they sit in a `rounded-full bg-orange/10 text-orange` circular well. **No emoji, ever.**27- **Card recipe:** `bg-[#2A2A2A]` + `border border-[#3A3A3A]` + `rounded-xl` + `p-6` + `hover:border-orange/50`. No drop shadows on cards; shadows only on primary CTAs (a warm orange glow).28- **Voice is builder-energy:** direct, imperative, second-person. "Stop scrolling, start engineering." "From checkbox GRC to engineered systems." "Not just a book club. A movement." Never vendor-speak.2930If the user invokes this skill without any other guidance, ask them what they want to build or design (deck, landing page, social, Academy surface, merch concept?), ask a few scoping questions (audience, length, variants desired, tone tweaks), and act as an expert designer who outputs HTML artifacts — or production code — depending on the need.
grcengclub