Color palette

22 tokens across 6 groups. Blue leads. Orange supports. Neutrals carry the interface. Click any swatch to copy the hex code.

Brand core

Primary identity — blue leads, orange supports

Accent

Warm sparingly — promotions, badges, not structure

Text

Hierarchy through weight, not color variety

Backgrounds

Calm structure — neutrals carry the system

Borders

Structure without noise

Semantic

Feedback states — medical-safe green and red

Typography

Configure in Design Studio → Styles → Text Styles. Click any spec value to copy it.

Font logic: Tajawal for headings — Arabic-first, clean in both AR/EN. Helvetica for body — maximum email client compatibility. Fallback: sans-serif. All emails default to RTL (dir="rtl").

Style	Font	Desktop	Mobile	Weight	Line height	Color
H1	Tajawal	28px	24px	700	1.3	text-primary
H2	Tajawal	22px	20px	700	1.35	text-primary
H3	Tajawal	18px	17px	600	1.4	text-primary
H4	Tajawal	16px	15px	600	1.4	text-primary
Paragraph	Helvetica	16px	15px	400	1.6	text-secondary
Caption	Helvetica	13px	12px	400	1.5	text-muted
Fine print	Helvetica	11px	11px	400	1.4	text-muted

Fix #2: All headings (H1–H4) use text-primary. Hierarchy through size and weight only, not color.
Fix #3: Fine print (11px) is a dedicated text style for footers, legal text, and unsubscribe links — separate from Caption (13px).

CTA buttons

Configure in Design Studio → Styles → Button. One primary CTA per email. Max two CTAs total.

Talk to a doctor

Primary CTA

brand-primary bg · text-on-brand · radius 6px · padding 14px 32px

Learn more

Secondary CTA

transparent bg · brand-primary border 1.5px + text · radius 6px

View details

Soft CTA

bg-brand-soft bg · brand-primary text · radius 6px

DoOne primary CTA per email. Full-width on mobile (100% below 600px).

DoPair primary + secondary if two CTAs needed.

Don'tNever two solid blue primary buttons in the same email.

Don'tNever use orange for CTA buttons unless a specific promo campaign exception is approved.

Links

Configure in Design Studio → Styles → Links

Context	Color	Decoration	Notes
Inline body links	brand-primary #2563EB	underline	Only context where bright blue links appear
Body link hover	brand-primary-hover #1D4ED8	underline	Darker blue on hover
Footer / legal links	text-muted #64748B	underline	Quiet, non-competing with body content
Disclaimer links	text-muted #64748B	underline	Never use bright blue in fine print

Semantic state modules

Reference patterns for functional feedback. Green and red are only for real state communication — never decorative. Copy these patterns exactly.

Success — subscription confirmed, payment received

✓

Your subscription is active

Your Altibbi Family Plan is now active. You can start a consultation anytime from the app.

Error — payment failed, account issue

!

Payment failed

We were unable to process your payment. Please update your payment method to keep your plan active.

Warning — expiring subscription, action needed

⏱

Your plan expires in 3 days

Renew now to keep access to unlimited doctor consultations and your family plan benefits.

Usage rules: These patterns are the only acceptable uses of success/danger/warning colors. Never use green or red for decorative emphasis, highlighting, or branding. The warning module uses accent-warm-soft — this is its only structural use outside of small badges.

Spacing & radius

Configure in Design Studio → Styles → Spacing / Radius.

Spacing tokens

Email body padding: Desktop: 40px sides, 48px top/bottom · Mobile: 20px sides, 32px top/bottom · Max-width: 600px (desktop), 100% (mobile)

Border radius — locked by component type

One universal standard. No improvisation.

Dividers

Section divider border-default · 1px

Soft separator border-soft · 1px

Usage rules

Enforce with team. A 22-token library exists for variety across emails — not within a single email.

Color budget per email

A typical email uses 5–6 colors max: white surface, dark text, muted text, one CTA blue, one soft background, one border.

Blue token rule

RuleMax one blue action color (brand-primary for CTA or links) and one blue surface treatment (bg-brand-soft for a callout) per email.

Allowedborder-brand is allowed only when paired with bg-brand-soft in the same module. This counts as one surface treatment, not two blue tokens.

AvoidUsing brand-primary-soft + bg-brand-soft + standalone border-brand as separate elements in one email — that over-saturates blue.

Orange restrictions

AllowedSmall promo badges, star ratings, micro-emphasis chips

Allowedaccent-warm-soft background for a single promotional section or warning state module

NeverOrange CTA buttons (unless explicit campaign exception approved by VP Marketing)

NeverOrange headlines, body text, borders, or dividers

Semantic discipline

RuleSuccess (green) and danger (red) only for real state communication: subscription confirmed, payment failed, account expiring. See Semantic States section for exact patterns.

NeverUse semantic colors decoratively or for emphasis. Never mix success green with orange highlight in the same focal zone.

Link behavior by zone

BodyInline body links use brand-primary #2563EB with underline. This is the only zone where bright blue links appear.

FooterFooter and legal links use text-muted #64748B with underline. Quiet, non-competing.

