# Bm-sms.co.jp Design System

> A structured, corporate canvas defined by high-contrast typography and a singular golden-amber accent that anchors functional navigation.

**Source:** https://bm-sms.co.jp | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
The Bm-sms.co.jp system is a study in monochromatic utility, utilizing a pure white background (#ffffff) and deep charcoal text (#212529) to establish a professional, information-dense environment. The visual identity is punctuated solely by a specific golden-amber accent (#e5930e), which is reserved for primary interactive outlines and the brand's geometric logo mark. Typography relies on the system stack (-apple-system) for high performance and legibility, featuring bold 44px display headings and a rigid 8px spacing grid. Components are characterized by sharp 0px radii and thin 1px borders, creating a "flat" architectural feel without the use of drop shadows.

## Signature DNA
1. **The Amber Outline** (#e5930e): Unlike standard SaaS brands that use solid fills, this system uses a high-visibility amber for 1px button borders and chevron icons to signal interactivity against white space.
2. **Sharp Geometry**: A strict adherence to 0px border radii across all primary components (buttons, cards, sections) creates a formal, institutional aesthetic.
3. **System-Native Typography**: By utilizing `-apple-system`, the brand prioritizes OS-level familiarity and speed over custom font personality, reinforcing its role as an "information infrastructure."

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.surface}` | `#ffffff` | Page background, button backgrounds | 65 | 1.0 | Computed |
| `{color.text.primary}` | `#212529` | Primary body text, dark section backgrounds | 109 | 1.0 | `--bs-dark` |
| `{color.text.ink}` | `#000000` | High-contrast headings, logo text | 19 | 1.0 | `--wp--preset--color--black` |
| `{color.text.muted}` | `#4c4c4c` | Secondary descriptions | 10 | 0.6 | Computed |
| `{color.border.light}` | `#dee2e6` | Horizontal dividers, section separators | 5 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.accent.primary}` | `#e5930e` | Interactive borders, button text, logo mark | 14 | 0.8 | Resolved Primary |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.error}` | `#dc3545` | Error messages, validation | 1 | 0.5 | `--bs-red` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| `-apple-system` | 400, 500, 700 | Headings, UI, Navigation | Inter | System |
| `Helvetica Neue` | 400 | Body fallback, error states | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 44px | 52.8px | normal | 700 | Main section subtitles | `h2.subtitle` |
| `{type.h4}` | 18px | 32px | normal | 700 | Card titles, subheadings | `h4.h6.fw-bold` |
| `{type.body.lg}` | 18px | 32px | normal | 500 | Intro paragraphs | `p.h6` |
| `{type.body}` | 16px | 24px | normal | 400 | Default running text | `header.border-bottom` |
| `{type.nav}` | 16px | 80px | normal | 400 | Top navigation links | `a#dropdown1` |
| `{type.button}` | 16px | 24px | normal | 700 | CTA labels | `a.btn-outline-warning` |
| `{type.body.sm}` | 14px | 21px | normal | 400 | Footer links, metadata | `span.col-lg-2` |
| `{type.caption}` | 12px | 24px | normal | 400 | Legal text, list items | `li:nth-of-type(1)` |

