AGS Consulting

Overview

AGS Consulting embodies a philosophy of 'Professional Clarity'—a design aesthetic that prioritizes institutional trust, legibility, and authoritative presence over decorative flourish. The brand serves Japan's most demanding corporate clients (121 CPAs, 124 tax professionals, 420 international engagements annually), and the UI reflects this: clean geometric layouts, a restrained primary blue (#0065ac) reserved exclusively for interactive CTAs and key navigation, and generous white space that conveys confidence and precision. The emotional response is one of competence and accessibility—users should feel they are engaging with a firm that has mastered complexity and made it navigable.

The voice is formal yet approachable, technical yet human. Sentences are direct and outcome-focused: 'Add more knowledge and enthusiasm to business management.' Vocabulary avoids jargon when possible, but embraces domain-specific terms (M&A, IPO, transfer pricing) without apology. The brand personality is that of a senior partner who has seen every scenario and can distill it into actionable insight. Example sentence in brand voice: 'Our 200 annual IPO engagements mean your capital strategy is guided by practitioners, not theorists.'

Colors

The color system is built on institutional restraint: a dominant white (#ffffff) and light gray palette (#f4f4f4, #e5e5e5, #dadddf) creates a calm, professional canvas. The primary accent is a confident corporate blue (#0065ac), used exclusively on primary CTAs ('お問い合わせ', 'Contact'), key links, and active states—never on backgrounds or body text. A secondary navy (#0d4166) provides depth for secondary actions and container backgrounds, while a warm gray (#777777) serves as a tertiary accent for metadata and supporting text. The outline color (#a3aaae) is used for borders and dividers, maintaining visual separation without harshness. Shadows use rgba(0, 0, 0, 0.15) at 3px blur for card elevation, rgba(0, 0, 0, 0.12) at 2px for subtle separation, and rgba(0, 0, 0, 0.1) at 5px for deeper moda

Typography

The type system uses Noto Sans JP exclusively, a humanist sans-serif optimized for Japanese and Latin scripts, ensuring visual consistency across bilingual content. Display (56px, 700 weight, -0.02em tracking) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 600 weight) structures page sections, while headline-md (28px, 600 weight) breaks content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and hero copy, providing generous leading (1.56x) for readability over complex backgrounds. Body-md (16px, 400 weight, 24px line-height) is the workhorse for standard paragraph text and card content. Label-md (14px, 500 weight, 0.01em tracking) is applied to button text, form labels, and navigation item

Layout

The layout follows a 12-column grid system with a maximum container width of 1220px, centered with equal margins. The gutter width is 24px, applied consistently between columns and as horizontal padding on the container. Page rhythm is established through lg spacing (40px) between major sections (hero, news, services), md spacing (24px) between subsections, and sm spacing (12px) between related elements within a card or list. The hero section uses a full-width background with 80px vertical padding and 24px horizontal gutter, creating a breathing room that emphasizes the hero copy and CTAs. Cards and containers use 24px internal padding (md spacing) with 5px border-radius, maintaining a soft-edged, approachable aesthetic. On mobile (max-width: 767px), the grid collapses to a single column,

Elevation & Depth

Visual hierarchy is achieved through a three-level shadow system that mimics subtle depth without creating harsh contrast. Level 1 (Base/Surface): no shadow; elements sit flush on the white background (#ffffff). Level 2 (Standard Card/Dropdown): box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), applied to cards, input fields, and dropdown panels; this creates a gentle lift of 2px with a 6px blur radius, suggesting the element is 1–2mm above the surface. Level 3 (Modal/Elevated): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used for modals, hero overlays, and prominent cards; the 3px offset and 8px blur

Shapes

The shape philosophy is 'Soft Institutional'—a balance between the precision of corporate geometry and the approachability of rounded corners. Buttons and form inputs use 4px border-radius (DEFAULT), a subtle rounding that feels modern without being playful. Cards and containers use 5px border-radius (md), slightly more generous, suggesting openness and accessibility. Modals and elevated surfaces use 8px border-radius (lg), creating a distinct visual tier for important content. The header uses 0px border-radius on top and 5px on bottom corners (border-radius: 0 0 5px 5px), a distinctive detail

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 48px height with 12px vertical and 24px horizontal padding. Primary buttons (button-primary) use the brand blue (#0065ac) background with white text, label-md typography (14px, 500 weight), and 4px border-radius. On hover (button-primary-hover), the background shifts to the darker primary-container (#045994) with a 0.3s ease-out transition, providing clear feedback. Secondary buttons (button-secondary) use the navy (#0d4166) background, maintaining the same height and padding, for actions like 'See reasons' or 'View services'. Ghost buttons (button-ghost) have a transparent background with a 1px primary blue border and primary blue text, used for tertiary actions; on hover, they gain a light gray backgro

Do's and Don'ts

**Do**

• Do use primary blue (#0065ac) exclusively on CTAs, active states, and key interactive elements—never on backgrounds or body text.
• Do apply 24px (md spacing) as the default padding inside cards and containers; use 12px (sm spacing) for tighter groupings within a card.
• Do transition all interactive states (hover, focus, active) over 0.3s ease-out to signal interactivity without jarring the user.
• Do maintain a minimum 48px height for all buttons and interactive targets to meet accessibility and touch-target standards.
• Do use Noto Sans JP exclusively for all typography, including headings, body, and labels, to ensure consistency across Japanese and English content.
• Do apply 2px shadow (0 2px 6px rgba(0, 0, 0, 0.12)) to cards and dropdowns; reserve 3px shadow (0 3px 8px rgba(0, 0, 0, 0.15)) for modals and elevated surfaces only.

**Don't**

• Don't use the primary blue (#0065ac) on backgrounds, body text, or non-interactive elements; it is reserved for CTAs and active states.
• Don't apply border-radius greater than 8px except for full-circle badges (50%); maintain the soft-institutional aesthetic.
• Don't use gradients or transparency overlays for depth; rely on the three-level shadow system (0px, 2px, 3px) to convey hierarchy.
• Don't mix typefaces; Noto Sans JP is the sole font family for all text, including headings and labels.
• Don't reduce padding below 12px (sm spacing) inside containers; white space is a design element that conveys professionalism.
• Don't apply transitions longer than 0.3s on interactive elements; faster feedback (0.2s) is preferred for focus states on inputs.