SAKIYOMI Corporate

Overview

SAKIYOMI is a premium SNS marketing agency that transforms corporate social strategy into measurable business outcomes. The design system embodies 'Strategic Minimalism'—a philosophy that strips away visual noise to reveal actionable insight. The brand serves forward-thinking enterprises seeking Instagram mastery, and the UI evokes precision, foresight, and technological confidence. Every interface element is a deliberate choice, never decorative. The visual language combines a sophisticated dark foundation (surface #1e1e1e, on-surface #eeeeee) with vivid accent colors that signal innovation: electric blue (#2874fc) for primary actions, vibrant orange (#ff6900) for secondary emphasis, and neon green (#00d084) for success states. This creates a high-contrast, energetic aesthetic that feels both corporate and cutting-edge.

The brand voice is direct, data-informed, and aspirational without hyperbole. Tone: confident but not arrogant, technical but not jargon-heavy, Japanese-influenced minimalism meets Silicon Valley clarity. Example sentence: 'Your Instagram strategy deserves more than guesses—we deliver the foresight that turns followers into customers.' The typography pairs Outfit (geometric, modern, English-dominant) for headlines and CTAs with Noto Sans JP (warm, legible, culturally grounded) for body copy, reflecting the brand's bilingual, globally-minded positioning.

Colors

The color system operates on a 'Dark Canvas + Vivid Accent' model, optimized for high contrast and visual hierarchy on corporate dashboards and marketing presentations. Surface colors form a carefully calibrated stack: the base surface (#1e1e1e) is a true dark gray—not pure black—to reduce eye strain during extended use, while surface-container-highest (#313131) provides subtle depth for elevated UI layers. On-surface (#eeeeee) is a soft off-white, not pure white, to maintain warmth and reduce glare. Primary (#2874fc) is a saturated electric blue used exclusively for CTAs, links, and active states—it commands attention without aggression. Secondary (#ff6900) is a bold orange deployed for accent badges, warning states, and secondary CTAs; it creates visual rhythm and signals urgency. Tertia

Typography

The type system enforces a clear hierarchy through weight and scale, not color alone. Outfit (400, 600 weights) handles all display, headline, and label typography—its geometric letterforms convey modernity and precision. Noto Sans JP (300, 400, 500, 700 weights) carries body copy and longer-form content, providing warmth and legibility for Japanese and English mixed text. Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements and brand moments; headline-lg (40px, 600 weight, -0.02em tracking) anchors major sections; headline-md (28px, 600 weight) breaks up content blocks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and feature descriptions; body-md (16px, 400 weight, 24px line-height) is the workhorse for standard content. Label-m

Layout

The layout system uses a 12-column grid with a maximum container width of 1300px, providing flexibility for both desktop dashboards and mobile-first responsive design. The gutter spacing is consistently 24px (md token), creating a breathing room that feels premium without excess. Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for inline groupings. The design favors asymmetrical white space—leading edges often use full lg spacing while trailing edges compress to md, creating visual momentum. Container max-widths vary by context: hero sections expand to 1476px for impact, while content cards constrain to 1100px for readability. Padding inside cards is consistently md (24px) on desktop, reducing to sm (12px) on mobi

Elevation & Depth

Depth is conveyed through a two-tier shadow system that avoids flat design while maintaining sophistication. Standard elevation (Level 1) uses box-shadow: 0 4px 19px 0 rgba(0, 0, 0, 0.2)—a soft, spread shadow that lifts cards and buttons 4px off the surface, creating subtle depth without drama. This shadow is applied to all interactive components (buttons, cards, input fields) in their default state. Elevated elevation (Level 2) uses box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25)—a larger, more diffuse shadow for modals, dropdowns, and hover states, signaling that the element has moved closer to

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used strategically to soften hard edges without sacrificing modernity or clarity. Buttons and primary interactive elements use lg radius (1rem / 16px), creating a friendly, approachable feel while maintaining a tech-forward aesthetic. Cards and containers use lg radius (1rem) for consistency with buttons, creating a cohesive component family. Input fields and form elements use DEFAULT radius (0.5rem / 8px), a tighter radius that signals utility and precision—these are functional elements, not decorative. Badges and small accent

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Button-primary uses backgroundColor: {colors.primary} (#2874fc), textColor: {colors.on-primary} (white), label-md typography, lg radius (1rem), padding 12px 32px, and height 48px—a generous touch target that meets accessibility standards. The standard shadow (0 4px 19px 0 rgba(0, 0, 0, 0.2)) lifts the button off the surface. On hover, button-primary-hover shifts backgroundColor to #1e4db8 (darker, more saturated) and adds a color-tinted shadow (0 8px 32px 0 rgba(40, 116, 252, 0.3)), creating a glow effect that signals engagement. Button-secondary uses a transparent background with a 2px solid border in primary color, allowing secondary actions to coexist without visual dominance. On hove

Do's and Don'ts

**Do**

• Do use primary blue (#2874fc) exclusively for CTAs and active states—it is the brand's signature accent and must remain visually distinct.
• Do maintain the dark surface (#1e1e1e) as the default background for all pages and containers; it reduces eye strain and creates a premium, focused environment.
• Do apply consistent shadow elevation (0 4px 19px 0 rgba(0, 0, 0, 0.2)) to all interactive components; it creates visual hierarchy and signals clickability.
• Do pair Outfit (headlines, labels) with Noto Sans JP (body copy) to reflect the brand's bilingual, globally-minded positioning.
• Do use lg radius (1rem) for buttons and cards to create a cohesive, friendly component family.
• Do apply label-md typography (14px, 600 weight, 0.05em tracking) to all buttons and CTAs for visual crispness and clarity.

**Don't**

• Don't use pure black (#000000) for surfaces or pure white (#ffffff) for text—use the calibrated dark (#1e1e1e) and soft off-white (#eeeeee) to maintain warmth and reduce glare.
• Don't apply primary blue to non-interactive elements (backgrounds, borders, decorative shapes)—reserve it exclusively for CTAs, links, and active states to maintain visual hierarchy.
• Don't mix rounded radii inconsistently (e.g., lg radius on buttons but DEFAULT on cards)—use lg for all primary containers and buttons, DEFAULT for inputs, full for badges.
• Don't use shadows larger than 0 8px 32px 0 rgba(0, 0, 0, 0.25)—excessive shadow depth contradicts the brand's minimalist, precision-focused aesthetic.
• Don't apply body-md typography to headlines or display text—use the Outfit family (headline-lg, headline-md, title-lg) for all prominent text to maintain visual hierarchy.
• Don't disable focus indicators or remove outline styles on interactive elements—maintain clear keyboard navigation and accessibility compliance with 3px rgba(40, 116, 252, 0.1) focus glow.