Color Palette

Primary Colors

Honey (Yellow/CTA) Palette

Tropical (Teal/Primary) Palette

Neutral (Grey) Palette

Typography

DM Sans font family with -2% letter-spacing for headings

Heading 1 - 50px Bold

Heading 2 - 40px Bold

Heading 3 - 32px Bold

Heading 4 - 24px Bold

Heading 5 - 20px Bold

Heading 6 - 16px Bold

Lead paragraph - This is a lead paragraph with larger text for introductions.

Regular body text with DM Sans font, 16px size, and 135% line height. Good typography creates visual hierarchy and improves readability across all devices.

Small text for captions and footnotes

Code Examples (with Prism.js)

Inline code: const api = new Sinch({ projectId: 'xxx' });

// Multi-line code block with syntax highlighting
async function sendSMS(to, message) {
  const response = await api.sms.batches.send({
    to: [to],
    from: '+1234567890',
    body: message
  });
  return response;
}

// Usage
sendSMS('+1987654321', 'Hello from Sinch!')
  .then(result => console.log('Sent:', result.id))
  .catch(err => console.error('Error:', err));

<!-- HTML Example -->
<button class="btn btn-cta">
  Send Message
</button>

<div class="card shadow-sinch-2">
  <div class="card-body">
    <h5>Card Title</h5>
    <p>Card content here.</p>
  </div>
</div>

/* CSS Example */
.custom-button {
  background: var(--sinch-honey-350);
  color: var(--sinch-neutral-900);
  border-radius: var(--sinch-radius-md);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
}

Buttons

Primary Buttons

Outline Buttons

Button Sizes

Button States

Forms

Cards

Basic Card

This is a basic card with header and body.

Action

SMS API

Send and receive text messages globally with our reliable SMS API.

Learn More

Get Started

Start building with Sinch APIs today.

Sign Up Free

Alerts

Badges

Example with buttons

Tables

Channel	Status	Messages	Delivery Rate
SMS	Active	12,450	99.2%
WhatsApp	Active	8,320	98.7%
Messenger	Limited	2,150	97.5%
RCS	Beta	580	96.8%

Icon Font (201 icons)

CSS-based icon font - use <i class="si-iconname"> syntax. Colors inherit from CSS color property.

<i class="si-sms"></i>
<i class="si-chat"></i>
<i class="si-call"></i>

<i class="si-channel-whatsapp" style="color: #25D366;"></i>
<i class="si-channel-telegram" style="color: #0088cc;"></i>

<i class="si-sms si-xs"></i>  <!-- 0.75em -->
<i class="si-sms si-sm"></i>  <!-- 0.875em -->
<i class="si-sms"></i>        <!-- 1em (default) -->
<i class="si-sms si-lg"></i>  <!-- 1.25em -->
<i class="si-sms si-xl"></i>  <!-- 1.5em -->
<i class="si-sms si-2x"></i>  <!-- 2em -->
<i class="si-sms si-3x"></i>  <!-- 3em -->

<i class="si-logo-sinch-icon"></i>
<i class="si-logo-mailgun-icon"></i>
<i class="si-logo-mailjet-icon"></i>

Branded Icons (125)

Sinch branded icons for products, features, and concepts. Path: icons/branded/

sms

chat

call

voice-calling

video-calling

webhook

developer

ai

chatbot

integration

cloud

database

lock

protection

settings

user

users

contact

support

help

rocket

idea

message

messaging

send

bell

calendar

time

search

edit

campaigns

channels

flow

numbers

verification-api

billing

Showing 36 of 125 icons. See icons/branded/ for complete set.

Channel Icons (38)

Communication channel icons in round and square variants. Path: icons/channel/

sms-round

sms-square

whatsapp

whatsapp-square

facebook-messenger

messenger-square

telegram

telegram-square

viber

viber-square

instagram

instagram-square

line

line-square

wechat

wechat-square

rcs-round

rcs-square

mms-round

mms-square

phone-round

phone-square

webchat-round

webchat-square

Product Logos (38)

Sinch product and brand logos. Path: icons/logos/

sinch-icon

sinch-icon-wordmark

engage-icon

engage-icon-wordmark

chatlayer-icon

chatlayer-icon-wordmark

mailgun-icon

mailgun-icon-wordmark

mailjet-icon

mailjet-icon-wordmark

campaigns-icon

campaigns-icon-wordmark

contact-pro-icon

message-media-icon

simple-texting-icon

nectary-icon

Illustrations (114)

SVG illustrations for marketing and product pages. Path: icons/illustrations/

5g

chat-bot

code

conversation-api

credit-card

cute-bee

decorative-flamingo

desktop

global-reach

voicebot

megaphone

lightbulb

jump

numbers-passing

stats

shopping

messages

security

video-voice-call

omnichannel-messaging

Showing 20 of 114 illustrations. See icons/illustrations/ for complete set.