### Principles
1. **Bold Display**: All major section headers use weight 700 to create clear vertical rhythm.
2. **Generous Line Height**: Body text at 18px uses a 32px line height (1.77x) to ensure legibility in information-heavy layouts.
3. **Monochrome Hierarchy**: Color is never used for emphasis in text; weight (700 vs 400) is the primary tool for hierarchy.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 24 |
| `{space.sm}` | 16px | 20 |
| `{space.md}` | 24px | 5 |
| `{space.lg}` | 48px | 16 |
| `{space.xl}` | 88px | 7 |
| `{space.section}` | 160px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Buttons, Cards, Header, Footer | 193 occurrences |
| `{radius.sm}` | 3px | Form inputs | 5 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elevation.flat}` | none | All surfaces (cards, buttons) | Observed across all pages |

## Components

### Tier 1: Foundational

#### Primary Button (Outline)
**Role:** Main call-to-action for section navigation.
**Pages observed:** Homepage, Pricing.
**Spec:** Background: #ffffff / Text: #e5930e / Border: 1px solid #e5930e / Radius: 0px / Padding: 16px 48px / Typography: 16px 700.
**States observed:** Default | Hover: captured (border remains #e5930e).

#### Global Header
**Role:** Site-wide navigation.
**Pages observed:** All.
**Spec:** Background: #ffffff / Text: #212529 / Border-bottom: 1px solid #dee2e6 / Height: 80px.
**States observed:** Default.

### Tier 2: Patterns

#### News Row
**Role:** Chronological list of company updates.
**Pages observed:** Homepage.
**Spec:** Background: #ffffff / Border-bottom: 1px solid #dee2e6 / Padding: 16px 0px / Date-text: #212529 / Category-badge: Border 1px solid #dee2e6.

#### Feature Card
**Role:** Business unit or service overview.
**Pages observed:** Homepage.
**Spec:** Background: #ffffff / Radius: 0px / Padding: 24px / Title: 18px 700 / Alignment: Center-aligned content.

### Tier 3: Surface-specific

#### Footer Navigation
**Role:** Multi-column site map.
**Pages observed:** All.
**Spec:** Background: #212529 / Text: #ffffff / Font-size: 14px / Column-gap: 24px.

#### Hero Section
**Role:** Primary landing message.
**Pages observed:** Homepage.
**Spec:** Background: #ffffff / Text: #212529 / Padding-top: 160px / Padding-bottom: 160px.

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1320px |
| Column Gutter | 24px |
| Section Vertical Gap | 160px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1200px+ | 4-5 column footer, horizontal nav |
| Mobile | <768px | Stacked news items, centered hero text |

## Imagery & decoration
- **Logo**: A geometric diamond grid composed of small amber (#e5930e) squares.
- **Photography**: Desaturated, high-key imagery often featuring cityscapes or professional environments with significant white overlays.
- **Avoids**: Rounded corners, drop shadows, and multi-color gradients.

## Do's
- Use `#e5930e` for all primary interactive borders.
- Maintain a strict `0px` border radius for all UI containers.
- Use `160px` vertical padding for major landing sections.
- Set all display headings to `-apple-system` weight `700`.
- Ensure a `1px` border of `#dee2e6` is used for horizontal section dividers.

## Don'ts
- **Wrong:** Using `#ffc107` (Bootstrap Yellow) for buttons. **Right:** Use `#e5930e`. **Reason:** Brand consistency.
- **Wrong:** Applying `border-radius: 4px` to cards. **Right:** Use `0px`. **Reason:** Brand DNA is strictly sharp-edged.
- **Wrong:** Using a drop shadow for card elevation. **Right:** Use a `1px` border or white space. **Reason:** The system is flat.
- Do not use the sub-brand orange (if any) in place of the parent amber `#e5930e`.

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #e5930e;
  --color-bg: #ffffff;
  --color-text: #212529;
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius-none: 0px;
  --space-unit: 8px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using the Bm-sms system: 1px border in #e5930e, white background, 0px radius, and 16px bold text."
- "Create a news list item with a 1px #dee2e6 bottom border, 16px padding, and #212529 text."
- "Design a hero section with 160px vertical padding, centered 44px bold heading, and a white background."

## Known gaps
- Hover and Active states for buttons were not fully captured in the computed style evidence.
- Mobile-specific menu transition logic was not observed.
- Form validation state colors (other than red) were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://bm-sms.co.jp | 1440px | 2026-06-06 |
| Pricing | https://bm-sms.co.jp/pricing | 1440px | 2026-06-06 |
| About | https://bm-sms.co.jp/about | 1440px | 2026-06-06 |