Create a professional brand style guide document (NOT a website) for "DevBranch" — a Drupal web development agency. Single scrolling page, no navigation/menus/footers. Import Inter, Mulish, and JetBrains Mono from Google Fonts. Colors: Navy #1A1A2E (primary), Green #00C853 (accent, sparingly), White #FFFFFF, Light Gray #F5F5F5, Dark Text #333333. Premium brand book aesthetic with generous whitespace.
COVER SECTION (full-width navy background):
SECTION 1: BRAND OVERVIEW (white background)
DevBranch is a Drupal web development agency based in Lutsk, Ukraine — the "Drupal Capital of Ukraine." Founded in 2015 (founding team collaborating since 2010), 11–50 employees, B2B technical partner for digital agencies across EU and US.
Key credentials (as stat cards):
• Only Ukrainian Platinum Drupal Certified Partner (1 of 15 globally)
• Top 30 organizational contributors to Drupal worldwide
• 200+ Drupal modules maintained
• 1,500+ Drupal issues closed; 2,130+ hours contributed in 2024
• 23 verified Clutch reviews
Brand Purpose: To be the technical backbone for digital agencies worldwide — delivering expert Drupal development so partners can confidently promise quality to their clients.
Brand Vision: To be recognized globally as the go-to Drupal development partner, known equally for technical excellence and community contribution.
Core Values (6 visual cards): Teamwork, Professional Excellence, Integrity & Quality, Community Contribution, Clear Communication, Appreciation
SECTION 2: COLOR PALETTE
Display each color as LARGE swatches (120px+ rounded rectangles) with name, hex, usage:
#1A1A2E — Primary brand color, backgrounds, headers, primary UI#00C853 — CTAs, highlights, success states, links, "branch" metaphor#FFFFFF — Text on dark backgrounds, clean section backgrounds#F5F5F5 — Alternate section backgrounds, subtle separators#333333 — Body copy on light backgroundsUsage Ratio bar: ~50% Navy, ~10% Green, ~30% White, ~10% Gray
Rule: Navy and Green should never compete. Green is accent — use sparingly.
SECTION 3: TYPOGRAPHY (show rendered examples at each size)
Headings: Inter Bold/Semi-Bold — H1: 32–36px, H2: 24–28px, H3: 18–20px
Body: Mulish Regular/Medium — Body: 16px, Small: 14px, Line height: 1.5–1.6
Code: JetBrains Mono — 14px, for code snippets/documentation
Fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Rules: Never more than 2 font families per design. No decorative/script fonts.
SECTION 4: BRAND VOICE & TONE
Voice Attributes:
• Professional but approachable — not stiff or corporate
• Technically authoritative — show expertise through work, not jargon
• Collaborative — "we" language, partnership-focused
• Community-minded — open-source advocates
• Direct — clear, honest communication without fluff
Quick Reference table:
• Be: Clear, confident, collaborative, technically precise
• Don't be: Salesy, vague, condescending, jargon-heavy
• Write like: A knowledgeable colleague explaining something over coffee
• Not like: A marketing brochure or corporate press release
Do's (green checkmarks):
✓ "We'll handle the technical heavy lifting so you can focus on your client."
✓ "Here's what we recommend and why."
Don'ts (red X):
✗ "Leverage synergies to optimize digital transformation paradigms."
✗ "We are the premier, world-class, cutting-edge solution provider."
Tone by Context cards:
• With agencies: Peer-to-peer, collaborative, technically detailed
• With enterprise: Professional, solutions-oriented, reassuring
• On social media: Slightly more casual, community-focused
• In documentation: Precise, structured, developer-friendly
SECTION 5: KEY MESSAGING
Brand Story (elegant blockquote): DevBranch started the way the best tech companies do — a small group of developers who loved Drupal and believed they could do it better. Since 2010, the founding team honed their craft, and in 2015, DevBranch officially launched in Lutsk, Ukraine. Today, as one of only 15 Platinum Drupal Certified Partners on the planet and the only one in Ukraine, DevBranch proves that consistent contribution beats loud marketing every time.
Key Messaging Pillars (4 numbered cards):
Taglines:
• Primary: "Drupal web development team — DevBranch of your business"
• Supporting: "Team to hire."
• Alternative: "We join your web projects and provide development expertise to deliver them."
Audience-Specific Messages:
• For Agencies: "We're the Drupal team you've been looking for. Plug us into your projects and we'll handle the technical side — with full accountability."
• For Enterprise: "As one of only 15 Platinum Drupal Certified Partners globally, we bring certified expertise and proven processes to your most complex web projects."
• For Community: "200+ modules. 1,500+ issues. DrupalCafeLutsk. We contribute because we believe open source makes everyone better."
Elevator Pitch (prominent styled box): "DevBranch is a Platinum Drupal Certified development agency from Ukraine. We partner with digital agencies and enterprises across the EU and US, handling the technical side of complex Drupal projects. We're one of only 15 Platinum Partners globally, a Top 30 Drupal contributor, and we maintain over 200 modules. When you work with us, technical quality is our responsibility."
SECTION 6: TARGET AUDIENCES (3 persona cards with avatar icons)
Persona 1: "Agency Alex" — Digital Agency Technical Director, Age 35–50, EU/US, manages 10–50 team, values quality over cost, pain points: can't find reliable Drupal devs/missed deadlines, needs: technical partner for Drupal end-to-end
Persona 2: "Enterprise Emma" — IT Director at Mid-Large Company, Age 40–55, risk-averse, certification-conscious, pain points: Drupal site needs upgrading/team lacks expertise, needs: certified proven experts for migrations
Persona 3: "Government Greg" — Public Sector Web Manager, Age 35–55, compliance-focused, security-conscious, prefers open-source, pain points: needs accessible compliant secure Drupal platforms, needs: team with government project experience
SECTION 7: LOGO USAGE & IMAGERY
Logo Usage (show visual placeholders for DO/DON'T):
• Primary: White logo on Navy background
• Secondary: Navy logo on white/light background
• Minimum size: 120px wide (digital), 30mm (print)
• Clear space: Padding equal to height of "D" in "Dev" on all sides
• Never: stretch, rotate, change colors outside palette, place on busy backgrounds
Imagery Style:
• Prefer: Abstract tech visuals, clean code screenshots, geometric patterns, workspace photography
• Avoid: Generic stock photos, overly posed team photos, clip art
• Style: High contrast, clean composition, navy/green color grading
• Icons: Line-style, consistent weight, Phosphor or Feather icon set
SECTION 8: BRAND PERSONALITY (5 visual cards/badges with icons)
Each section should have a navy header bar with section number and title. Clear visual dividers between sections. Premium, spacious, elegant design throughout.
I'll create a professional brand style guide document for DevBranch with all the sections you specified. Let me start by examining the current structure and then building this premium brand guide.
Now I'll update the layout to import the required Google Fonts and create the brand style guide page:
Now let me update the globals.css with the custom fonts and color variables:
Now I'll create the comprehensive brand style guide page:
I've created a comprehensive professional brand style guide document for DevBranch. The document features:
Layout & Design:
#1A1A2E, Green #00C853, White, Light Gray, Dark Text)All 8 Sections Completed:
The design uses elegant section headers with navy bars, consistent spacing, professional card layouts, and the accent green sparingly throughout for visual interest.
Please review and improve the following aspects of the brand guide:
COVER SECTION: Make sure the cover is full-viewport height (or at least very tall and impactful), with the title "DevBranch Brand Guide" very large and prominent. Add subtle geometric/abstract decorative elements (lines, circles, grid patterns) using the green accent #00C853 to make it feel premium. The cover should feel like a real brand book cover.
COLOR SWATCHES: Make sure each color swatch is at least 120px × 120px, displayed as large rounded rectangles. Show the hex code prominently. Make sure the usage ratio bar is a clear horizontal bar with proportional colored segments (50% Navy, 10% Green, 30% White, 10% Gray) with labels.
TYPOGRAPHY: Show ACTUAL rendered text examples — not just descriptions. Show "The quick brown fox" or "DevBranch builds the web" rendered in Inter Bold at H1 (36px), H2 (28px), H3 (20px) sizes. Show a body text paragraph in Mulish at 16px. Show a code snippet like const devBranch = new DrupalPartner(); in JetBrains Mono at 14px.
SECTION HEADERS: Each section should have a full-width navy (#1A1A2E) banner/bar with the section number and title in white text. These should visually separate each section.
BRAND PERSONALITY (Section 8): Make the 5 personality cards visually distinct — use icons (you can use emoji or simple SVG icons), navy backgrounds with white text, and a green accent line or border. They should look like badges.
PERSONA CARDS (Section 6): Each persona should have a distinct avatar/icon placeholder (a circle with an initial or icon), and be styled as a complete card with clear sections for demographics, pain points, and needs.
LOGO USAGE (Section 7): Create visual placeholder boxes showing "DevBranch" text as a stand-in logo — show it white on navy, navy on white, and then show "DON'T" examples (stretched, rotated, wrong colors) with red X overlays.
Make sure ALL text content from every section is included — don't truncate or summarize any content. Every bullet point, every quote, every detail must be present.
Overall spacing: Add generous padding (60-80px vertical padding per section minimum). The document should breathe.
Remove any website-like elements if present (no sticky headers, no navigation, no footer links).
Let me read the rest of the file to see all sections:
Let me read the final section:
Now I'll make comprehensive improvements to the brand guide. I'll rewrite the entire file with all the requested enhancements:
I've comprehensively improved the DevBranch brand style guide with all your requested enhancements. The document now features a full-viewport impactful cover with enhanced geometric elements, 120px+ color swatches with prominent hex codes and a clear proportional usage ratio bar, actual rendered typography examples showing Inter, Mulish, and JetBrains Mono at specified sizes, full-width navy section headers, distinct badge-style personality cards with navy backgrounds and green accents, enhanced persona cards with larger avatars and clear sections, visual logo usage examples including "don't" examples with red X overlays, generous 60-80px vertical padding throughout, and all content preserved without truncation. The design breathes with premium spacing and maintains the professional brand book aesthetic throughout.
A few final polish items:
Make sure the Google Fonts are imported properly at the top — Inter, Mulish, and JetBrains Mono. The typography section MUST actually render in these fonts (not system defaults).
In the Voice & Tone section (Section 4), make sure the Do's examples have GREEN checkmarks (✓) and the Don'ts have RED X marks (✗) to create clear visual contrast between good and bad examples.
In the Key Messaging section (Section 5), the Elevator Pitch should be displayed in a prominent, visually distinct box — perhaps with a navy background, white text, and a green left border, making it stand out as the most important messaging element.
The cover page geometric elements should be more visible and decorative — add some semi-transparent green circles, lines, or a subtle grid pattern in the background to make the cover more visually rich.
Make sure all section dividers are consistent — each section starts with a full-width navy bar containing the section number (like "01", "02", etc.) and the section title.
Ensure the document ends cleanly — perhaps add a small footer note at the very bottom saying "DevBranch Brand Guide — February 2026 — Confidential" in small text, centered, with light gray color. This is NOT a website footer — it's a document footer like you'd see at the end of a PDF.