Gifu Nagara High School

Overview

Gifu Nagara High School's design system embodies 'Institutional Clarity with Human Warmth'—a refined aesthetic that balances the authority of a public educational institution with the approachability needed to engage prospective students and families. The brand personality is confident yet inviting: the interface communicates academic rigor through clean typography (Open Sans for headlines, Noto Sans JP for body text), while the signature forest-green accent (#02673A) signals growth, stability, and institutional pride. The visual language prioritizes legibility and hierarchy, avoiding unnecessary ornamentation in favor of purposeful whitespace (120px section padding, 24px gutters) and a restrained color palette anchored by near-black text (#1A1A1A) on white backgrounds. The hero section uses a warm beige gradient (#E4DCD5) to soften the institutional tone, creating a welcoming entry point before transitioning to the school's core messaging.

The brand voice is direct, informative, and student-centric. Sentences are declarative and action-oriented, avoiding jargon while maintaining formality appropriate to an educational context. Example: 'Explore our inquiry-based learning pathways and discover how Nagara High School prepares you for tomorrow's challenges.' The design system treats typography as the primary visual hierarchy tool—no decorative elements compete with content—and uses the green accent sparingly on interactive elements (buttons, menu triggers, focus states) to create clear affordances without visual noise.

Colors

The color system is built on a foundation of institutional neutrality with a single, purposeful accent. Primary (#02673A) is the forest green used exclusively for call-to-action buttons, the menu trigger (120px × 120px button in the header), focus states, and key interactive elements. This color conveys trust and educational authority while remaining distinct enough to guide user attention. The on-primary color is pure white (#FFFFFF), ensuring WCAG AAA contrast (21:1 ratio) on all interactive surfaces. Secondary surfaces use a carefully calibrated gray scale: surface-container (#E9ECEF) for hover states and disabled inputs, surface-container-high (#E0E0E0) for elevated cards, and outline (#DDDDDD) for borders and dividers. The hero section uses a warm, desaturated beige (#E4DCD5) as a tra

Typography

The type system uses a two-font pairing: Open Sans (400, 600, 700 weights) for all English-language headlines and navigation, and Noto Sans JP (400, 500, 700 weights) for Japanese body text and UI labels. This pairing respects the bilingual nature of the school while maintaining visual cohesion. Display-level headlines (96px, 600 weight, Open Sans) are reserved for page titles and hero copy; headline-lg (80px) is used for section headings with 0.01em letter-spacing to prevent crowding at large sizes. Body text defaults to 16px / 24px line-height in Noto Sans JP (400 weight), providing comfortable reading rhythm for dense content like school policies and event descriptions. Labels and UI text use 14px / 20px (label-md) or 12px / 16px (label-sm) with 0.01em to 0.05em letter-spacing to mainta

Layout

The layout system uses a 12-column grid with a max-width of 1344px (min(1344px, calc(100% - 2 × 24px gutter))) to accommodate both desktop and tablet viewports. The primary container padding is 24px on all sides, scaling down to 16px on mobile devices. Section spacing follows a consistent rhythm: major sections (hero, features, news) use 120px vertical padding (top and bottom), creating visual breathing room and allowing the eye to rest between content blocks. The hero section is an exception, using min-height: 900px to ensure full-viewport coverage on desktop. Card-based content (news items, feature blocks) uses 24px internal padding with 12px gaps between elements in grid layouts. The header is fixed at 7.5rem (120px) height, with scroll-padding-top: calc(7.5rem + 12px) applied to html a

Elevation & Depth

Depth in this system is achieved through subtle shadows and layering rather than color shifts. The base layer (Level 1) is the white background (surface, #FFFFFF) with no shadow. Level 2 (cards, input fields, dropdown panels) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, close shadow that suggests the element is slightly raised. Level 3 (modals, elevated cards on hover, menu overlay) uses box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), a larger, more diffuse shadow that conveys greater separation from the base. The menu overlay is the highest layer (z-index: 1000) and uses a se

Shapes

The shape philosophy is 'Functional Minimalism'—rounded corners are used sparingly and purposefully to soften institutional rigidity without introducing playfulness. Buttons and form inputs use border-radius: 4px (0.25rem), a subtle rounding that feels professional and modern without drawing attention. Cards and larger containers use border-radius: 0.5rem (8px) for slightly more breathing room. The menu button and close button in the header use border-radius: 0 (sharp corners) to emphasize their role as structural elements rather than content containers. Badges and pill-shaped elements use bor

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 8px vertical / 12px horizontal padding with 40px minimum height for touch targets. The primary button uses background: {colors.primary} (#02673A) with color: {colors.on-primary} (#FFFFFF), border: 0, and border-radius: 4px. On hover, the background darkens to #015C32 (a 10% shade shift) with opacity: 0.9 to provide tactile feedback without changing the button's footprint. The menu trigger button in the header is a special case: 120px × 120px, background: {colors.primary}, with three horizontal lines (burger icon) rendered as three 48px × 2px white bars with 12px gaps. Secondary buttons use background: transparent, border: 1px solid {colors.outline} (#DDDDDD), and text-color: {colors.primary}, allowing th

Do's and Don'ts

**Do**

• Do use the green accent (#02673A) exclusively on interactive elements (buttons, focus states, menu triggers) to create clear affordances and guide user attention.
• Do maintain 24px gutters and 120px section padding to create visual breathing room and reinforce the institutional, confident tone.
• Do pair Open Sans (headlines) with Noto Sans JP (body) to respect the bilingual context and maintain visual hierarchy across languages.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and elevated surfaces to create subtle depth without visual clutter.
• Do use near-black text (#1A1A1A) on white backgrounds and reserve #666666 for secondary/muted information to maximize readability.

**Don't**

• Don't use the green accent on non-interactive elements or as a background color; reserve it for buttons, focus states, and the menu overlay to maintain visual clarity.
• Don't apply border-radius greater than 8px to cards or containers; the system uses sharp corners (0px) for structural elements and subtle rounding (4-8px) for content.
• Don't mix font families within a single headline or body paragraph; use Open Sans for English and Noto Sans JP for Japanese, never blend them in a single text block.
• Don't use shadows heavier than 0 10px 30px rgba(0, 0, 0, 0.08); excessive shadows create visual noise and undermine the clean, institutional aesthetic.
• Don't apply color overlays or gradients to photography in the hero section beyond the existing beige fade (#E4DCD5); the images should remain the focal point.