Ameblo Design System Deep-Dive

1. Brand Overview

Ameblo isn't trying to be minimal in the Western sense. This is a Japanese blogging platform, and it wears that identity proudly. There’s a friendly, community-first vibe baked into every pixel. The logo — “Ameba” in both English and Japanese — leans on brand heritage. It’s not screaming "tech startup"; it’s more "come hang out, post your thoughts, read others, feel at home."

The design philosophy feels pragmatic. Elements are clear, functional, and visually approachable. Colors are rooted in greens and neutrals with a few bright accents. Typography is very Japanese web — Hiragino Sans as the main typeface with Meiryo and Yu Gothic Medium as fallbacks. That’s a deliberate choice: it ensures clean rendering across devices and OSes in Japan.

You can sense the history in the design. Ameblo has been around for years, and rather than chasing trends, they’ve kept a consistent visual language. There’s no heavy animation. No oversized hero images. Instead, you get clear lists, rankings, and readable content blocks.

It’s a platform for consistency and trust — the design is a reflection of that. The greens convey brand personality (growth, community, friendliness) and blues highlight interactive elements. Whites and light grays are used as breathing space. Borders are subtle. Rounded corners are everywhere, from 8px cards to 48px pill buttons.

This isn’t a design trying to impress a Dribbble crowd. It’s tuned for long-term usability. Users know where to click. Links look like links. Buttons feel like buttons. The palette is restrained but has personality. Typography is legible, with generous line heights and letter spacing — especially in headings. That’s accessibility baked in.

In short: Ameblo’s design is functional, friendly, and has strong roots in Japanese web conventions. It’s not flashy. It’s reliable. And that’s why it works.

2. Color System

2.1 Primary Colors

The most obvious brand color is green. Specifically, #237b31 — a deep, natural green used in link buttons and CTAs. This is the brand's anchor and it plays well with their identity as "Ameba" (an organic name, a living organism). Psychologically, green conveys growth, stability, and friendliness. Competitors in Japan (like Hatena Blog) lean more into blues or neutrals; Ameblo’s green immediately differentiates them.

The secondary “link” color is #0000ee, the default browser blue. That’s a bold choice. They didn’t customize link blues — it’s the raw HTML anchor color. It screams "clickable" and is universally recognized.

