Style guide · v2.0 final · July 2026 · component library
Warm header bands, white content, one orange accent, Space Grotesk headings, big rounded cards. Every component below is live - hover, focus, and click things. Pages are compositions of these blocks; see globalai-styleguide.md §7 for which components go on which page.
Free events, talks, and workshops run by AI developers, for AI developers - in your city and online.
Cream band ends with the hero; content is white. Cream returns as inset bands and callouts. Every page ends with a dark slab + footer.
The nav sits on solid cream (never white): a 34px logo left, bold Space Grotesk links centered with an orange-tint pill gliding behind them, and a graphic avatar log-in + Sign up on the right. Click Events or Chapters to open the floating rounded ink dropdown (link columns + a featured tile) with the page dimming behind - the full pattern lives in gac-nav-sample.html. Announcement pill above the headline. Count-up stats with tabular figures. The marquee is the only looping motion - it pauses on hover.
Cream = header bands and callouts; content is white. Orange once per viewport. Blue comes from the logo. Green means "live", nothing else. Deep blue #1e224e lives only inside the logo.
/Events/AgentCon World Tour/London
Space Grotesk (300–700) for headings, eyebrows, stats, dates - with "tnum" wherever digits align. Instrument Sans for body and UI. Both free on Google Fonts.
Every button is a pill. One primary per viewport, max two buttons side by side. Disabled = cream fill, muted text, cursor: not-allowed. On ink slabs the secondary switches to a cream outline; orange stays the CTA color.
Chips label format, region, and status - orange tint or blue tint, green only for live, muted for ended. The announcement pill (max one per page) is the playful element. Social pills are text, not icon buttons - border warms to orange on hover.
Inputs: white, 14px radius, focus = orange border + 3px tint ring; errors say what to do, in plain language. Selects get a custom ink chevron (native arrow off). Autocomplete opens a white suggestion card - matched letters bold, active row cream. Toggles are orange pills with a sliding knob; checkboxes fill orange with a ✓, radios get an orange dot. The filter bar (18px radius) sits in the cream header band; search and selects are pills, active filters are removable chips.
One card skeleton, four content types: event (1:1 event image at 72px, date eyebrow, format chip, count), video (16:9 thumb, duration pill), chapter (region chip + members), news issue (issue eyebrow + read time). Same component everywhere it appears - variants via modifiers, never copies. Card groups on white sit in a cream inset band, as shown.
The horizontal spotlight card - a chapter's next event, the next tour stop, the homepage's featured event. Anchored by the event's 1:1 image (110px, radius 18). The date is the orange eyebrow; the title stays ink. The blue chip names the event calendar (a series like AgentCon) - never a partner or sponsor. The cream date-block tile survives only as a fallback for events without an image.
For dense lists: past events, series stops, "more in this series". Rows highlight cream on hover, arrow shifts right. Cap visible rows and close with an "All N →" link - no mid-page pagination.
A for smaller events: one cream band, plain rows; parallel slots become inline track cards. B for conferences (up to ~6 rooms): rooms are columns, grid rows are 5-minute slots, so sessions span exactly their duration - 25-minute talks and 55-minute workshops coexist. Keynotes get the warm-cream card. The room pills switch between the full grid and a per-room list (the mobile default; the grid also scrolls horizontally). Data comes straight from the Sessionize API (sessions, speakers, rooms) - shown here: the AgentCon Silicon Valley morning.
Andreas Kollegger
Director of GenAI, Neo4j
Dana Fine (moderator) - Qodo
Speaker cards lead with the talk title - that's what people scan. Panels get the warm-cream card with panelists as chips. Organizers use the centered people card. Initials avatars alternate blue/orange tints until real photos exist.
Free · 312 going · limited seats
1,170 members
Sticky 340px column on detail pages (static and stacked under 900px). Action card first - full-width primary, detail rows with orange dots, stylized map with Google/Apple/Waze links. Supporting cards (chapter, social) sit on cream.
Speakers and the full agenda are being confirmed. Register now and we'll email you when they're live.
Notices carry date changes and announcements - warm cream, orange dot, bold lead. Empty states never hide a section: dashed border, bold lead, one sentence of what's coming. Checklists always use green ✓ on a cream band.
Silicon Valley
Silicon Valley
Silicon Valley
Silicon Valley
Silicon ValleyPhotos: 4:3 tiles at 18px radius for grids; the photo river uses real photos from event reports (205px tall on the homepage) with uppercase location chips - photos are the proof the community is real, never stock or AI-generated. Sponsor logos: white cards on detail pages; on the homepage the "We work with" scroller - plain logos, grayscale until hover, masked edges. Loop budget: looping strips (marquee, logo scroller, photo river) pause on hover, disable under reduced motion, max two per page, never adjacent. Embed each asset once and clone the track at runtime.
Every chapter began with one developer who raised a hand. We'll help with the rest.
Every page ends with an ink slab whose CTA is that page's next step - register, start a chapter, find the next event, subscribe. Never generic marketing. The footer is the same ink slab with top corners rounded.
| The Global AI Community connects AI communities worldwide so they can share ideas. | 206,049 developers. 203 chapters. One community. |
| View our upcoming events | Find your next event → |
| Subscribe to our newsletter | AI moves fast. We read everything so you don't have to. |
| Join our Discord server | The hallway track never ends. Join the Discord. |
Developer-to-developer, playful-confident, zero filler. Numbers as digits, CTAs say what happens, always "the community" - never "the platform".
One nav, three states. Signed out: 34px logo left, bold Space Grotesk links centered with the gliding orange pill, avatar log-in + one Sign up pill. Signed in: the avatar becomes the member's profile picture with an account dropdown; Sign up disappears; a messages button carries the unread count. Member area (gac-my-sample.html): the same standard nav is used everywhere, with a sticky white submenu directly beneath it - Space Grotesk items with icons, an orange underline on the active item, unread counts, and optional right-aligned items like Settings. Item workspaces (above): back button + item title + status chips, then the item's sections as underline header tabs - the submenu tells you where you are in My Community, the tabs where you are in the item. The marketing bar is fluid full-width (28px edge padding) while page content stays in the 1140px container.
The dotted world map: land rasterized to ~2,400 dots in logo blue on cream, Web Mercator projection (74°N–56°S), pins at real lat/lon with pulsing halos and tooltips - no external map tiles. Three sizes: hero (fills the /chapters header band, one pin per chapter), section (/events, "Happening around the world" with date labels), and the small tile shown here (homepage chapters teaser, a few pins, no labels). One map per page maximum; the orbiting globe is reserved for the About page and never shares a page with a map. Formulas in globalai-styleguide.md §6.
The complete handoff: globalai-styleguide.md (the spec, incl. §13 locked decisions) + nine reference pages - home, events, event detail, chapters, chapter detail, weekly, navigation, My Community, and edit event. Hand the whole folder to the coding agent.
