BRAND
GUIDELINES
Brand Story
Prompt in Progress is an AI ecosystem builder uniting builders, creators, and innovators across Hong Kong and the Greater Bay Area. Born from the team behind AI Tinkerers Hong Kong, we evolved from a technical meetup into a broader ecosystem that bridges AI knowledge across all audiences.
Our name reflects our philosophy: every interaction with AI is a prompt, and we are perpetually in progress - embracing the journey of learning, building, and growing together.
mission
To foster a thriving AI ecosystem in Hong Kong and the Greater Bay Area through curated events, education, and genuine community connections.
tagline
Don't prompt alone. Join us, and let's prompt together with purpose.
brand name
PROMPT IN PROGRESS(emphasis)續(traditional)
Prompt in Progress(actual name)续(simplified)
Short Description
Used for meta descriptions, social cards, directory listings, and quick introductions.
EN: A collective of builders, creators, and innovators across Hong Kong and the Greater Bay Area - the team behind AI Tinkerers Hong Kong, fostering an AI ecosystem through curated events and community building.
TC: 一個由建設者、創造者和創新者組成的集體，遍佈香港及大灣區 - AI Tinkerers Hong Kong 的幕後團隊，通過精心策劃的活動和社區建設，培育人工智能生態系統。
SC: 一个由建设者、创造者和创新者组成的集体，遍布香港及大湾区 - AI Tinkerers Hong Kong 的幕后团队，通过精心策划的活动和社区建设，培育人工智能生态系统。
Long Description
Used for about pages, partner decks, press kits, and detailed introductions.
EN: Prompt in Progress is an AI ecosystem builder uniting builders, creators, and innovators across Hong Kong and the Greater Bay Area. Born from the team behind AI Tinkerers Hong Kong - a curated community of technical professionals spanning a global network of 223+ cities and 100K+ builders - we evolved from a technical meetup into a broader ecosystem that bridges AI knowledge across all audiences.
We host monthly events including demo-focused meetups, networking nights, hackathons, and hands-on workshops that prioritize functional innovation over theory - live code over pitch decks. Beyond technical events, we drive education through empathetic learning experiences and community building that values relationships over transactions.
Our name reflects our philosophy: every interaction with AI is a prompt, and we are perpetually in progress - embracing the journey of learning, building, and growing together across the region.
TC: Prompt in Progress 是一個人工智能生態建設者，凝聚香港及大灣區的建設者、創造者和創新者。我們源自 AI Tinkerers Hong Kong 團隊，該社群是一個精選的技術專業人士社群，覆蓋全球 223+ 個城市及超過 10 萬名開發者。我們從技術聚會演進為更廣泛的生態系統，致力於為所有受眾搭建 AI 知識的橋樑。我們每月舉辦展示為主的聚會、社交之夜、黑客松和實作工作坊，推崇實踐創新多於理論 - 展示可運行的程式碼多於演示簡報。在技術活動之外，我們通過共情式學習體驗推動教育，並建立重視關係多於交易的社群。我們的名字反映我們的理念：每一次與 AI 的互動都是一個提示（prompt），而我們永遠在進步（in progress）的旅程中。
SC: Prompt in Progress 是一个人工智能生态建设者，凝聚香港及大湾区的建设者、创造者和创新者。我们源自 AI Tinkerers Hong Kong 团队，该社群是一个精选的技术专业人士社群，覆盖全球 223+ 个城市及超过 10 万名开发者。我们从技术聚会演进为更广泛的生态系统，致力于为所有受众搭建 AI 知识的桥梁。我们每月举办展示为主的聚会、社交之夜、黑客松和实作工作坊，推崇实践创新多于理论 - 展示可运行的程式码多于演示简报。在技术活动之外，我们通过共情式学习体验推动教育，并建立重视关系多于交易的社群。我们的名字反映我们的理念：每一次与 AI 的互动都是一个提示（prompt），而我们永远在进步（in progress）的旅程中。
Logo
The primary logo consists of the wordmark "PROMPT IN PROGRESS" set in Bebas Neue, with the underscore cursor as a signature element. The lettering is specially arranged and cannot be replicated - always use the provided .png assets.
Line Logo (PNG)
Horizontal wordmark on a single line - ideal for nav bars, headers, and compact spaces. Use the provided PNG assets.
Logo Usage Guidelines
- Always maintain clear space around the logo equal to the height of the "P" in PROMPT
- Do not stretch, compress, or rotate the logo
- Do not change the logo colors
- On dark backgrounds, use Logo_Light (solid) or Logo_Light_Transparent
- On light backgrounds, use Logo_Dark (solid) or Logo_Dark_Transparent
- Use transparent variants when placing over photos or gradient backgrounds
- Use solid-background variants when the background is a solid color matching the logo bg
- Minimum size: 120px width for digital, 1.5 inches for print
Colors
Our palette is anchored in deep navy with a signature teal accent. Colors should never be altered or replaced.
#0D0E2B
Primary background. Used for all slide/page backgrounds.
#1E2050
Card and surface backgrounds. Provides depth.
#00C2C7
Primary accent. Used for highlights, links, and key UI elements.
#B4B6C8
Body text and secondary content. Use at 60% opacity for subdued text.
#FFFFFF
Headings and primary text on dark backgrounds.
Color Application
| Element | Color | Usage |
|---|---|---|
| Page background | --navy | All slide/page backgrounds |
| Card background | --midnight | Cards, stat boxes, terminal bars |
| Headings (h1-h3) | --white | All major headings |
| Sub-headings (h4) | --teal | Card titles, section labels |
| Body text | --mist | All paragraph text |
| Accent / links | --teal | Links, highlights, decorative elements |
| Mono labels / tags | --teal at 0.6 opacity | Section tags, meta labels |
Typography
Three font families create our typographic system. Each has a distinct role and should not be substituted.
- All-caps only
- Font-weight: 400
- Letter-spacing: 0.02em
- Used for: h1, h2, h3, stat numbers, display text
- Weights: 300, 400, 500, 600, 700
- Line-height: 1.8 (body)
- Used for: body text, h4, paragraphs, cards
- Weights: 300, 400, 500
- Size: 10-13px typically
- Used for: tags, labels, terminal UI, badges, code
Type Scale
Components
Cards
Card Title
Cards are the primary content container. They have a midnight background, subtle teal border, and 14px border radius. Hover state intensifies the border.
- Background: --midnight
- Border: 1px rgba(0,194,199,0.1)
- Border-radius: 14px
- Padding: 28px 24px
- Hover: border opacity to 0.25
Stat Cards
- Centered layout with number + label
- Number: --font-display at clamp(2rem,3.5vw,3.5rem)
- Label: --mist at 0.6 opacity
Tags & Badges
- Tag: JetBrains Mono 11px, uppercase, 0.15em spacing
- Badge: JetBrains Mono 10px, rounded 6px border
- Both use --teal with reduced opacity
Grid Layouts
.grid-2: 2 columns, 40px gap
.grid-3: 3 columns, 32px gap
.stat-grid: 4 columns, 20px gap
All collapse to single column at 768px with 24px gap.
Terminal / Code UI
Voice & Language
Purposeful
Every word earns its place. We are deliberate and intentional, reflecting the care we put into our events.
Inclusive
We speak to builders of all levels. Technical depth without gatekeeping. Complexity without exclusion.
Human
We are a community, not a corporation. Warm, authentic, and grounded. Relationships over transactions.
Bilingual Standards
All content should be available in English and Traditional Chinese. Chinese text uses .zh class with italic styling and reduced opacity to visually differentiate from English copy.
- English is primary; Chinese is secondary and complementary
- Chinese translations should be concise, not verbatim
- Use .zh class for consistent styling
Pattern Examples
heading + body
Section Title
Body text explaining the section. Clear, concise, and purposeful.
简洁明了的中文翻译card pattern
Card Heading
Card body content with a slightly smaller font size. Used for feature descriptions, team bios, and content blocks.
卡片内容的中文翻译stat display
tag + badge
Events 30+ Partners 20+ Reach 2.5KBadges for skills, tags, and metadata. Compact and scannable.
Asset Naming
Consistent naming keeps our assets organized and accessible.
| Asset Type | Pattern | Example |
|---|---|---|
| Partner logos | {company}.{ext} | baidu.png, aws.svg |
| Collaborate images | {type}.jpeg | hackathon.jpeg, moderation.jpeg |
| Gallery photos | {number}.jpg | 1.jpg, 2.jpg |
| Circuits | {number}.jpg | 1.jpg, 2.jpg |
Online Presence
Official channels and platforms for Prompt in Progress.
Platforms
| Website | promptinprogress.com |
| Events | luma.com/promptinprogress |
| AI Tinkerers HK | hong-kong.aitinkerers.org |
| hello@promptinprogress.com | |
| Community invite |
Social Media
| /company/promptinprogress | |
| YouTube | @promptinprogress |
| X (Twitter) | @promptinprog |
| @promptinprog | |
| /promptinprogress |
Background Treatments
Four background layers are used across the site to create depth and atmosphere. They stack in order: CSS base, animated gradient, video, then globe.
Globe (3D Interactive)
Loaded via globe.gl CDN script. Renders on a <canvas> inside #globe-container on index.html or #globe-bg on partner.html.
Overlay gradient (.globe-overlay) fades from transparent at top to --navy at bottom.
MP4 Video
A looping scroll.mp4 video plays behind the hero on the homepage and links page, creating a subtle animated backdrop.
Lower z-index than globe. Hidden behind globe layer when both are present.
Animated Gradient
A shifting multi-color gradient background used on the links page and the site-wide preloader. Creates a subtle living backdrop.
The gradient animates by shifting background-position from 0% to 100% and back, creating a slow color sweep.
Impact Slide Background
The # impact 影响 slide in the partner deck uses a full-bleed background.jpg with a rgba(0,0,0,0.75) overlay to create a dramatic, immersive section break.
This treatment is used selectively for key narrative moments - the impact statistics and community reach sections - to visually separate them from standard content slides. The dark overlay ensures text remains readable against any background image.