Design System: /zeroz（ゼロズ）公式サイト

1. Visual Theme & Atmosphere

• Overall feeling: Scientific, premium, and wellness-oriented, with a restrained editorial tone and a “product as concept” presentation.
• Visual density: Moderate to spacious; large headline blocks are balanced by generous breathing room and strong section breaks.
• Brand posture: Confident and informative, leaning on research, credibility, and a consumer-health sensibility rather than lifestyle playfulness.
• Signature motifs: Dark charcoal canvas, vivid green brand accent, clean sans-serif typography, chapter-based storytelling, and interview-led proof points.

Key Characteristics

• High-contrast dark mode aesthetic with bright green CTA emphasis
• Editorial storytelling broken into numbered chapters and thematic sections
• Minimal surface treatment: flat colors, no decorative shadows, sharp corners
• Product and science credibility reinforced through interviews, research, and structured content blocks

2. Color Palette & Roles

| Role | Semantic Name | Value | Usage | | --- | --- | --- | --- | | Primary action | Brand Green | #00A852 | Primary CTAs, accent highlights, logo color | | Accent | Link Green | #0A4F2C | Links and supporting interactive text | | Surface | Deep Charcoal | #111312 | Main background / dark surfaces | | Text | Text Dark (observed token) | #111312 | Provided in branding JSON, but likely not used as readable text on dark background; treat as raw token evidence | | Border | Neutral Gray | #9CA3AF | Secondary dividers, metadata, subtle UI contrast |

Primary

• #00A852 as the main brand action color and signature accent
• #0A4F2C as a supporting dark green for link-style interaction and subdued emphasis

Interactive

• Links and interactive highlights favor green rather than blue
• Hover/focus colors are not explicitly evidenced; infer a darker or lighter green variant only if needed
• Interactive emphasis should remain minimal and brand-consistent, without heavy underlines or ornamental effects

Neutral Scale

