CHOCOLATE Inc.

Overview

CHOCOLATE Inc. is a Tokyo-based entertainment content production company that creates diverse media experiences to build an exciting, joyful future. The brand embodies a philosophy centered on 'tanoshimi' (楽しみ—the anticipation and joy of looking forward to something), positioning entertainment as a vital emotional driver in daily life. The design aesthetic is rooted in 'Energetic Minimalism'—a high-contrast, typographically bold approach that pairs a pure white canvas (#ffffff) with an electric lime-yellow accent (#ebff00) and sharp black typography. This creates visual tension and energy while maintaining clarity and directness. The UI communicates confidence, playfulness, and forward momentum through aggressive use of geometric shapes, bold letter-spacing (0.05em to 0.075em), and dynamic hover animations that scale and shift at 500ms intervals. Voice: direct, enthusiastic, and culturally grounded. Example: 'たのしみな未来をつくる—we craft the future you look forward to.'

Colors

The color system is deliberately binary and high-contrast, reflecting CHOCOLATE's bold brand personality. Primary (#ebff00) is the signature accent—a vivid, electric yellow used exclusively on call-to-action buttons, active link states, and highlight backgrounds. It appears frequently in hover states via the primary-fixed-dim variant (#d9e600), creating a subtle depth shift. On-primary is pure black (#000000), ensuring 21:1 contrast ratio for accessibility and visual punch. The surface stack is anchored in white (#ffffff) for the main canvas, with subtle grays (surface-container-highest #dddddd, surface-container-high #e5e5e5) reserved for hover states and secondary containers. Secondary (#888888) and outline (#aaaaaa) provide mid-tone anchors for disabled states, borders, and tertiary tex

Typography

The type system pairs two distinct font families to create visual hierarchy and cultural authenticity. SharpSans-Bold (a geometric, high-contrast sans-serif) is reserved for headlines, labels, and call-to-action text, delivering the brand's bold, forward-facing personality. TazuganeGothicStdN-Medium (a Japanese Gothic typeface) serves as the body and supporting text, honoring the brand's Tokyo roots and Japanese-language primary audience. Display and headline levels use aggressive letter-spacing (−0.04em to −0.02em) to compress and intensify the visual impact, while body text employs 0.05em to 0.075em spacing to improve readability and create a deliberate, measured rhythm. Line heights are tight (1.4 to 1.57 for headlines, 1.69 to 2 for body) to reinforce the energetic, compact aesthetic.

Layout

The layout system uses a fixed 900px container max-width (referenced as container-max in spacing tokens) centered on the viewport, creating a focused, gallery-like presentation. The grid operates on a 12-column system with a 24px gutter (md spacing), allowing flexible 2-column, 3-column, and 6-column layouts depending on content density. White-space is generous and intentional: section separation uses lg spacing (40px) on mobile, scaling to 64px on desktop, creating visual breathing room that emphasizes the content hierarchy. Padding follows a consistent pattern: 15px (sm) on mobile, 24px (md) for standard sections, and 50px (lg) on desktop for hero and feature sections. The rhythm is reinforced through the use of full-viewport sections (h-full-svh) for hero content, creating a cinematic s

Elevation & Depth

Depth is achieved through a restrained shadow system that prioritizes flatness and clarity over dimensional layering. Level 1 (Base/Surface): no shadow, pure white background (#ffffff). Level 2 (Card/Container): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), creating a subtle lift without visual weight. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), used on interactive elements during hover states and modal overlays. Level 4 (Maximum Elevation): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), reserved for floating modals and critical overlays. Hover interactions combine shadow

Shapes

The shape philosophy is 'Geometric Precision'—combining sharp, minimal corner radii with occasional full-circle elements to create visual rhythm and approachability. Buttons and inputs use rounded.lg (0.6rem / 9.6px), providing just enough softness to feel contemporary while maintaining the sharp, technical aesthetic. Cards and thumbnails use the same 0.6rem radius for consistency. Small UI elements (badges, tags) use rounded.full (9999px) for a playful, pill-shaped appearance that contrasts with the geometric precision elsewhere. The DEFAULT radius (0.2rem / 3.2px) is used sparingly on form i

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 44px height (padding: 14px 20px) across all variants. The primary button (button-primary) uses background: {colors.primary} (#ebff00) with text-color: {colors.on-primary} (#000000), rounded: {rounded.lg} (0.6rem), and typography: {typography.label-md} (SharpSans-Bold, 14px, 700 weight, 0.05em letter-spacing). On hover, the button transitions to button-primary-hover with background: {colors.primary-fixed-dim} (#d9e600) and applies transform: scale(1.02) over 500ms with cubic-bezier(0.33, 1, 0.68, 1) easing. Secondary buttons use transparent background with a 1px solid border in {colors.outline} (#aaaaaa), maintaining the same height and padding. Ghost buttons are borderless with transparent background and

Do's and Don'ts

**Do**

• Do use the primary yellow (#ebff00) exclusively on interactive elements (buttons, active links, highlights) to maintain visual hierarchy and guide user attention.
• Do apply letter-spacing: 0.05em to 0.075em on body text and 0.05em on labels to reinforce the brand's deliberate, measured typography rhythm.
• Do combine transform: scale(1.02) with 500ms cubic-bezier(0.33, 1, 0.68, 1) easing on all hover states to create a unified, energetic interaction language.
• Do use the 900px container-max width consistently across all pages to maintain visual focus and gallery-like presentation.
• Do pair SharpSans-Bold for headlines and CTAs with TazuganeGothicStdN-Medium for body text to honor the brand's Tokyo roots and cultural authenticity.

**Don't**

• Don't use the primary yellow (#ebff00) on non-interactive elements or backgrounds—it must remain reserved for CTAs and active states to maintain visual clarity.
• Don't apply shadows deeper than {elevation.md} (0 4px 12px rgba(0, 0, 0, 0.08)) on standard cards; the flat aesthetic depends on minimal depth layering.
• Don't use border-radius values other than the defined scale (0.2rem, 0.6rem, 9999px); avoid arbitrary radius values that break the geometric precision system.
• Don't apply transitions longer than 500ms on interactive elements; the brand's energy depends on snappy, responsive feedback.
• Don't mix font families within a single text element; maintain clear separation between SharpSans-Bold (headlines/labels) and TazuganeGothicStdN-Medium (body/supporting text).