The open-source brand kit for GRC Engineering Club. Colors, type, logos, slide templates, UI kits, and an agent skill — everything you need to make anything in-brand: a conference deck, a sponsor page, a LinkedIn carousel, a merch concept, a landing page for a partnership, a meetup poster.
Not just a book club. A movement. From checkbox GRC to engineered systems.
If you're a Club member and you're building something that should look like it's part of the Club, start here.
| BRAND.md | Brand bible — voice, palette, type, layout, iconography rules |
| colors_and_type.css | Drop-in CSS variables and semantic type rules |
| fonts/ | Vendored Inter woff2 (weights 400–900) — no Google Fonts dependency |
| assets/ | Logo, orange brand mark, leadership headshots, merch product shots |
| preview/ | Reference cards — palette, type, components, icons |
| slides/ | 12 ready-to-edit slide templates in a <deck-stage> shell |
| ui_kits/website/ | Marketing-site component recreation |
| ui_kits/certplatform/ | Academy / cert platform component recreation |
| source_decks/ | Original Academy .pptx decks (reference content) |
| SKILL.md | Claude Code / Claude Agent SDK manifest |
| PUBLISHING.md | Step-by-step: install as a skill, publish to your audience |
- Slides & decks. Open slides/index.html in a browser, duplicate the template, swap the copy. 12 layouts — title, section, stat, quote, code, comparison, closer, and more.
- LinkedIn carousels & graphics. The palette, type, and Lucide icons give you a consistent visual language. Use the brand mark sparingly as a cover graphic.
- Landing pages. Grab colors_and_type.css, drop it into your page, compose with the patterns from ui_kits/website/.
- Merch concepts. Check assets/merch/ for the existing product shots and brand voice in BRAND.md before mocking anything new.
- Meetup & conference assets. Speaker slides, sponsor pages, event posters — same kit.
- Agent-assisted design. Install as a Claude Code skill (see PUBLISHING.md) and ask Claude to build something in-brand for you.
git clone https://github.com/GRCEngClub/designsystem.git
cd designsystem
open preview/colors-brand.html # see the palette
open slides/index.html # see the slide templatesRead BRAND.md to internalize the rules — one accent color (orange), dark-mode only, Inter heavy weights, Lucide icons, builder-energy voice.
From any repo you want Claude to design for:
mkdir -p .claude/skills/grc-engineering-club-design
cd .claude/skills/grc-engineering-club-design
git clone https://github.com/GRCEngClub/designsystem.git .Then in Claude Code:
"Use the grc-engineering-club-design skill to build a landing page for a Wiz partnership."
The full skill install flow is in PUBLISHING.md.
<link rel="stylesheet" href="https://raw.githubusercontent.com/GRCEngClub/designsystem/main/colors_and_type.css" />(For production, vendor the CSS and fonts — don't hot-link.)
- One accent color: orange
#E8650A. Never blues, greens, rainbow gradients, or off-brand accents. - Dark mode only. Page
#0D0D0D, alt section#1A1A1A, cards#2A2A2A. Alternate page/alt per section for vertical rhythm. - Inter, heavy weights. Display H1 =
font-black(900). Section H2 =font-extrabold(800). Eyebrows = uppercasefont-boldorange. - Lucide icons only. Default stroke. Orange well for emphasis:
rounded-full bg-orange/10 text-orange. No emoji. - Card recipe.
bg-[#2A2A2A] rounded-xl p-6 border-[#3A3A3A] hover:border-orange/50. No drop shadows on cards — shadows only on CTAs (warm orange glow). - Voice. Direct, imperative, second-person. "Stop scrolling, start engineering." "Pick your path. Start building today." Never vendor-speak.
Full detail in BRAND.md.
Members — we'd love your additions. Some things that'd be awesome:
- New slide templates (added to
slides/) - Additional UI kit recreations for surfaces we don't cover yet
- Social-image templates (LinkedIn carousel, Twitter/X card, YouTube thumbnail)
- Translated voice examples in other languages
- Corrections to BRAND.md when we get something wrong
See CONTRIBUTING.md for how to propose changes.
MIT — use it, remix it, ship it. See LICENSE.
The GRC Engineering Club name, wordmark, logo, and brand mark are trademarks of GRC Engineering Club, Inc. The license covers the tokens, fonts, code, and templates — not the marks themselves. If you're making something that isn't officially from the Club, please don't imply that it is.
Built by the Club, for the Club. If you made something great with this, share it in the community — we want to see it.