Pollock

Overview

Pollock is a Japanese IT solutions and human capital company that transforms career creation through vibrant, playful design and data-driven business transformation. The brand embodies 'Energetic Optimism'—a design philosophy that celebrates human potential through bold, warm color accents (particularly luminous orange #ff6900), friendly geometric illustrations, and a clean, modern interface. The aesthetic is simultaneously professional and approachable, avoiding corporate sterility by infusing every interaction with personality and warmth. The emotional response is one of possibility and forward momentum: users feel empowered to take action, whether exploring career opportunities or understanding business solutions.

The brand voice is conversational yet authoritative, speaking directly to ambitious professionals and forward-thinking enterprises. Pollock uses clear, direct language without corporate jargon, favoring concrete examples over abstract promises. The vocabulary emphasizes 'creation' (天職を創造する—creating your true calling), 'challenge' (チャレンジ), and 'data-driven insight' (Data生まれた挑戦). Example sentence in Pollock's voice: 'Your next challenge starts here—explore roles that match your ambition, backed by real hiring data.'

Colors

The Pollock color system centers on a warm, energetic primary accent—luminous orange (#ff6900)—that appears on all primary CTAs, key navigation elements, and brand-defining interactive states. This orange is the signature color that makes Pollock instantly recognizable and drives user attention toward action. Secondary accents include a vibrant cyan-blue (#0693e3) for supporting information and data visualization, and a rich purple (#9b51e0) for tertiary highlights and status indicators. The error state uses a vivid red (#cf2e2e) for critical warnings. The surface stack is built on pure white (#ffffff) backgrounds with a carefully calibrated gray hierarchy: surface-container-low (#f0f0f0) for subtle section separation, surface-container (#e9ecef) for card backgrounds, and surface-container

Typography

The Pollock type system pairs Lexend (a geometric, friendly sans-serif from Google Fonts) for headlines and UI labels with Noto Sans JP for body text and Japanese content, creating a dual-language hierarchy that feels cohesive yet distinct. Lexend's generous letter-spacing and open letterforms reinforce the brand's optimistic, approachable personality, while Noto Sans JP's clarity ensures legibility at all sizes. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements like '天職を創造する' and sets an aspirational tone. Headline-lg (40px, 600 weight) anchors section introductions. Body-md (16px, 400 weight, 24px line-height) is the workhorse for content blocks and maintains 1.5 line-height for comfortable reading. Labels use Lexend at 14px with 0.01em letter-spacing to

Layout

Pollock uses a fluid 12-column grid with a maximum container width of 1400px, allowing content to breathe on large screens while maintaining focus on medium devices. The spacing scale is semantic and hierarchical: unit (8px) forms the baseline, with sm (12px) for tight component spacing, 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, creating a 48px total horizontal padding on desktop. White-space is generous—sections are separated by lg spacing (40px) vertically to create visual rhythm and prevent cognitive overload. Cards and containers use md padding (24px) internally, with lg spacing between card groups. This rhythm reinforces the bran

Elevation & Depth

Depth in Pollock is conveyed through a subtle shadow hierarchy and strategic use of layering, avoiding heavy drop-shadows that would feel dated. Level 1 (Base/Surface) has no shadow—pure white background at #ffffff. Level 2 (Standard Cards & Containers) uses elevation.md: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, barely-perceptible lift that separates content from the background. Level 3 (Elevated Cards, Modals, Hover States) uses elevation.lg: 0 16px 40px rgba(0, 0, 0, 0.12), a larger blur radius (40px) that creates atmospheric depth without harsh shadows. On hover, cards transition fro

Shapes

Pollock employs 'Soft-Technical Geometry'—a shape philosophy that balances precision with approachability. Buttons and interactive elements use rounded.lg (1rem / 16px) for a friendly, modern feel that avoids sharp corners without appearing overly rounded. Cards and containers use rounded.xl (1.5rem / 24px) to create a softer, more inviting appearance. Input fields use rounded.DEFAULT (0.5rem / 8px) for a more restrained, functional look that signals form-like behavior. Badges and pills use rounded.full (9999px) for maximum roundness, emphasizing their role as lightweight, non-intrusive labels

Components

Action Elements Buttons are the primary interaction driver in Pollock. The button-primary component uses the signature orange (#ff6900) background with white text, 14px Lexend at 600 weight, 10px vertical / 14px horizontal padding, and a 40px height for touch-friendly targets. On hover (button-primary-hover), the background shifts to #ff8533 (a slightly lighter orange) over 200ms, providing clear feedback without a shadow. The button-secondary variant uses a transparent background with a 2px solid orange border and orange text, allowing for visual hierarchy when multiple CTAs are present. On hover, secondary buttons fill with primary-container (#ffe4cc) and shift text to on-primary-container (#663300), creating a smooth transition. All buttons use rounded.lg (1rem) for consistency.

##

Do's and Don'ts

**Do**

• Do use the primary orange (#ff6900) on all primary CTAs and key interactive elements—it is the signature brand color and should be immediately recognizable.
• Do maintain generous white-space using the lg spacing token (40px) between major sections to reinforce the brand's optimistic, unhurried aesthetic.
• Do pair Lexend headlines with Noto Sans JP body text to create a cohesive dual-language hierarchy that feels both modern and approachable.
• Do apply elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers for subtle depth without heavy shadows that would feel dated.
• Do use rounded.lg (1rem) on buttons and rounded.full (9999px) on badges to create visual hierarchy through shape—more interactive elements are rounder.

**Don't**

• Don't use the primary orange on secondary or tertiary elements—reserve it exclusively for primary CTAs and key brand moments to maintain visual focus.
• Don't apply heavy drop-shadows (e.g., 0 16px 40px with high opacity) to standard cards; use elevation.md instead for a modern, clean appearance.
• Don't mix Lexend and Noto Sans JP randomly; use Lexend for headlines and UI labels, Noto Sans JP for body content and Japanese text.
• Don't reduce padding or spacing below the sm token (12px) for interactive elements—maintain touch-friendly targets and breathing room.
• Don't use pure black (#000000) text on primary orange backgrounds; always use white (on-primary: #ffffff) for maximum contrast and accessibility.