Brand & Design System
A friendly, casual group connecting tech enthusiasts, developers, designers, innovators, and curious minds. This is the canonical, living style guide — every specimen renders from the live design tokens, so it can never drift.
Every chip below is read live from globals.css
via getComputedStyle — no hex is hardcoded here.
KCTE ships light-only; use the toggle (top-right) to preview the authored dark token set.
Sans · Inter · --font-sans
The quick brown fox
Sphinx of black quartz, judge my vow. Body copy, UI labels, controls.
Display · Poppins · --font-display
The quick brown fox
Pack my box with five dozen liquor jugs. Headings, eyebrows, tags.
Elegant · Playfair Display · --font-elegant
The quick brown fox
How vexingly quick daft zebras jump. Editorial accents, pull quotes.
Heading scale (font-display)
Text elements
Lead — a slightly larger intro paragraph that opens a section.
Body — the default paragraph. It uses Inter at a comfortable measure with
relaxed line-height. Inline elements include a
link,
an inline code sample,
and bold emphasis.
Small — captions, metadata, helper text.
“Community is built one conversation at a time.”
.prose block (proves the --tw-prose-* mapping)
This block is rendered with Tailwind Typography’s .prose class.
Its colors map onto the semantic tokens, so headings, body, links, and
borders all track the active theme — toggle dark and the prose follows.
A quote inside prose, bordered by the secondary token.
The Tailwind spacing scale (used for gap, padding, and margin).
1 0.25rem 2 0.5rem 3 0.75rem 4 1rem 6 1.5rem 8 2rem 12 3rem 16 4rem
Derived from the base --radius token.
sm md lg xl full sm md lg xl Every KCTE component, with its variants and states.
primary secondary action outline ghost outline-light ghost-light
Focus: every button shows a 2px ring-primary-500
with offset on :focus-visible (tab to a button to preview).
action is reserved for the Meetup / “act now” CTA;
*-light variants are for dark / gradient backgrounds.
Heads up
The August hack night moved to the new downtown space.You are in
Your RSVP for the React workshop is confirmed.Almost full
Only a few seats left — grab one before Friday.Something went wrong
We could not save your topic. Please try again.Sizes (blue)
Variants
The base white card: rounded-xl, shadow-lg, faint border. Lifts to shadow-xl on hover. Compose any content inside.
Hands-on session on composition, hooks, and state — bring a laptop.
The open-source website for the group — Astro, Tailwind, and Convex.
What we do
The eyebrow + title + sub-copy block that leads a content section.
Kansas City Tech Enthusiasts
Full-width animated gradient band. Heading, sub-copy, and actions go in the slot.
A compact animated gradient call-to-action band for the foot of a page.
KCTE uses Lucide (@lucide/astro)
with named imports only — one icon set, no mixing. Default size 24px, 2px stroke.
Calendar Users Code Rocket Sparkles MapPin MessageCircle Heart Zap Coffee Lightbulb Palette On light
On dark
Logo usage
Don’t stretch, recolor, or redraw the skyline-heart mark. Keep clear space around the lockup, and always use the supplied transparent or on-dark asset rather than re-creating it.prefers-reduced-motion: reduce.