NeverBright blue links in footer, disclaimers, or fine print zones. Links inside buttons inherit button styling — no underline.

Arabic / RTL

All emails default to RTL with dir="rtl". Tajawal is the heading font for both Arabic and English. Test every email in both Arabic-heavy and English-heavy content states before sending.

Email anatomy

Standard email structure showing which token maps to which zone.

altibbi

← logo header

Email heading H1

← text-primary · Tajawal Bold

Body paragraph text in text-secondary color. Clear, readable healthcare communication.

← text-secondary · Helvetica

bg-brand-soft callout — border-brand border. One surface treatment.

← bg-brand-soft + border-brand

Primary CTA button

← brand-primary · text-on-brand

← text-muted · fine print 11px · muted links

Quick reference — tokens per email zone

Zone	Token(s)
Outer shell	bg-outer #F1F5F9
Card surface	bg-page #FFFFFF
Headings	text-primary + Tajawal Bold
Body copy	text-secondary + Helvetica Regular
Body links	brand-primary + underline
Captions	text-muted #64748B · 13px
Footer / legal	text-muted #64748B · fine print 11px · muted underline links
Primary CTA	brand-primary bg + text-on-brand
Info callout	bg-brand-soft + border-brand (one paired module)
Dividers	border-default or border-soft

Full email examples

Production-style reference in both English (LTR) and Arabic (RTL). These are the two email archetypes — lifecycle engagement and transactional. Every email Altibbi sends should follow one of these patterns.

Lifecycle / engagement email — English LTR

Welcome, re-engagement, feature highlight, content digest

altibbi

Welcome to Altibbi

Your health journey starts here. Talk to a certified doctor anytime — by phone, chat, or video. We're here for you and your family.

Your plan is active

Family Plan · Unlimited consultations · Valid until May 15, 2026

Start your first consultation

Transactional / alert email — English LTR

Payment confirmation, payment failure, subscription expiring, account change

altibbi

Payment failed

We were unable to process your subscription renewal. Your plan will be deactivated in 3 days if payment is not updated.

!

Action required

Update your payment method before April 10 to avoid losing access to consultations and your health records.

Update payment method

بريد دورة الحياة — عربي Lifecycle / engagement — Arabic RTL

ترحيب، إعادة تفاعل، تسليط الضوء على ميزة، ملخص محتوى

الطبي

مرحباً بك في الطبي

رحلتك الصحية تبدأ هنا. تحدث مع طبيب معتمد في أي وقت — عبر الهاتف أو المحادثة أو الفيديو. نحن هنا من أجلك ومن أجل عائلتك.

اشتراكك فعّال

الباقة العائلية · استشارات غير محدودة · صالحة حتى 15 مايو 2026

ابدأ استشارتك الأولى

بريد المعاملات — عربي Transactional / alert — Arabic RTL

تأكيد الدفع، فشل الدفع، انتهاء الاشتراك، تغيير الحساب

الطبي

فشل الدفع

لم نتمكن من معالجة تجديد اشتراكك. سيتم إلغاء تفعيل باقتك خلال 3 أيام إذا لم يتم تحديث طريقة الدفع.

!

إجراء مطلوب

قم بتحديث طريقة الدفع قبل 10 أبريل لتجنب فقدان الوصول إلى الاستشارات وسجلاتك الصحية.

تحديث طريقة الدفع

RTL implementation notes: Arabic emails use dir="rtl" on the email wrapper. Tajawal renders headings and body copy. The line-height is increased to 1.8 for Arabic body text (vs 1.6 for English) to accommodate taller Arabic letterforms. Flex layouts with icons use flex-direction: row-reverse to keep icons on the right side in RTL. Always test both language variants before launch.

Icon library

17 Lucide-style line icons in brand-primary #2563EB. Hosted as PNG @2x (96px rendered at 48px for retina). Click any icon to copy its full URL for use in Customer.io email templates.

Usage in emails: Reference icons as <img src="URL" width="48" height="48" alt="icon name">. Always include alt text. Icons are served from the same domain with CORS enabled and 1-year cache headers.

Icon usage rules

DoUse icons in icon-text rows (icon left, heading + description right) — the Customer.io welcome email pattern.

DoUse brand-primary #2563EB icons only. All icons in this set are pre-colored.

DoAlways set width="48" height="48" on the img tag for consistent sizing across email clients.

Don'tUse more than 4–5 icons per email. Icons are for structure, not decoration.

Don'tMix icon styles. Use only this set — no emoji, no other icon libraries, no inline SVG in emails.

HTML snippet template

Copy this pattern for icon-text rows in Customer.io Design Studio

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td width="48" valign="top">
      <img src="ICON_URL" width="48" height="48" alt="">
    </td>
    <td style="padding-left:16px">
      <div style="font-weight:600;color:#0F172A">Heading</div>
      <div style="color:#475569;font-size:14px">Description text</div>
    </td>
  </tr>
</table>

Click to copy HTML snippet

Email Brand Guidelines

Welcome to Altibbi

Payment failed

مرحباً بك في الطبي

فشل الدفع