# Blue Drop Labs brand guide A shared language for the things we make. Use this guide to bring the same clarity, craft, and human perspective to every Blue Drop experience. ## Logos Blue Drop is our shared identity. The aqua drop and Deep green wordmark stay consistent; the lighter lowercase labs descriptor identifies our digital consulting firm. Future businesses can use the same mark with a different descriptor, on the same baseline in Geist Regular. Use the supplied artwork and preserve its proportions. Primary: https://www.bluedroplabs.com/assets/logo.svg Reversed: https://www.bluedroplabs.com/assets/logo-dark.svg Drop: https://www.bluedroplabs.com/assets/brand/blue-drop-mark.svg Preserve original proportions and colors. Keep at least half the drop height clear on every side. Recommended minimum widths: full logo 140 px; drop 24 px. ## Colors Blue is our signature. Each practice has a consistent home within the palette: Sky blue for Design, Lavender with Violet accents for Development, and Seafoam for AI. These colors connect the homepage cards to each practice’s hero, graphics, section backgrounds, and closing invitation. White and softly tinted surfaces give longer passages room to breathe. - Paper: #FCFCFB / RGB 252, 252, 251 / --studio-paper. The default page surface. Give ideas and imagery room to breathe. - Ice: #F0F6F5 / RGB 240, 246, 245 / --studio-ice. A quiet change of surface for supporting sections and working examples. - Deep green: #002024 / RGB 0, 32, 36 / --studio-ink. Our reading color on light surfaces, and the foundation for dark sections. - Brand blue: #007A9C / RGB 0, 122, 156 / --studio-blue. Links, emphasis, and the blueprint surface. Our strongest blue. - Aqua: #2DB8CF / RGB 45, 184, 207 / --studio-aqua. The drop’s signature color. Use it for graphic accents and moments of energy. - Light blue: #72D8E8 / RGB 114, 216, 232 / --studio-light-blue. A brighter supporting surface for diagrams and illustrations. - Sky blue: #A7ECFF / RGB 167, 236, 255 / --studio-sky. An open, optimistic field for design work and useful highlights. - Seafoam: #B8FFE3 / RGB 184, 255, 227 / --studio-accent. A supporting accent for interaction feedback and selected details. - Lavender: #E6E2FF / RGB 230, 226, 255 / --studio-lavender. Development’s signature surface. A light, distinct home for engineering content. - Violet: #5D4E92 / RGB 93, 78, 146 / --studio-violet. Development’s graphic and interaction accent. Pair with Lavender or Paper. - Muted text: #486267 / RGB 72, 98, 103 / --studio-muted. Captions and supporting copy on Paper or Ice. Keep it readable. - Mist text: #BDDADB / RGB 189, 218, 219 / --studio-mist. Supporting copy on Deep green. Its softer tone stays comfortably readable. - Rule: #BDCECE / RGB 189, 206, 206 / --studio-rule. Quiet dividers between related content. Never use it for body text. ## Accessible pairings - Deep green on Paper: 16.60:1. - Brand blue on Paper: 4.80:1. - Deep green on Sky blue: 13.06:1. - Deep green on Seafoam: 14.98:1. - Paper on Deep green: 16.60:1. - Mist text on Deep green: 11.54:1. - Paper on Brand blue: 4.80:1. - Deep green on Lavender: 13.54:1. - Violet on Lavender: 5.62:1. ## Typography Geist is our everyday voice, from a bold opening thought to the detail that makes a decision easier. One family keeps the experience connected. Scale, spacing, and weight create the hierarchy. - Display: Geist, Medium · 500, 48–96 px, line height 1.05–1.1. One clear proposition; scale down with the viewport. - Section heading: Geist, Medium · 500, 32–64 px, line height 1.1–1.2. A new idea in the page, with generous space above. - Subheading: Geist, Medium · 500, 20–28 px, line height 1.25–1.4. Group related details without creating another hero. - Body: Geist, Regular · 400, 16–20 px, line height 1.5–1.7. Comfortable reading, usually no more than 65 characters per line. - Caption / label: Geist, Regular or medium, 12–15 px, line height 1.5–1.6. Context, attribution, and control labels in sentence case. Use Geist Mono for code and technical notation. Use Geist with tabular numerals for business results. Fonts: https://vercel.com/font ## Voice ### Start with the outcome Name what changes for the customer. Connect the work to a better experience, a lower operating cost, or a new capability. Example: Turn a slow, manual process into a workflow your team can trust. ### Keep people in the picture Human judgment directs the work. Artificial intelligence helps us explore, build, and evaluate faster. Make responsibility clear. Example: Our people lead the strategy. Intelligent tools accelerate the execution. ### Be specific enough to believe Show the work behind the claim. Link client outcomes to a case study. Label estimates and explain their assumptions. Example: See how we helped POWDR reduce software costs by 70%. ### Make the next step clear Write like a capable person talking to another person. Use familiar words and action labels that explain where a link goes. Example: Tell us what you want to improve. Write Blue Drop Labs for the full company name; Blue Drop in conversation. Spell out artificial intelligence on first mention in explanatory copy; AI works in navigation and later references. ## Layout and motion ### Give each section one job Lead with one useful idea. Group its supporting detail, then leave enough space for the next thought. Use the shared page gutter and a clear reading order. ### Let the work carry the image Use original graphics, thoughtful diagrams, and authentic product imagery. Do not use stock photography. Keep the distinction between client work and an illustrative example clear. ### Make motion explain something Use a reveal to establish hierarchy or a transition to connect two states. The homepage blueprint is our focal opening sequence; reading pages stay ready to use. ### Make access part of the craft Keep labels visible, focus obvious, and controls usable by keyboard. Respect reduced motion and provide complete content when JavaScript is unavailable. Reference: https://www.bluedroplabs.com/brand CSS tokens: https://www.bluedroplabs.com/brand/tokens.css