The Gogolook identity is a system of visual and verbal elements working together to create a consistent, trustworthy experience across all touchpoints. Every design decision reinforces reliability, security, and integrity.
Our direction principles guide every design decision and communication:
Gogolook's voice is clear, relatable, and empowering. Tone should feel calm, supportive, and never judgmental. Use simple language, focus on one clear action, and avoid technical jargon and fear-based messaging.
| Channel | Constraint |
|---|---|
| Push notification title | ≤ 30 characters |
| Push notification body | ≤ 140 characters, 1 emoji max |
| Social media headers | ≤ 8 words |
Since 2012, the Gogolook logo has evolved to reflect the company's growth from a Taipei startup to a global TrustTech leader. Each iteration strengthened trust and modernity.
The wordmark has a single approved form and must always be displayed unaltered. There is no standalone icon — the wordmark is the logo. The bright blue represents cutting-edge technology, innovation, and modernity.
The wordmark should most often appear in Gogolook Blue and white only.
Clear space should be the height of the "G" in the wordmark on all four sides. No other elements should intrude on this zone.
It is important that the appearance of the logo remains consistent. Never alter the wordmark in any of these ways:
When Gogolook partners with other brands, the Gogolook logo is positioned on the left, followed by the partner logo on the right, separated by a vertical divider. Gap between logos equals the width of the "G" in the Gogolook wordmark.
Symbolizes reliability, security, and trust. The dominant brand color used for headlines, titles, main buttons, and main backgrounds.
Represents growth, renewal, and harmony. Used for subheadlines, calls to action, icons, graphical elements, and labels.
Conveys stability and depth. Used for body text links, labels, and accent usage supporting graphics.
Evokes openness and serenity. Used for graphical elements.
Creates a striking, professional impact as a background. Conveys sophistication and depth.
Imparts a modern, fresh aesthetic as a background. Enhances clarity and delivers a light, approachable feel.
The main color is Gogolook Blue, used around 50%. Shadow Blue and Clear Horizon provide depth and accent. Neo Green should be used sparingly.
| Color | Proportion | Role |
|---|---|---|
| Gogolook Blue | ~50% | Headlines, CTAs, backgrounds |
| Shadow Blue | ~20% | Dark background, professional contrast |
| Clear Horizon | ~20% | Secondary accent, graphic elements |
| Neo Green | ~10% | Sparingly: subheadlines, icons, highlights |
The standard gradient blends all four primary colors for a modern, forward-thinking aesthetic. Designed exclusively for digital use.
- Use for digital backgrounds and UI elements
- Maintain specified color proportions
- Allow animated or freeform variations for digital
- Never use dynamic gradients in print
- Never repeat gradient as a tile or pattern
- Never let gradient reduce text readability
Used for headlines and highlighted paragraphs only. Its modern yet timeless characters showcase Gogolook's brand personality.
Used for body copy. Clean, highly readable design ensures clarity across digital and print contexts.
| Style | Font | Weight | Size | Leading | Color |
|---|---|---|---|---|---|
| H1 | Plus Jakarta Sans | Bold | 40px | 100% | Gogolook Blue / Neo Green |
| H2 | Plus Jakarta Sans | Bold | 18px | 140% | Gogolook Blue / Neo Green |
| Title | Plus Jakarta Sans | Bold | 18px | 140% | Black |
| Body | Inter | Regular | 16px | 140% | Black |
| Legal | Inter | Regular | 8pt | 140% | Black |
Noto Sans is used for all non-Latin scripts, ensuring consistency and readability across diverse linguistic needs: Thai, Japanese, Korean, Traditional Chinese, and Simplified Chinese.
All layout tasks use a 12-column grid. The grid allows a page to be divided evenly into units of 1, 2, 3, 4, 6, or 12. Use as few columns as possible to avoid overly complex layouts.
Minimum margin size is 6% of the diagonal distance, or 10mm (print) / 10px (digital) — whichever is larger.
| Medium | Minimum Margin |
|---|---|
| 6% diagonal or 10mm | |
| Digital | 6% diagonal or 10px |
Our aim is to showcase collaboration and connection. Gogolook unites people, highlighting harmony and unity. Photography should use warm mood tones and lighting to emphasize the sense of community.
Relatable, human, warm. Our lifestyle photography should be bright and vibrant, with uncluttered backgrounds and a shallow depth of field. We use an editorial-style approach with minimal styling to showcase real people in genuine, candid moments.
Industry-specific imagery provides context and serves as a backdrop to our brand storytelling. The composition should be engaging and authentic, often incorporating abstract elements or close-up crops to create rich, textured backgrounds.
- Use high saturation with warm, rich grading
- Choose natural and candid selects
- Ensure modern-day attire and environments
- Combine people with graphics authentically
- Avoid unnaturally dark photos
- Avoid clichéd or overly staged images
- Avoid outdated work environments
- Avoid graphics dominated by binary code
Each skill is a standalone SKILL.md file. Drop it into your ~/.claude/skills/ directory and Claude Code will enforce Gogolook brand rules automatically. Bundle downloads include the Brand skill for complete brand context.
unzip gogolook-slides-bundle.zip -d ~/.claude/skills/
unzip gogolook-ui-bundle.zip -d ~/.claude/skills/
# Or copy individual skill files
cp gogolook-brand-skill.md ~/.claude/skills/
cp gogolook-slide-skill.md ~/.claude/skills/
cp gogolook-ui-skill.md ~/.claude/skills/