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 thegrcengclub/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-orangecircular 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.