OGAKI

Overview

OGAKI is a prestige beauty agency that operates at the intersection of social influence and brand strategy. The design system embodies 'Architectural Minimalism'—a movement that prioritizes geometric precision, bold typographic hierarchy, and restrained color palettes to communicate authority and sophistication. The brand serves luxury beauty companies seeking to amplify their presence on social platforms through data-driven, influence-led campaigns. The visual language evokes clarity and confidence: a warm, neutral canvas (#f2ede7) anchors the interface, while deep charcoal (#221f20) provides structural weight and commands attention. The emotional response is one of refined professionalism—users feel they are engaging with a premium, strategically-minded partner, not a generic agency.

The brand voice is direct, precise, and unapologetically confident. OGAKI speaks in declarative statements: 'Social-first. Beauty-fluent. Influence-led.' The vocabulary favors industry-specific terms (prestige, influence, social-first, fluent) over generic marketing language. Tone is never breathless or overly enthusiastic; instead, it conveys earned expertise and understated authority. Example sentence in brand voice: 'We don't follow trends—we architect them for brands that refuse to blend in.'

Colors

The color system is built on a philosophy of 'Warm Minimalism': a soft, warm neutral palette (#f2ede7 surface, #221f20 primary) that feels approachable yet authoritative, avoiding the coldness of pure grays or blacks. Primary (#221f20) is the deep charcoal used for all interactive elements, text, and CTAs—it commands attention without aggression. Secondary (#666666) and Tertiary (#505050) provide supporting contrast for disabled states, secondary text, and metadata. The surface stack progresses from bright (#faf8f6) to dim (#e8e3dd), creating subtle visual hierarchy without relying on color shifts. On-surface text (#221f20) maintains 7:1 contrast ratio against all surface variants for accessibility. The outline color (#6c757d) is used for borders and dividers, while outline-variant (#d0d0d

Typography

The type system pairs two distinct typefaces to create visual rhythm and hierarchy. Reckless (weights 300, 400) serves as the display and headline family, delivering the brand's distinctive personality through its geometric, slightly condensed letterforms. Its 300 weight at 63.6px for display creates an elegant, spacious presence that feels editorial and premium. GTAmerica (weights 400, 500, 700) handles all body, label, and UI text, providing clarity and legibility at smaller sizes. The hierarchy flows: Display (63.6px, 300 weight) for hero statements, Headline-lg (48px, 300 weight) for section titles, Headline-md (36px, 300 weight) for subsections, Title-lg (20px, 700 weight in GTAmerica) for card headers, Body-lg (18px, 400 weight) for primary content, Body-md (16px, 400 weight) for sec

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, providing flexibility for both desktop and tablet experiences. The design favors a 'breathing space' philosophy: generous margins and padding create visual rest between sections, preventing cognitive overload. The spacing scale is semantic and hierarchical—unit (8px) is the baseline, with xs (4px) for micro-interactions, sm (12px) for component internal padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter (24px) is applied consistently to left/right margins on all container elements, ensuring alignment across the full width. White-space is used strategically: the hero section (with the large OGAKI wordmark) o

Elevation & Depth

Depth in this system is achieved through subtle shadow and surface-color layering, not through dramatic contrast or blur effects. The elevation scale defines three primary levels: Level 1 (Base) uses no shadow, relying on surface-container colors to define boundaries. Level 2 (Standard Cards/Modals) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests a card floating 8px above the base. Level 3 (Elevated Modals/Overlays) applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), deepening the perceived distance to ~16px. Hover states on interactive element

Shapes

The shape philosophy is 'Geometric Precision'—a balance between sharp architectural edges and subtle softness that prevents the interface from feeling cold or austere. Border-radius follows a deliberate scale: sm (0.25rem / 4px) for micro-elements like badges and small buttons, DEFAULT (0.5rem / 8px) for standard inputs and list items, md (0.75rem / 12px) for secondary buttons and cards, lg (1rem / 16px) for primary cards and modals, xl (1.5rem / 24px) for hero sections and large containers, and full (9999px) for pill-shaped buttons and badges. Primary buttons use md (8px) radius, creating a s

Components

Action Elements Buttons are the primary interactive element and come in two variants: primary (solid fill) and secondary (transparent with border). Primary buttons use backgroundColor: {colors.primary} (#221f20), textColor: {colors.on-primary} (#f2ede7), padding: 12px 24px, height: 44px, and borderRadius: 8px. The typography is label-md (12px, 400 weight, GTAmerica). On hover, the background shifts to primary-container (#3d3a3b) with a transition: background-color 200ms ease-out. Secondary buttons use transparent background with a 1px solid border at outline (#6c757d), same padding and height, and text color primary (#221f20). On hover, secondary buttons shift to surface-container-high (#e0dbd5) background while maintaining the border. All buttons include a focus state with outline: 2p

Do's and Don'ts

**Do**

• Do use Reckless at 300 weight for all display and headline text—its geometric precision is the brand's signature and should never be substituted with GTAmerica.
• Do maintain the warm neutral palette (#f2ede7 surface, #221f20 primary) as the foundation—these two colors should appear in 80% of the interface.
• Do apply md (24px) spacing between major sections and sm (12px) spacing between related elements—this rhythm creates visual hierarchy without explicit color changes.
• Do use primary (#221f20) exclusively for all interactive elements (buttons, links, focus states)—never introduce secondary colors into CTAs.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and elevated surfaces—this is the system's standard elevation shadow and should be consistent across all instances.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff)—always use the system colors (primary #221f20, surface #f2ede7) to maintain warmth and cohesion.
• Don't apply border-radius greater than lg (16px) to buttons or inputs—the geometric precision of the brand requires sharp, intentional shapes, not overly rounded forms.
• Don't mix Reckless and GTAmerica weights arbitrarily—Reckless is display-only (300, 400 weights), GTAmerica is body-only (400, 500, 700 weights).
• Don't use color alone to convey state changes—always pair color shifts with shadow or scale changes (e.g., hover states should include both backgroundColor and boxShadow transitions).
• Don't exceed the container-max width of 1280px or apply gutters smaller than 24px—these constraints ensure readability and visual balance across all screen sizes.