TANAKA EYEWEAR

Overview

TANAKA EYEWEAR represents a philosophy of radical restraint and material honesty—eyewear crafted entirely by a single maker in East London using compressed paper composite. The design system embodies 'Artisanal Minimalism,' a movement that rejects mass production in favor of limited, intentional objects. The brand aesthetic is deliberately austere: a near-monochromatic palette of warm beiges (#f5f3f0), deep blacks (#000000), and grays (#696969, #505050) that evoke natural materials and the passage of time. The UI conveys quiet confidence—no gradients, no animations, no visual noise. Every interaction feels deliberate, like handling a finely crafted object. The emotional response is one of calm authority: this is a brand that trusts its craft enough to let silence speak.

The voice is precise, understated, and deeply knowledgeable. Sentences are short and declarative: 'Made once. Finished by time.' 'Forty-eight commissions a year.' 'Japan-born, London-based.' The vocabulary avoids marketing hyperbole—no 'revolutionary,' no 'premium,' no 'luxury.' Instead, the language focuses on material specificity (compressed paper composite), process (single-author), and constraint (limited commissions). The brand speaks as a maker, not a marketer, with the confidence of someone who has perfected a craft over years.

Colors

The color system is rooted in material authenticity and the visual language of natural aging. Primary (#000000) is pure black, used for text, CTAs, and structural elements—it commands attention without aggression. The surface stack ranges from warm cream (#f5f3f0) to deeper taupes (#d2cdc7), creating subtle depth without relying on bright whites or cold grays. Secondary (#505050) and tertiary (#d0d0d0) provide supporting accents for secondary actions and disabled states. The error color (#dc5d54) is a warm rust tone, consistent with the brand's natural material palette rather than a clinical red. On-surface text (#222222) is near-black for maximum legibility on light backgrounds (contrast ratio 18.5:1). The outline and outline-variant tokens (#999999, #c4c4c4) define borders and dividers w

Typography

The type system uses Roboto exclusively, a geometric sans-serif that balances precision with warmth—appropriate for a brand that values both craft and clarity. Display (56px, 600 weight, -0.02em tracking) is reserved for hero statements and brand moments; Headline-lg (36px, 600 weight) anchors major sections; Body-md (16px, 400 weight, 24px line-height) is the workhorse for product descriptions and long-form content. The letter-spacing decreases as size increases (display at -0.02em, body at 0.01em), following optical adjustment principles. Label-md (14px, 600 weight, 0.02em tracking) is used for navigation, buttons, and UI labels—the increased tracking (0.02em) adds formality and scannability. All text on dark backgrounds receives a subtle text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensu

Layout

The page uses a 12-column grid with a max-width of 1280px, creating a centered, contained experience that respects the brand's minimalist philosophy. Sections are separated by lg spacing (40px) vertically, creating clear rhythm without excessive whitespace. The gutter (24px) is consistent across all breakpoints, ensuring predictable alignment. The hero section occupies full-width with centered text and imagery, establishing visual hierarchy through scale and positioning rather than color. Product cards use md spacing (24px) for internal padding, creating breathing room around content. The container maintains consistent margins (md/24px on tablet, lg/40px on desktop) to prevent the layout from feeling cramped or overwhelming. Whitespace is treated as a design element—negative space around t

Elevation & Depth

Depth is achieved through subtle shadows and material layering rather than bright highlights or glassmorphism. Level 1 (Base): The surface (#f5f3f0) serves as the foundation with no shadow. Level 2 (Cards/Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border in outline-variant (#c4c4c4), creating a soft, grounded appearance. Level 3 (Modals/Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with a 1px border, lifting the element further without creating harsh contrast. Hover states increase shadow depth (md elevation: 0 3px 8px rgba(0, 0, 0, 0.15) → lg elevation: 0 8px 24

Shapes

The shape philosophy is 'Architectural Restraint'—sharp corners and minimal rounding that reflect the precision of the craft. Buttons and inputs use DEFAULT rounding (0.5rem / 8px), creating a subtle softness without appearing playful or organic. Cards use DEFAULT rounding (8px) to align with button styling, creating visual consistency. The full rounding (9999px) is reserved exclusively for badges and pill-shaped elements, where the circular form serves a functional purpose (status indicators). No element uses aggressive rounding (>1.5rem) or organic, irregular curves—the brand aesthetic rejec

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses black (#000000) background with light gray text (#dcdcdc), 48px height, 16px vertical padding, 24px horizontal padding, and a 1px border matching the background. On hover, the background shifts to primary-container (#2a2a2a) with on-primary-container text (#e9ecef), maintaining contrast while signaling state change. The transition is instantaneous (no animation) to reflect the brand's directness. Button-secondary uses a transparent background with a 1px outline-variant border (#c4c4c4) and primary text (#000000). On hover, the background fills with surface-container-high (#ddd9d4), creating a subtle fill effect. Links use primary text color (#000000) with a 1px bottom border; on hover, both text and border

Do's and Don'ts

**Do**

• Do use black (#000000) and warm neutrals (#f5f3f0, #d0d0d0) as the primary palette—these colors reinforce the handmade, material-focused brand identity.
• Do apply md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to interactive elements on hover to signal state change without animation.
• Do use Roboto 600 weight for all headings and labels—the geometric precision aligns with the brand's craft-focused aesthetic.
• Do maintain consistent spacing: md (24px) for internal padding, lg (40px) for section separation, gutter (24px) for container margins.
• Do use DEFAULT rounding (8px) for buttons, inputs, and cards to create visual consistency and reflect the precision of the craft.
• Do prioritize legibility: use on-surface (#222222) for body text on light backgrounds, maintain 18.5:1 contrast ratio minimum.

**Don't**

• Don't use bright accent colors (neons, saturated hues) in the primary interface—reserve accent colors for social links and status indicators only.
• Don't apply animations or transitions to buttons and links—the brand voice is direct and immediate, not playful or whimsical.
• Don't use pure white (#ffffff) as a surface background—use off-white (#fdfcfb) to reduce eye strain and reinforce the handmade aesthetic.
• Don't round corners aggressively (>1.5rem) or use organic, irregular shapes—the brand rejects skeuomorphism and trendy design.
• Don't add drop shadows to text or use text-shadow for decorative purposes—use text-shadow only for legibility (0 1px 2px rgba(0, 0, 0, 0.1)) on dark backgrounds.
• Don't use more than two font weights in a single section—Roboto 400 (body) and 600 (headings/labels) are sufficient for the entire system.