chubi
chubi
Primary logotype Lowercase wordmark set in Cabin Bold with custom letter‑spacing (–1%).
Primary mark Speech‑bubble glyph with three rising bars symbolizing dialog + progress.
Tone Friendly, trustworthy, modern.
Use Prefer the full lockup on light backgrounds; single‑color versions for small sizes.

App & Social Icons (1:1)

App Store / Play Store

1:1 ratio (e.g., 1024x1024px). Use the symbol-only glyph with standard icon padding and rounding.

Social Media Profile

1:1 ratio (e.g., 1200x1200px). The symbol should be centered, as it will be masked into a circle.

Maskable Icon (PWA)

1:1 ratio (e.g., 192x192px or 512x512px). Symbol must fit within a centered "safe zone".

Social Media Covers

YouTube Channel Art (16:9)

chubi

16:9 ratio (e.g., 2560x1440px). Ensure logo is visible within the central "safe area" for all devices.

Twitter/X Header (3:1)

chubi

3:1 ratio (e.g., 1500x500px). Account for the profile picture overlapping the bottom-left area.

LinkedIn Cover (4:1)

chubi

~4:1 ratio (e.g., 1584x396px). Logo is typically placed left or right, clear of the profile photo.

Favicon Set

180x180 (Apple Touch Icon)
32x32 (Browser tab)
16x16 (Browser tab)

The 192x192px and 512x512px PWA/Android icons are detailed in the "App & Social Icons" section. Use the symbol-only glyph for all favicon formats.

Clear Space & Construction

chubi

Clear space is defined by the x‑height of the wordmark. Maintain at least one “x” on all sides.

Grid Rounded rectangle with 8px corner radius. Internal bars align to a 4px grid.
Angles Speech‑tail angle 25°. Bar widths 8/8/8px with 6px spacing.
Corner radius Glyph: 24px outer, bars: 4px.

Color Palette

Mint
HEX #72C8B7
RGB 114, 200, 183
HSL 168, 37%, 62%
Teal
HEX #058880
RGB 5, 136, 128
HSL 177, 93%, 28%
Ink
HEX #333333
RGB 51, 51, 51
HSL 0, 0%, 20%
Deep Ink
HEX #163538
RGB 22, 53, 56
HSL 188, 44%, 15%

Brand ratio

Mint 50%, Teal 20%, Ink 20%, Deep Ink 10%. Use neutrals generously for readability.

Accessibility

Body text must meet WCAG AA contrast (≥4.5:1). Buttons/links require ≥3:1 against their backgrounds.

Gradients

Use subtle linear blends Mint→Teal at 90° for hero areas—not for text.

Typography

Cabin Bold
Headlines & wordmark
Cabin Semibold — H2
Cabin Regular — body, captions and UI. Line‑height 1.6 for paragraphs.
Fallbacks: system‑ui, Segoe UI, Roboto, Helvetica, Arial.

Type scale

  • Display 48 / 56 / -1%
  • H1 32 / 40 / -1%
  • H2 24 / 32 / -1%
  • H3 20 / 28 / -0.5%
  • Body 16 / 24 / 0%
  • Small 14 / 20 / 0%

UI Components

Buttons

Radius 12–16px, weight 600, min hit‑area 44×44px.

Inputs

Success Warning Error

Elevation

Level 1
Level 2
Level 3

Use subtle shadows; prefer borders for separation.

Do & Don’t

✔Do
  • Maintain clear space equal to the x‑height of the wordmark.
  • Use single‑color versions on busy backgrounds.
  • Keep aspect ratio and relative sizes of glyph + wordmark.
✖Don’t
  • Don’t add outlines, shadows, or gradients to the wordmark.
  • Don’t recolor the logo outside the brand palette.
  • Don’t place the full logo below 20px height.

Assets

Downloads

These links generate vector assets on the fly so they’re always crisp. Replace with your exported files anytime.

Design Tokens (CSS) 

:root {
  --chubi-mint: #72C8B7;
  --chubi-teal: #058880;
  --chubi-ink: #333333;
  --chubi-deep-ink: #163538;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
}

Design Tokens (JSON)