RING FIT

Overview

RING FIT is a personal training gym brand serving Fukui, Japan, dedicated to transforming fitness through thoughtful methodology and human-centered coaching. The design system embodies "Architectural Minimalism with Energetic Accents"—a philosophy that pairs a calm, professional gray foundation with a bold red signature color to convey both stability and transformation. The visual language evokes clarity, precision, and approachability: users encounter a serene, light-filled interface punctuated by confident red calls-to-action that signal momentum and commitment. The brand personality is direct yet warm, speaking to clients as partners in their fitness journey rather than subjects of instruction. Tone: conversational but authoritative, grounded in results. Example: "Your body remembers every rep. We make sure it counts."

Colors

The color system is anchored in a light, neutral foundation (#f4f4f3 surface, #1e1e1e on-surface text) that conveys professionalism and clarity, with a vibrant red primary (#f1352b) reserved exclusively for high-intent actions: primary CTAs, active states, and brand-defining moments. This red is never used for passive elements; it signals agency and commitment. The secondary color (#353e41, a near-black charcoal) provides depth for secondary buttons and structural elements, while the tertiary gray (#5d6365) supports labels and secondary text. The surface stack progresses from #eeeeee (container-lowest) through #bababa (container-highest), enabling subtle visual hierarchy without relying on shadows. Error states use #dc3232 (a clinical red distinct from the brand primary) to ensure accessib

Typography

The type system pairs Familjen Grotesk (a geometric sans-serif with distinctive character) for display and headline scales with Noto Sans JP (a humanist sans-serif optimized for Japanese) for body and label text. This pairing balances personality (Grotesk's geometric warmth in headlines) with legibility (Noto's proven performance at small sizes in mixed-language contexts). Display (60px, 700 weight, -0.04em tracking) commands attention on hero sections; headline-lg (40px, 600 weight) anchors major sections; body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at 1240px container width. All interactive labels use label-md (14px, 600 weight, 0.01em tracking) to signal clickability. On small labels over busy backgrounds (e.g., badges over hero imagery), apply text-shadow:

Layout

The layout system uses a 12-column fluid grid with a fixed max-width of 1240px, centered on the viewport. Container padding is consistently {spacing.gutter} (24px) on desktop, reducing to 16px on tablet and 12px on mobile. Section separation uses {spacing.lg} (40px) vertically to create breathing room between major content blocks; internal component spacing uses {spacing.md} (24px) for card-to-card relationships and {spacing.sm} (12px) for element-to-element proximity. The hero section spans full-width with asymmetric content: large display text (60px) on the left, hero imagery on the right, aligned at the vertical center. All container max-widths (1240px, 1230px, 1180px observed in the codebase) are normalized to 1240px for consistency. Whitespace is treated as a structural element, not a

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic depth effects. Level 1 (Base): flat surface (#f4f4f3) with no shadow. Level 2 (Cards, inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards and input fields to lift them 2-3px above the surface. Level 3 (Modals, popovers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), creating a more pronounced lift. Hover states transition smoothly (200ms ease-out) from Level 2 to Level 3, signaling interactivity. No blur effects or glassmorphism; shadows are sharp and directional (0 offset-x, positive offset-y) to maintai

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used sparingly and purposefully to soften the geometric precision of the type system without introducing organic softness. Buttons and primary CTAs use {rounded.DEFAULT} (0.5rem / 8px), a subtle curve that signals clickability without distraction. Cards and containers use {rounded.md} (0.75rem / 12px) for slightly more breathing room. Input fields use {rounded.DEFAULT} (8px) to align with buttons, creating a cohesive interaction family. Badges and pills use {rounded.full} (9999px) to denote status or metadata, visually distinct from

Components

Action Elements Buttons are the primary interaction primitive. **button-primary** uses {colors.primary} (#f1352b) background with white text, 12px horizontal padding, 48px height, and {rounded.DEFAULT} (8px). On hover, the background shifts to #ff6b5b (a lighter red) with a 200ms ease-out transition; on active/press, it darkens to #d92a1f. **button-secondary** mirrors the primary structure but uses {colors.secondary} (#353e41) for secondary actions (e.g., "Learn More"). **button-ghost** has a transparent background with a 1px solid primary-colored border and primary text; on hover, it gains a subtle 8% opacity fill (rgba(241, 53, 43, 0.08)) without changing the border, maintaining visual lightness. All buttons use {typography.label-md} (14px, 600 weight) for text, ensuring labels are s

Do's and Don'ts

**Do**

• Do use the primary red (#f1352b) exclusively for high-intent actions: primary CTAs, active states, and focus indicators. Never use it for passive elements or backgrounds.
• Do maintain the light surface foundation (#f4f4f3) as the default canvas; it conveys professionalism and ensures text legibility without relying on dark mode.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and inputs to create depth without introducing blur or glassmorphism effects.
• Do pair Familjen Grotesk headlines with Noto Sans JP body text to balance personality with legibility, especially in mixed-language (English/Japanese) contexts.
• Do use {spacing.lg} (40px) for section separation and {spacing.md} (24px) for component-level spacing to create a clear visual rhythm.
• Do transition interactive states (hover, focus, active) over 150–200ms with ease-out timing to signal responsiveness without feeling sluggish.

**Don't**

• Don't use the primary red for non-interactive elements, backgrounds, or decorative accents; reserve it for actions that drive user intent.
• Don't introduce drop shadows deeper than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) or use blur/glassmorphism effects; the system relies on clean, architectural clarity.
• Don't mix rounded corners inconsistently; use {rounded.DEFAULT} (8px) for buttons/inputs, {rounded.md} (12px) for cards, and {rounded.full} (9999px) only for badges.
• Don't exceed 1240px container width or deviate from the 12-column grid structure; consistency across breakpoints is essential for the architectural aesthetic.
• Don't use system fonts or fallback stacks; always load Familjen Grotesk and Noto Sans JP from Google Fonts to preserve the brand's distinctive type personality.
• Don't apply letter-spacing greater than 0.02em on body text; it degrades readability, especially for Japanese characters.