• #111312 is the dominant neutral foundation for the site background
• #9CA3AF is the observed secondary neutral for subdued UI text or borders
• White (#FFFFFF) appears in button text and should be treated as the high-contrast neutral text color

Surface & Overlay

• Surface token: Deep Charcoal (#111312)
• Overlay token: Not explicitly observed; likely a transparent black overlay or dimmed media treatment if used

Theme Modes

If the product supports light and dark appearance modes, document both explicitly rather than collapsing them into one blended palette.

Light Mode

• Background: Not evidenced
• Surface: Not evidenced
• Text: Not evidenced
• Accent: #00A852
• Notes: Firecrawl reports colorScheme: dark, so light mode is not confirmed from evidence.

Dark Mode

• Background: #111312
• Surface: #111312
• Text: White (#FFFFFF) for CTA text and high-contrast copy; raw token data also lists #111312 as textPrimary, but that conflicts with readability and should be treated cautiously
• Accent: #00A852
• Notes: Dark mode is the documented primary appearance. Use high-contrast white content over the dark base with green for actions.

Shadows & Depth

• Border/ring treatment: Very light or none; the system reads as flat and crisp
• Card shadow stack: None observed for buttons; depth is likely expressed through image blocks and spacing rather than shadow
• Focus treatment: Not directly evidenced; likely a simple ring or outline in brand green if implemented

3. Typography Rules

Font Family

• Primary: TazuganeGothicStdN-Medium
• Monospace: Not evidenced
• OpenType Features: Not evidenced; prioritize clean, modern Japanese body composition and neutral Latin headings

Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | | --- | --- | --- | --- | --- | --- | --- | | Hero headline | HelveticaNowDisplay-Regular | 16px / 30px observed across h1/h2 tokens | Regular | Not evidenced | Not evidenced | English-led display copy; likely used for impact headlines and section intros | | Section heading | HelveticaNowDisplay-Regular | 30px | Regular | Not evidenced | Not evidenced | Strong chapter headings and editorial section headers | | Body | TazuganeGothicStdN-Medium | 15px | Medium | Not evidenced | Not evidenced | Japanese reading text and explanatory content | | Label / Eyebrow | TazuganeGothicStdN-Medium | Not evidenced | Medium | Not evidenced | Not evidenced | Chapter labels, category markers like “About / Concept” | | Caption / Meta | TazuganeGothicStdN-Medium or HelveticaNowDisplay-Regular | Not evidenced | Medium/Regular | Not evidenced | Not evidenced | Small supporting labels, dates, and content metadata |

Principles

• Use a two-font system: display sans for headlines, Japanese Gothic for reading content
• Keep hierarchy bold through size and spacing rather than heavy decorative styling
• Let line breaks carry editorial rhythm; the page uses stacked, short-line compositions frequently

4. Component Stylings

Buttons and Links

• Primary CTA: Green-filled button with white text, square corners, no shadow
• Secondary CTA: Dark button treatment with minimal contrast; evidence suggests a darker surface variant rather than an outlined style
• Text links: Brand-green or dark-green text links, typically clean and understated
• Hover and active feel: Likely subtle; no evidence of motion-heavy or glossy interaction states

Cards and Containers

• Surface style: Flat, image-forward, and minimally framed
• Radius: 0px; sharp corners are explicit in branding data
• Border: Not prominent; may rely on spacing and contrast instead of outlines
• Shadow or elevation: None on buttons; card elevation appears absent or very subtle
• Internal spacing: Generous vertical spacing between content blocks and chapter sections

Inputs and Interactive Controls

• Input treatment: Not evidenced
• Focus behavior: Not evidenced; use simple high-contrast ring if needed
• Selection states: Not evidenced

Navigation

• Structure: Section-based navigation and content directory behavior, with clear topical grouping
• Background treatment: Dark background, blending into the page canvas
• Link style: Minimal, likely green or white depending on context
• Sticky or scroll behavior: Not directly evidenced; page appears designed for long-form scrolling with anchored content blocks

Image Treatment

• Screenshot treatment: Not evidenced
• Photography or illustration style: Large hero imagery, interview portraits, and product/texture visuals
• Border and radius treatment: Sharp corners; images appear full-bleed or card-like without rounded frames

Distinctive Components

• Chapter-based editorial sections with numbered progression
• Interview showcase cards with portrait imagery, role labels, and paired article links
• Science-and-product narrative blocks that alternate explanatory text with supporting visuals

5. Layout Principles

Spacing System

• Base unit: 4px
• Repeated spacing values: Multiples of 4px; larger section gaps likely built from 16px, 24px, 32px, and beyond

Grid & Container

• Grid logic: Single-column editorial flow with modular card sections and thematic grouping
• Max content width: Not evidenced
• Section spacing: Prominent vertical separation between chapters and feature groups

Whitespace Philosophy

• Whitespace philosophy: Use space to signal calm, credibility, and readability
• Alignment tendencies: Left-aligned, stacked, and highly legible
• Content width behavior: Narrow-to-medium text blocks for reading comfort; wider media sections for emphasis

Border Radius Scale

• Micro: 0px
• Standard: 0px
• Large: 0px
• Pill: Not evidenced; primary evidence points to fully square geometry

6. Depth & Elevation

| Level | Treatment | Use | | --- | --- | --- | | Flat | Solid dark background, no visible shadow | Core page canvas and content sections | | Ring | Not explicitly evidenced; likely green or neutral outline if used | Focus and accessibility states | | Card | Flat image/content blocks with no shadow | Interview cards and content modules | | Focus | High-contrast outline or ring, ideally brand green | Keyboard focus and interactive affordance |

Depth Principles

• Surface hierarchy: Built primarily through contrast, typography, and spacing
• Shadow language: Minimal to none
• Blur, glass, or overlay behavior: Not evidenced
• When depth is used versus avoided: Depth is mostly avoided in favor of a clean, scientific, premium flat UI

7. Do's and Don'ts

Do

• Use #00A852 for the main action and brand emphasis
• Keep corners square and surfaces flat
• Use strong editorial typography with clear chapter structure
• Favor dark backgrounds with high-contrast content

Don't

• Don’t introduce rounded corners or soft card shadows
• Don’t use playful gradients or bright multicolor palettes
• Don’t overcomplicate layouts with dense chrome or heavy UI framing

8. Responsive Behavior

Breakpoints

| Name | Width | Key Changes | | --- | --- | --- | | Mobile | Not evidenced | Likely stacked single-column sections, smaller hero imagery, and simplified nav | | Tablet | Not evidenced | Likely maintains editorial flow with moderate image resizing | | Desktop | Not evidenced | Expanded long-form composition with larger headlines and multi-card sections |

Touch Targets

• Use large, clearly separated tap targets for chapter cards and CTAs
• Keep spacing generous enough to prevent accidental taps in content-heavy areas

Collapsing Strategy

• Desktop behavior: Feature-rich editorial layout with visible section modules and large imagery
• Tablet behavior: Likely retains the same hierarchy while reducing horizontal density
• Mobile behavior: Stack content vertically, prioritize readability, and preserve CTA visibility
• Breakpoint-driven component changes: Interview grids and multi-link blocks likely collapse into single-column stacks
• Touch target and spacing adjustments: Increase vertical spacing and preserve a minimum comfortable tap area

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: #00A852
• Background: #111312
• Heading text: White (#FFFFFF) or strong light text over dark canvas
• Body text: White/light neutral on dark backgrounds; Japanese body font uses TazuganeGothicStdN-Medium
• Border or ring: #9CA3AF
• Accent: #00A852

Quick Summary

This is a dark, editorial, science-forward brand system for a wellness product site.
The visual language is minimal, flat, and premium, with square corners and little to no shadow.
Green (#00A852) is the signature action and brand color, used for CTAs and emphasis.
Typography combines a display sans for headlines with a Japanese Gothic body font for reading clarity.
The layout relies on chapter-based storytelling, large imagery, and spacious vertical rhythm.
Overall tone: credible, calm, informative, and consumer-health focused.

Example Component Prompts

• Hero: “Create a dark editorial hero with a large stacked headline, short supporting copy, and a vivid green CTA, using square corners and generous whitespace.”
• Card: “Design a flat interview card with a portrait image, role label, person name, and two text links, all in a minimal square-corner layout.”
• Navigation: “Build a restrained dark navigation bar with simple text links and strong hierarchy, avoiding decorative effects.”
• Button or badge: “Use a square green button with white text and no shadow for the primary action; keep secondary actions dark and understated.”

Ready-to-Use Prompt

Design a dark, flat editorial landing page for a Japanese wellness brand using #111312 as the background, #00A852 as the primary action color, square corners, minimal shadows, and a typography system that combines HelveticaNowDisplay-Regular for headlines with TazuganeGothicStdN-Medium for body copy. Structure the page as chapter-based storytelling with large imagery, calm spacing, and a credible science-forward tone.

Iteration Guide

1. Preserve the square geometry, dark canvas, and green primary action before adding any flourish.
2. Keep typography and spacing editorial and restrained; avoid ornamental UI patterns.
3. If adding new components, match the existing flat, high-contrast, low-shadow language.

Optional Appendix: Interaction Patterns

• Scroll behavior: Long-form scrolling with chapter progression and repeated thematic sections
• Hover behavior: Likely subtle color shifts or underline changes only
• Click behavior: Direct, informative navigation into related content and interviews
• Animation tone: Not evidenced; if used, keep it minimal and purposeful

Optional Appendix: Content & Messaging Patterns

• Headline pattern: Short, concept-led statements with strong line breaks and thematic framing
• CTA language: Action-oriented but calm; e.g. product/store or content exploration
• Trust signal pattern: Science, research, experts, and interviews with real people
• Voice and tone: Professional, explanatory, and confident, with a wellness/innovation perspective

Optional Appendix: Observed Pages

• Homepage / landing content: Provided the overall storytelling structure, chapter system, product positioning, and CTA style
• Interview index and interview cards: Contributed the recurring portrait-card pattern, role labels, and article linking behavior
• Product and science sections: Contributed the content hierarchy, brand language, and evidence-backed tone