# base This file describes how base looks and sounds. When you design, build or write anything for this brand, follow it: use only the colors and typefaces listed here, and write in the voice it describes. Where a value is given, use it exactly as written. If something is not covered here, say so and ask — do not invent a rule. *(c)2026* # Visual Identity Guideline ## Overview Introduce your brand: what it stands for, who it serves, and what makes it distinct. Use this guideline as a shared reference for the visual identity across every touchpoint. ### Logo  ### Logomark  ## Logo scale Use the approved artwork at every size. The examples below show the main logo, logomark, and logotype stepping down from large-format applications to compact digital use. Sizes: 160px, 96px, 64px, 40px, 24px Minimum size 24px Sizes: 160px, 96px, 64px, 40px, 24px Minimum size 24px ## Minimum size Digital Media (Web, App, Social, UI) Define the smallest size the mark may be used at, so it stays legible everywhere. | Context | Minimum Width | |---|---| | Website UI (navbar, footer) | 96 px | | Favicon / icon only | 32 px | | App icon (symbol) | 48–96 px | | Social profile image | 180 × 180 px | ## Partnership To us at base, collaboration starts with clarity. When our logo appears alongside partners, we ensure it is always legible and respectful of space. The clear zone defines the breathing room our brand needs to stay recognizable and consistent, no matter the layout. Whether vertical or horizontal, the spacing standard helps maintain visual harmony in every partnership touchpoint. - Main logo + Partner - Logomark + Partner Clear zone: X / 3 ## Logo don’ts Do not alter the logo. Avoid the following treatments. ### Logo don'ts - Don’t stretch or distort the logo. - Don’t outline the logo. - Don’t use unapproved colors. - Don’t apply shadows or effects. - Don’t rotate the logo. - Don’t apply patterns or textures. ## Color Define the core palette and the role of each color. Use the approved values consistently across digital and print applications. Maintain sufficient contrast between text, logos, and backgrounds. | Name | Value | RGB | CMYK | Pantone | Usage | |---|---|---|---|---|---| | Color 1 | `#E32491` | 227, 36, 145 | 0/84/36/11 | | | | | `#03E5FB` | 3, 229, 251 | 99/9/0/2 | | | | | `#4101F5` | 65, 1, 245 | 73/100/0/4 | | | | | `#000000` | 0, 0, 0 | 0/0/0/100 | | | | Name | Value | RGB | CMYK | Pantone | Usage | |---|---|---|---|---|---| | Color 1 | `#1C1917` | 28, 25, 23 | 0/11/18/89 | | | | | `#FFFFFF` | 255, 255, 255 | 0/0/0/0 | | | ### Color combination The color pairing system defines how the brand palette should be distributed within a layout. Use the primary color for defining moments, supporting colors for balance, and neutrals for readability. Use the suggested percentages as a guide, and adapt combinations to maintain contrast across product, communication, and marketing surfaces. ### Signature brand color combination The distinctive brand color balance recommended for every composition. - foundation: `#E32490` — 60% - supporting: `#4100F5` — 30% - accent: `#FFFFFF` — 5% - highlight: `#141414` — 5% ### Signature brand color combination The distinctive brand color balance recommended for every composition. - foundation: `#E32490` — 60% - supporting: `#4100F5` — 30% - accent: `#FFFFFF` — 5% - highlight: `#141414` — 5% ### Signature brand color combination The distinctive brand color balance recommended for every composition. - foundation: `#E32490` — 60% - supporting: `#4100F5` — 30% - accent: `#FFFFFF` — 5% - highlight: `#141414` — 5% ### Signature brand color combination The distinctive brand color balance recommended for every composition. - foundation: `#E32490` — 60% - supporting: `#4100F5` — 30% - accent: `#FFFFFF` — 5% - highlight: `#141414` — 5% ### Signature brand color combination The distinctive brand color balance recommended for every composition. - foundation: `#E32490` — 60% - supporting: `#4100F5` — 30% - accent: `#FFFFFF` — 5% - highlight: `#141414` — 5% ### Signature brand color combination The distinctive brand color balance recommended for every composition. - foundation: `#E32490` — 60% - supporting: `#4100F5` — 30% - accent: `#FFFFFF` — 5% - highlight: `#141414` — 5% ## Logo on color When combining the logo with brand colors, always ensure there is ample contrast. These are the approved light and dark combinations. ### Logo  ### Logo  ### Logo  ### Header 3  ### Logo  ### Logo  ## Typography The base typography system uses General Sans to mirror the brand’s calm, modern character. Headline styles use General Sans Medium with tight spacing to create a confident, clear presence in key moments. Sub-headline and body copy use the same family for consistency, with increased line height for comfortable reading across product, web, and communication layouts. Using a single, versatile type family keeps the experience simple and cohesive, ensuring that color, iconography, and layout can carry the brand’s warmth while the typography remains clean, neutral, and highly legible. ### Inter - Family: Inter - Weight: 700 (Bold) - Available weights: 400, 500, 600, 700, 300, 800 - Showcase weights: name 700, glyph 700, alphabet 700 - Source: google - Role: display - Usage: Heading · Body Text · Description | Scale Category | Typeface | Weight | Size | Case | |---|---|---|---|---| | Caption | Inter | Medium | 12 | Sentence | | Header 1 | Inter | Semibold | 96 | Sentence | | Header 2 | Inter | Medium | 60 | Sentence | | Header 3 | Inter | Regular | 48 | Sentence | | Body copy | Inter | Regular | 16 | Sentence | | Small text | Inter | Regular | 12 | Sentence | | CTA | Inter | Regular | 16 | Sentence | ## Imagery Define the mood, lighting, composition, and subject matter of your brand imagery. Use consistent visual direction across every touchpoint, and avoid generic stock photography or distracting detail. ## Tone and voice base speaks with calm clarity, radical openness, and warm confidence. We make complex ideas easy to understand, support every claim with transparent facts, and treat people as capable participants in an open network. Our language is concise, human, and globally accessible. We communicate the practical value of base without hype, speculation, or unnecessary technical jargon. ### 01 · Calmly clear Make complex ideas simple and understandable. Use plain language and short sentences. **Example** A simpler way to get things done. ### 02 · Radically open Earn trust through facts, transparency, and verifiability. Be specific about how the system works, who is involved, and what people can verify for themselves. **Example** Explain what people can expect in clear, specific terms. ### 03 · Warmly empowering Speak to people as capable participants, not passive customers. Be welcoming, inclusive, and optimistic while staying grounded. **Example** Built to work wherever you are. ### Applying the voice **Website and campaigns:** Optimistic, simple, and led by practical benefits. **Product UI:** Brief, direct, and reassuring. **Education and support:** Patient, conversational, and never patronizing. **Social and community:** Warm, participatory, and lightly playful. **Protocol documentation:** Precise, neutral, and verifiable. **Safety, policy, and legal:** Factual, calm, and unambiguous. ### Always Be clear, specific, human, and useful. ### Never Use hype, speculation, insider language, or exaggerated promises. ## Graphic Element Add your brand patterns and graphic elements. Define their spacing, scale, and alignment, and use them to support the message without competing with it. ![Pattern 1]() **Pattern 1** ![Pattern 2]() **Pattern 2** Use approved palette colors with strong contrast for brand patterns. Keep the marks legible, and use supporting colors to balance the composition. ![Dot circle — Circular dot patterns may support the design context.]() **Dot circle** Circular dot patterns may support the design context. ![Frosted glass — Use the effect on selected brand objects.]() **Frosted glass** Use the effect on selected brand objects. ![Gradient shape — Use the glass gradient effect with Your brand’s primary colors.]() **Gradient shape** Use the glass gradient effect with Your brand’s primary colors. ## Application Apply the brand consistently across every touchpoint. Replace the sample mockups with approved artwork, or customize the generated applications with your logo and palette. ### Application mockups - Set: recommended - Brand: base - Primary surface: #E32490 - Supporting surface: #4100F5 - Tagline: Ideas made visible. - Website: base.example