Brandguide

Overview

Brandguide is a practical, no-nonsense brand-building platform designed for small and medium enterprises, freelancers, and solo entrepreneurs who lack dedicated marketing teams but aspire to build recognizable, distinctive brands. The aesthetic is 'Pragmatic Minimalism'—a design philosophy that strips away theoretical jargon and guru-speak in favor of real, lived decision-making. The UI communicates clarity and directness through bold, high-contrast typography (Oedenburg sans in weights 400–700), a vibrant yellow accent (#ffdc00) that commands attention without aggression, and a clean white canvas (#ffffff) that keeps focus on content. The emotional response is one of permission and accessibility: users feel they can actually *do* this, not just read about it. Voice: conversational, honest, occasionally self-deprecating. Vocabulary favors concrete nouns (spiral, decision, case study) over abstractions. Example sentence: 'Nem a logóval kezded—a márka spirálja a titka' (Don't start with the logo—the brand spiral is the secret).

Colors

The color system centers on a single, unmissable accent: primary yellow (#ffdc00, used on CTAs and key highlights) paired with a deep, almost-black text color (#1c1d2e) for maximum contrast and legibility. This combination—bright, energetic yellow against near-black—creates visual urgency without feeling aggressive. Secondary colors support specific use cases: orange (#ff6900) for secondary CTAs and highlights, and red (#cf2e2e) for error states and critical information. The surface stack is deliberately minimal: white (#ffffff) as the dominant background, with subtle grays (#f3f4f5, #e9ecef) for container differentiation and hover states. On-surface text is always #1c1d2e (the near-black), ensuring 18:1 contrast ratio on white and 12:1 on light grays. The outline color (#a6a3a8, a muted t

Typography

The type system is built on Oedenburg sans, a custom sans-serif font loaded via @font-face in weights 100 (Light), 400 (Regular), and 700 (Bold). This single typeface family creates visual cohesion while the weight variation (100–700) provides hierarchy without introducing new fonts. Display text (60px, weight 700, line-height 68px, letter-spacing -0.04em) is reserved for hero headlines and major section titles; headline-lg (40px, weight 700) for subsection titles; headline-md (28px, weight 700) for card titles and prominent content blocks. Body text defaults to 16px at weight 400 with 24px line-height, ensuring 1.5x line-height ratio for comfortable reading. Labels and CTAs use 14px weight 600 with 0.01em letter-spacing for subtle emphasis. On small labels over busy backgrounds (e.g., bad

Layout

The page layout follows a fluid, mobile-first grid with a maximum container width of 1024px, centered on larger screens. The grid is 12 columns with a 24px gutter, allowing flexible content arrangement while maintaining visual rhythm. White-space is generous: section separation uses 40px (lg spacing) vertically, with 24px (md spacing) between related content blocks. The hero section spans full width with 80px vertical padding (top and bottom) and 24px horizontal padding, creating a breathing room that emphasizes the headline. Cards and content containers use 45px padding internally, matching the visual weight of the hero. The search input and form fields sit within a centered container at 600px max-width to prevent awkward stretching on ultra-wide screens. Spacing scale is semantic: xs (4p

Elevation & Depth

Depth is achieved through subtle shadow and layering rather than dramatic drop-shadows. The elevation system uses three levels: Level 1 (Base, no shadow) for the white background and standard cards; Level 2 (Standard, md shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) for interactive cards, input fields, and hover states; Level 3 (Elevated, lg shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15)) for modals, dropdowns, and primary CTAs on hover. The shadow palette is warm and soft—never pure black, always using rgba(0, 0, 0, 0.15) or lower to avoid harsh contrast. Cards at rest have n

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners that feel approachable and modern without being overly organic or playful. The rounded scale progresses from sharp (3px for small UI elements like checkboxes) to generous (48px for large CTAs and hero cards). Primary buttons use 48px radius (full pill shape), creating a distinctive, button-like affordance that signals interactivity. Standard cards and content containers use 30px radius, balancing softness with formality. Input fields and secondary buttons use 10px (DEFAULT) or 20px (md), providing subtle rounding that feels refined witho

Components

Action Elements Primary buttons use #ffdc00 (primary) background with #1c1d2e text, 48px height, 12px 40px padding, 48px border-radius, and weight 600 typography at 14px. On hover, the background shifts to #fcb900 (primary-fixed-dim) with a 200ms ease-out transition and Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)). Secondary buttons are transparent with a 1px solid #d0d0d0 border, #1c1d2e text, and 10px border-radius; on hover, the background becomes #e9fbe5 (surface-container-high) with the same shadow and transition timing. All buttons use Oedenburg sans weight 600 at 14px, with letter-spacing 0.01em for subtle emphasis.

Containers & Surfaces Standard cards have a #f0f0f0 (surface-container-lowest) background, 30px border-radius, 45px padding, and no shadow at rest. On hover,

Do's and Don'ts

**Do**

• Do use #ffdc00 (primary yellow) exclusively on primary CTAs and key accent text—never on backgrounds or secondary elements.
• Do maintain 1.5x line-height minimum on body text (24px line-height for 16px font) to ensure readability on screens.
• Do apply 24px (md spacing) between related content blocks and 40px (lg spacing) between major sections to create visual rhythm.
• Do use Oedenburg sans weight 700 for headlines and weight 600 for labels/CTAs; weight 400 is reserved for body text only.
• Do elevate cards on hover with Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)) and a 200ms ease-out transition for tactile feedback.

**Don't**

• Don't use primary yellow (#ffdc00) on backgrounds or large surface areas—it's an accent color, not a fill.
• Don't mix Oedenburg sans with other typefaces; the system relies on a single font family with weight variation for hierarchy.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or use pure black (#000000) in shadows—keep them warm and soft.
• Don't round corners beyond 48px on interactive elements; excessive rounding (e.g., 50% on buttons) reduces clarity and feels juvenile.
• Don't use text-shadow on body text or large text blocks; reserve it only for small labels over busy backgrounds where legibility is at risk.