OhhMyDesign

Overview

OhhMyDesign is a design and development studio that builds bold, conversion-focused brands and digital products for clients worldwide. The studio's aesthetic centers on "Atmospheric Minimalism with Energetic Accents"—a design philosophy that pairs serene, gradient-rich sky backgrounds (blues and cool whites) with sharp, high-contrast typography and vibrant orange-red call-to-action elements. The emotional response is one of clarity and confidence: the soft, drifting clouds evoke calm professionalism, while the bold primary accent (#F0531C) and electric secondary blue (#0D99FF) command attention and drive action. The brand personality is direct, confident, and slightly irreverent. The studio speaks in short, punchy sentences that avoid corporate jargon: "We make people stop and ask, who made that?" and "Most brands you can scroll right past. The ones we build do this to your eyes." The tone is conversational yet authoritative, emphasizing craft and impact over process. Example sentence in brand voice: "No forms. No hoops. Just this."

Colors

The color system is anchored by a sky-gradient background (linear-gradient from #3E97E2 through #5EAEEA to #ACD8F4) that serves as the canvas for all content. Primary (#F0531C, a vivid burnt orange) is reserved exclusively for call-to-action buttons, active navigation states, and brand-critical highlights—it appears on "Contact" and "Book a call" buttons, creating visual urgency. Secondary (#0D99FF, a bright electric blue) is used for interactive elements, selection states, and accent details (e.g., selection box borders, chart highlights, toggle indicators). Tertiary (#27C06B, a fresh green) appears sparingly as a status indicator (e.g., the "LIVE" dot in the ruler, pulse animations). The neutral stack is built from cool, desaturated tones: on-surface (#14202B, near-black) for body text a

Typography

The type system uses a three-family hierarchy: Bricolage Grotesque (Google Fonts, 600–800 weight) for all display and headline levels, delivering geometric boldness and personality; Hanken Grotesk (Google Fonts, 400–700 weight) for body and UI text, providing warm, approachable readability at 16px baseline; and Space Mono (Google Fonts, 400–700 weight) for monospace labels, tabs, and technical annotations, reinforcing the studio's design-tool aesthetic. Display-level text (72px, 700 weight, -0.04em letter-spacing) is used for hero wordmarks and section titles, commanding attention with tight tracking. Headline-lg (48px, 700 weight) and headline-md (32px, 700 weight) establish visual hierarchy for section breaks. Body text is set at 16px with 1.45 line-height and 0em letter-spacing for maxi

Layout

The page uses a fixed 1280px container max-width (padding: 0 34px on all sides) centered on a 12-column grid, with a fixed-position sky background (background-attachment: fixed) that creates a parallax effect as content scrolls. The hero section occupies 92vh minimum height with 150px top padding and 44px bottom padding, centering content vertically and creating breathing room around the main wordmark. Section spacing follows a semantic scale: lg (40px) for major section breaks, md (24px) for component grouping, and sm (12px) for internal element spacing. The navigation bar is fixed at top: 46px (below a 30px ruler), with a pill-shaped container using 6px left/right padding and 999px border-radius for a soft, contained appearance. Cards and content containers use 12px internal padding (gut

Elevation & Depth

Depth is conveyed through a layered shadow system combined with subtle background color shifts. Level 1 (Base): The fixed sky gradient (linear-gradient 180deg from #3E97E2 to #ACD8F4) with a subtle grain overlay (opacity 0.05, mix-blend-mode overlay) provides the foundational depth. Level 2 (Standard Cards): White cards with 1px solid border (rgba(20, 32, 43, 0.07)) and box-shadow: 0 12px 26px -12px rgba(240, 83, 28, 0.6) create a warm, lifted appearance. Level 3 (Elevated/Modals): Larger shadows (box-shadow: 0 20px 50px -32px rgba(20, 19, 16, 0.32)) with increased blur radius (50px) and negat

Shapes

The shape philosophy is "Soft-Technical Precision"—combining rounded corners with sharp, geometric typography to balance approachability with professional authority. Buttons use border-radius: 999px (full pill shape) for primary and secondary CTAs, creating a friendly, clickable appearance that contrasts with the sharp sans-serif letterforms. Cards and containers use 14px border-radius (rounded.lg) for a subtle softness that feels intentional without being organic. Input fields and smaller UI elements use 6px border-radius (rounded.DEFAULT) for a more technical, grid-aligned feel. Selection ha

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses background: {colors.primary} (#F0531C), color: #FFFFFF, padding: 14px 22px, border-radius: 999px, font-size: 15px, font-weight: 600, and box-shadow: 0 12px 26px -12px rgba(240, 83, 28, 0.6). On hover, apply background: {colors.on-primary-container} (#D2410E) with transform: translateY(-2px) and a 0.35s cubic-bezier(0.2, 0.85, 0.25, 1) transition. The button-secondary variant uses a transparent background, 1.5px solid border in {colors.on-surface} (#14202B), and padding: 9px 17px for a more subtle appearance. On hover, invert to background: {colors.on-surface} with color: {colors.surface}. The button-ghost variant removes the border and uses only text color {colors.primary}, useful for tertiar

Do's and Don'ts

**Do**

• Do use primary (#F0531C) exclusively for CTAs and active states—never for body text, backgrounds, or neutral UI.
• Do apply the sky gradient background (linear-gradient 180deg #3E97E2 to #ACD8F4) as a fixed, parallax layer to create atmospheric depth.
• Do pair Bricolage Grotesque display text with Hanken Grotesk body text to balance geometric boldness with warm readability.
• Do use 999px border-radius for all primary buttons and navigation pills to reinforce the soft, approachable brand personality.
• Do apply color-tinted shadows (rgba(240, 83, 28, 0.6) for warm, rgba(13, 153, 255, 0.7) for cool) to reinforce the color system.
• Do maintain a 1280px container max-width with 34px horizontal padding to ensure content breathing room on all screen sizes.
• Do use the 120px × 120px grid background in hero sections with radial masking to add visual interest without overwhelming content.

**Don't**

• Don't use primary orange on any element other than CTAs, active navigation, or brand-critical highlights—it loses impact through overuse.
• Don't apply rounded corners smaller than 2px or larger than 999px outside the defined scale; consistency reinforces the design system.
• Don't set body text smaller than 16px or larger than 18px; the baseline is optimized for 1.45 line-height and 0em letter-spacing.
• Don't remove the 1px solid border (outline-variant) from cards; it provides essential definition against the bright sky background.
• Don't use system fonts (system-ui, -apple-system) for display or headline text; always load Bricolage Grotesque from Google Fonts.
• Don't apply shadows without color tinting; use rgba values that echo the primary or secondary palette to maintain visual cohesion.
• Don't mix border-radius values within a single component (e.g., 6px on one side, 14px on another); use the defined scale consistently.