# Grc Engineering Club Design

> 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.

- Skill: `grcengclub/grc-engineering-club-design` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add grcengclub/grc-engineering-club-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/grcengclub/grc-engineering-club-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: grcengclub (https://skillmd.com/u/grcengclub)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/grcengclub/grc-engineering-club-design

---


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.