Black (#000000) is used for text and certain borders. White (#ffffff) is pure background or text on dark colors. They also have softer greens (#82be28, #5e9b15, #477d00) and functional blues (#0091ff, #1da1f2, #1877f2). Expressive pinks (#e6456a, #f20076) exist for accents and social integrations.

2.2 Complete Palette

2.3 Color Relationships

Contrast is pretty strong: white on green passes WCAG AA easily; blue links on white are highly readable. The overlay gray #08121a at 8% opacity is intentionally low contrast for dividers — it’s not meant for text. Accessibility is good for text elements, less so for subtle borders (which are decorative anyway).

Dark mode isn’t apparent in this extracted data — colors are tuned for light backgrounds.

2.4 Usage Guide

• Green (#237b31) + white is the CTA pairing. Works well. Don’t use green for body text — it’s reserved for actions.
• Link blue (#0000ee) is for inline links only. Keep it unstyled for recognition.
• Accent pinks are rare — use sparingly.
• Avoid stacking multiple saturated colors; pair one accent with neutrals.
• Soft green backgrounds (#e7f5e9) are safe for section highlights.
• Danger red (#d91c0b) is only for destructive actions.

3. Typography

3.1 Font Families

Primary: Hiragino Sans
Fallbacks: Meiryo, Yu Gothic Medium, system-ui, -apple-system

Secondary: Arial (only for some buttons), Meiryo for captions.

No Google Fonts. No Adobe Fonts. This is a system-native stack — smart for performance and rendering consistency in Japan.

3.2 Type Scale

3.3 Hierarchy

They rely on weight and spacing as much as size. Headings often have letter spacing (up to 3.2px) — gives breathing space in Japanese text. H1 ranges from 32px down to 20px depending on context. Links are bold (700) even at small sizes — keeps them visible. Captions go as small as 10px but remain readable due to high contrast.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px. Everything is a multiple of 2px, but the core rhythm is 8px.

4.2 Layout

No breakpoints extracted here — probably responsive but we don’t have container widths. The spacing scale suggests they stick to multiples of 8px for layout grid.

5. Visual Elements

Border Radius

They love rounded corners. Common:

• 8px — most cards, images
• 12px — buttons
• 12px top corners only — card headers
• 24px — larger sections
• 48px — pill buttons
• 50% — circles (avatars)

Odd ones: 35px on "see more" buttons — big rounded rectangle.

Shadows

None. Flat design. Depth via borders.

Borders

• 1px solid #08121a (8% opacity) — subtle dividers
• 1px solid #000000 — strong dividers
• 2px solid #298737 — green accent borders
• 0px 0px 1px solid #0000ee — underline link sections

6. Components

6.1 Buttons

Data doesn’t list full button specs — but from borders/radius:

• Primary: Green (#237b31), white text, bold, 12px or 48px radius depending on shape.
• Danger: Red (#d91c0b).
• Borders: 2px solid green for outlined buttons.

Hover: Darker green (#1a6e29).

6.2 Links

Links are bold, no underline by default.

Variants:

• Blue (#0000ee) — primary inline link
• White — links on dark backgrounds
• Green (#237b31) — CTA links
• Gray (rgba(8, 18, 26, 0.74)) — muted links

6.3 Forms

Not much extracted — likely standard inputs with 1px borders.

6.4 Cards

Rounded corners (8px or 12px), subtle border, no shadow. Padding aligns to spacing scale (16px, 24px).

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-overlay-gray: #08121a;
  --color-black: #000000;
  --color-link-blue: #0000ee;
  --color-brand-green: #237b31;
  --color-white: #ffffff;
  --color-soft-green-bg: #e7f5e9;
  --color-dark-green-hover: #1a6e29;
  --color-bright-blue: #0091ff;
  --color-expressive-pink: #e6456a;
  --color-accent-neutral-high: #394148;
  --color-accent-secondary: #5e9b15;
  --color-text-accent-secondary: #477d00;
  --color-background: #f5f6f6;
  --color-danger-red: #d91c0b;
  --color-surface-secondary: #82be28;
  --color-instagram-pink: #f20076;
  --color-highlight-yellow: #f5e100;
  --color-facebook-blue: #1877f2;
  --color-twitter-blue: #1da1f2;

  /* Typography */
  --font-primary: "Hiragino Sans", Meiryo, "Yu Gothic Medium", system-ui, -apple-system;
  --font-secondary: Arial;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-55: 55px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;
  --space-120: 120px;
  --space-140: 140px;

  /* Radius */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-24: 24px;
  --radius-35: 35px;
  --radius-48: 48px;
  --radius-circle: 50%;

  /* Borders */
  --border-1-gray: 1px solid rgba(8, 18, 26, 0.08);
  --border-1-black: 1px solid #000000;
  --border-2-green: 2px solid #298737;
}

8. AI Coding Assistant Prompt

# Ameblo Design System Specification

You are an Ameblo design expert. Build UIs matching their visual language exactly.

## Brand Context
Ameblo is a Japanese blogging platform with a friendly, community-first vibe. The design uses green as a brand anchor, clear typography for Japanese text, and rounded corners everywhere. Flat design—depth via borders, not shadows.

## Color Palette
- Overlay Gray: #08121a — subtle borders, dividers
- Pure Black: #000000 — body text, strong dividers
- Link Blue: #0000ee — inline links
- Brand Green: #237b31 — primary CTAs
- Pure White: #ffffff — text on dark, backgrounds
- Soft Green BG: #e7f5e9 — section highlights
- Dark Green Hover: #1a6e29 — hover states on green buttons
- Bright Blue: #0091ff — focus outlines
- Expressive Pink: #e6456a — highlights, special accents
- Accent Neutral High: #394148 — high-emphasis surfaces
- Accent Secondary: #5e9b15 — secondary buttons
- Text Accent Secondary: #477d00 — secondary labels
- Background: #f5f6f6 — page background
- Danger Red: #d91c0b — destructive actions
- Secondary Surface: #82be28 — secondary CTAs
- Instagram Pink: #f20076 — Instagram brand
- Highlight Yellow: #f5e100 — emphasis highlights
- Facebook Blue: #1877f2 — Facebook brand
- Twitter Blue: #1da1f2 — Twitter brand

## Typography
Primary font: "Hiragino Sans", Meiryo, "Yu Gothic Medium", system-ui, -apple-system  
Secondary font: Arial for some buttons

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 32px | 600/700 | 1.60 | Page titles |
| H2 | 24px | 600/700 | 1.60 | Section headings |
| H3 | 20px | 600/700 | 1.60 | Subsections |
| Body | 16px | 400/600/700 | 1.30–1.80 | Paragraphs |
| Caption | 14px | 400/700 | 1.60 | Small labels |
| Small Caption | 12px | 400/800 | 1.10–1.30 | Microtext |
| Mini | 10px | 400/700 | — | Tiny UI labels |

## Spacing & Grid
Base: 8px grid.  
Scale: 2px, 4px, 5px, 6px, 8px, 12px, 13px, 14px, 16px, 20px, 24px, 32px, 36px, 40px, 55px, 60px, 64px, 80px, 120px, 140px.

## Border Radius
- sm: 8px — cards, images
- md: 12px — buttons
- lg: 24px — larger sections
- xl: 48px — pill buttons
- circle: 50% — avatars
- special: 35px — "see more" buttons

## Shadows & Depth
Flat design—use borders for separation, no shadows.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #237b31;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 12px;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #1a6e29; }
.btn-primary:focus { outline: 2px solid #0091ff; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #237b31;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  border: 2px solid #298737;
}
.btn-secondary:hover { background: #e7f5e9; }
```

### Navigation Link
```css
.nav-link {
  color: #0000ee;
  text-decoration: none;
  font-weight: 700;
}
.nav-link:hover { text-decoration: underline; }
```

### Input Field
```css
.input {
  border: 1px solid rgba(8, 18, 26, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  background: #ffffff;
}
.input:focus { border-color: #0091ff; outline: none; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid rgba(8, 18, 26, 0.08);
}
```

## Layout & Responsive Rules
- Max content width: [not extracted]
- Page padding: multiples of 8px
- Grid gap: 8px, 16px, 24px depending on section

## Interaction Rules
- Transition timing: 150ms ease for state changes
- Focus indicators: 2px solid #0091ff with offset
- Hover: darker shade for buttons, underline for links

## DO List
- Use ONLY colors from the palette—no custom colors
- Maintain 8px grid—all spacing must be multiples of 8px
- Use Hiragino Sans for headings and body
- Keep link blue as #0000ee for recognition
- Apply rounded corners consistently per radius spec
- Use borders for depth—no shadows

## DON'T List
- Don't mix square and rounded corners arbitrarily
- Don't add custom shadows
- Don't change link colors outside palette
- Don't reduce letter spacing in headings — keep breathing space
- Don't use saturated colors for body text

## Code Examples
### Primary Button
```css
<button class="btn-primary">Sign Up</button>
```
### Card
```css
<div class="card">Content here</div>
```
### Input
```css
<input type="text" class="input" placeholder="Search">
```

9. Summary

TL;DR
Ameblo’s design is green-first, flat, and rooted in Japanese web typography. Rounded corners everywhere, no shadows, clear link colors. It’s functional and community-friendly.

Brand Keywords

• green-community
• flat-ui
• japanese-readable
• rounded-friendly
• content-first