Marutomo Bonito Flakes

Overview

Marutomo is a heritage Japanese bonito flakes brand for premium pet nutrition, rooted in artisanal fishing traditions and contemporary pet wellness. The design system embraces 'Playful Minimalism with Heritage Accents'—a visual language that pairs clean, geometric Museo Sans typography with bold red (#ee1b2b) call-to-action elements, hand-drawn illustration details, and a warm cream canvas (#f3f1ec). The aesthetic evokes trust, authenticity, and joy: a brand that honors its fishing-boat origins while speaking directly to modern pet owners seeking quality. The UI feels approachable yet authoritative, never corporate.

The brand voice is warm, informative, and slightly whimsical. Marutomo speaks with the confidence of a family business that has perfected its craft over generations, but without pretension. Vocabulary favors concrete, sensory language: 'fresh-caught,' 'hand-selected,' 'ocean-sourced,' 'nutrient-rich.' Tone is conversational and encouraging, never clinical. Example sentence: 'Our bonito comes straight from the boat to your pet's bowl—no shortcuts, just pure ocean goodness.'

Colors

The color system centers on a warm, minimalist palette anchored by cream (#f3f1ec) surfaces and deep charcoal text (#262626), with a vivid red (#ee1b2b) reserved exclusively for primary CTAs, alerts, and brand-defining moments. This red is the signature accent—it appears on 'Shop Now' buttons, loyalty badges, and hero highlights, commanding attention without overwhelming the serene background. Secondary grays (#4d4d4d, #a3a3a3) provide hierarchy and support, while a warm taupe (#8b8986) adds sophistication to tertiary elements like labels and dividers. The surface stack progresses from bright (#fdfcfa) to dim (#e8e5df) to create subtle depth without relying on shadows; the container-high (#ddd9d2) is used for hover states and elevated cards. Primary (#ee1b2b) is never used for body text or

Typography

The type system uses Museo Sans (regular weight 500) for body and navigation, paired with Museo Sans Display (weight 700) for headlines and display text. This pairing communicates heritage and craftsmanship: Museo's geometric, slightly rounded letterforms feel contemporary yet timeless, appropriate for a brand that bridges tradition and modernity. Display text (72px, 700 weight, -0.03em letter-spacing) anchors hero sections and page titles with commanding presence. Headline-lg (48px, 700 weight) introduces major sections; headline-md (32px, 700 weight) breaks up content. Body text runs at 18px (body-lg) or 16px (body-md), both at 500 weight with 0.01em letter-spacing to maintain readability on the warm cream background. Labels (14px, 600 weight, 0.02em letter-spacing) are used for buttons,

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on desktop and full-width on mobile with 20px horizontal gutters. The spacing scale is semantic: unit (8px) is the base; xs (4px) for micro-spacing; sm (12px) for compact grouping; md (24px) for standard section padding; lg (40px) for major section separation; xl (64px) for hero and full-width breaks. Container padding uses md (24px) on desktop, sm (12px) on tablet, and xs (4px) on mobile. White-space is generous—sections are separated by lg (40px) or xl (64px) to create a serene, uncluttered rhythm. Cards and containers use md (24px) internal padding. The hero section spans full-width with a cream background, overlaid with hand-drawn illustration and photography; content is centered and uses display typography. Navig

Elevation & Depth

Depth is achieved through subtle shadows and surface-container layering rather than dramatic drop-shadows. Level 1 (Base): The cream background (#f3f1ec) with a subtle repeating texture (bg-[url('/img/bg.png')]) provides the foundation. Level 2 (Standard Cards): Cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border in outline-variant (#c9c5bd) to separate from the background. Level 3 (Elevated/Modals): Modals and floating elements use box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border treatment. Hover states on cards increase shadow to 0 4px 12px rgba(0, 0, 0, 0.08

Shapes

The shape philosophy is 'Soft-Technical Minimalism'—rounded corners are used sparingly and consistently to soften the geometric Museo Sans typography without introducing organic or playful curves. The rounded scale is: sm (0.25rem / 4px) for small inputs and tight components; DEFAULT (0.5rem / 8px) for standard buttons, cards, and form fields; md (0.75rem / 12px) for larger cards and containers; lg (1rem / 16px) for modals and prominent cards; xl (1.5rem / 24px) for hero sections and full-width containers; full (9999px) for badges and pill-shaped elements. Buttons use DEFAULT (8px) to maintain

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses background #ee1b2b, white text, 12px vertical / 24px horizontal padding, 44px height, and DEFAULT (8px) rounding. On hover, background shifts to #d61826 (darker red) and shadow increases from md to lg elevation (0 3px 8px → 0 8px 24px rgba(0, 0, 0, 0.12)). Active state uses #b01420 with no shadow lift. Transition duration is 300ms cubic-bezier(0.4, 0, 0.2, 1) for smooth feedback. Button-secondary uses transparent background, 2px solid border in #262626, and the same padding/height/rounding as primary. On hover, background becomes surface-container-high (#ddd9d2) and text color shifts to primary (#ee1b2b). All buttons use label-md typography (14px, 600 weight, 0.02em letter-spacing) for consistency.

###

Do's and Don'ts

**Do**

• Do use primary red (#ee1b2b) exclusively for CTAs, alerts, and brand moments—never for body text or large backgrounds.
• Do maintain generous white-space: separate major sections with lg (40px) or xl (64px) spacing to preserve the serene aesthetic.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels over busy backgrounds (product images, photography) for legibility.
• Do use Museo Sans Display (700 weight) for headlines and Museo Sans (500 weight) for body to reinforce the heritage-meets-modern positioning.
• Do transition interactive elements over 300ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, predictable feedback.
• Do layer surfaces using the container stack (lowest → low → DEFAULT → high → highest) rather than introducing new colors for depth.

**Don't**

• Don't use primary red (#ee1b2b) for disabled states, secondary buttons, or background fills—reserve it for active, clickable elements only.
• Don't apply blur or backdrop-filter effects; the system relies on shadows and color contrast for hierarchy.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); this breaks the geometric consistency.
• Don't set line-height below 1.4x font size; the warm aesthetic requires generous vertical breathing room.
• Don't mix Museo Sans with system fonts or sans-serif fallbacks in visible UI; always load the Typekit library (https://use.typekit.net/bnj6mfv.css).
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or blur larger than 24px; keep elevation subtle and refined.