RECORE

Overview

RECORE is a comprehensive reuse commerce platform that positions circular economy logistics as a seamless, purposeful digital experience. The brand serves enterprises and entrepreneurs entering the reuse sector, transforming complex supply-chain data into intuitive interfaces. The aesthetic movement is 'Purposeful Minimalism'—a clean, high-contrast visual language that prioritizes clarity and action over decoration. The UI evokes trust and efficiency: every element earns its place, every interaction feels intentional. The brand personality is direct, optimistic, and grounded in sustainability values without preachiness. Voice: confident, precise, action-oriented. Example sentence: 'Start your circular commerce platform in minutes—no legacy systems required.'

Colors

RECORE's color system balances a vibrant, energetic primary accent with a sophisticated neutral foundation. Primary (#dbdf1a) is a bold, lime-yellow used exclusively on call-to-action buttons, active states, and key interactive elements—it commands attention and signals 'click here' with unmistakable clarity. The on-primary text (#171918) is a near-black that ensures WCAG AAA contrast (21:1) on the bright yellow, maintaining legibility even at 12px. Secondary (#2d5a3d) is a deep forest green that appears in supporting UI elements, badges, and accent highlights, reinforcing the sustainability narrative without competing with primary. The surface stack is built on pure white (#ffffff) for maximum clarity, with a carefully calibrated gray progression: surface-container (#e9ecef) at 93% lightn

Typography

The type system pairs Zen Kaku Gothic New (a geometric, modern Japanese typeface) for headlines and display text with Noto Sans JP for body copy, creating a hierarchy that feels both contemporary and culturally grounded. Zen Kaku Gothic New's 900 weight at 60px (display) and 700 weight at 40px (headline-lg) delivers commanding presence for hero sections and section titles, with tight -0.02em letter-spacing that reinforces geometric precision. Body text uses Noto Sans JP at 16px / 24px line-height (body-md) with 400 weight for optimal readability at standard viewing distances; this pairing achieves 1.5 line-height ratio, exceeding WCAG AA standards. Labels and CTAs use Montserrat at 14px / 700 weight with 0.05em letter-spacing, creating a distinct, energetic voice for interactive elements.

Layout

RECORE uses a 12-column fluid grid with a fixed container max-width of 1280px, centering content on larger screens while maintaining full-width flexibility on mobile. The spacing scale is semantic: lg (40px) separates major sections, md (24px) groups related content blocks, and sm (12px) provides breathing room within components. The gutter is consistently 24px on desktop, reducing to 12px on tablets and 8px on mobile via media queries. White-space is treated as a design material—sections are generously separated with lg spacing to create visual rhythm and reduce cognitive load. The header occupies a fixed 72px height with 24px horizontal padding, anchoring navigation while allowing content to scroll beneath. Hero sections use full-viewport height with centered text overlays, leveraging hi

Elevation & Depth

Depth in RECORE is achieved through a restrained shadow system that emphasizes clarity over drama. Level 1 (base surfaces) uses no shadow—pure white or light gray backgrounds establish the foundation. Level 2 (standard cards and dropdowns) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation from the background while maintaining visual lightness. Level 3 (modals, elevated cards, and hover states) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), increasing perceived distance without introducing darkness. The header uses a minimal elevation.sm shadow (0 1px 2px rgba(0, 0

Shapes

RECORE employs 'Architectural Clarity'—a shape philosophy that favors subtle, functional rounding over organic curves. Buttons use rounded.DEFAULT (0.5rem / 8px) for a slightly softened corner that feels modern without sacrificing precision; this radius is applied uniformly to all button variants (primary, secondary, ghost). Cards and containers use rounded.md (0.75rem / 12px) to create gentle visual separation while maintaining a structured appearance. Input fields and form elements use rounded.DEFAULT (8px) to match buttons, creating visual cohesion in form layouts. Dropdowns and modals use

Components

Action Elements Buttons are the primary interaction vehicle. Primary buttons (button-primary) use the signature yellow (#dbdf1a) background with near-black text (#171918), 8px 20px padding, and 44px height—large enough for touch targets on mobile (minimum 44x44px per WCAG). On hover, the background darkens to #c9cc15 (a 5% darker shade) with a 200ms transition, providing clear feedback without animation fatigue. Active state (#a8ac00) is reserved for pressed/held states. Secondary buttons use a transparent background with a 1px border in outline color (#6c757d), maintaining visual hierarchy while offering alternative actions. On hover, secondary buttons fill with surface-container-low (#f0f0f0), creating a subtle toggle effect. All buttons use Montserrat 14px / 700 weight with 0.05em l

Do's and Don'ts

**Do**

• Do use primary yellow (#dbdf1a) exclusively on CTAs and active states—it is the visual anchor that guides user attention.
• Do maintain 24px (md spacing) between major sections and 12px (sm spacing) within component groups to create breathing room and reduce cognitive load.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to provide smooth, responsive feedback.
• Do use Zen Kaku Gothic New for headlines and Noto Sans JP for body copy—this pairing is culturally grounded and visually distinctive.
• Do ensure all text on the primary yellow button meets WCAG AAA contrast (21:1 minimum) by using near-black (#171918) as the text color.

**Don't**

• Don't use primary yellow on backgrounds, body text, or non-interactive elements—it is reserved for CTAs and active states only.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or use pure black in shadows; the system relies on subtle, optimistic depth.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—consistency in shape language is critical to brand recognition.
• Don't mix typefaces within a single headline or body paragraph; Zen Kaku Gothic New and Noto Sans JP have distinct roles and should not compete.
• Don't reduce padding below 8px or line-height below 1.4 in body text—legibility and accessibility are non-negotiable.