STFL Brand Guidelines

The official brand identity system for SohaelTasneem Foundation. Premium, minimal, editorial, and completely original.

STFL Logo — the complete identity mark
01

Brand Foundation

SohaelTasneem Foundation

A humanitarian organization dedicated to education, health, and community development across Bangladesh.

Brand Principles

  • Premium: Restrained, considered, never casual
  • Minimal: Generous whitespace, few elements, clear hierarchy
  • Editorial: Large typography, intentional composition
  • Digital-first: Optimized for screens, responsive, accessible
  • Human: Warm, deliberate, never mechanical
  • Credible: No fake statistics, no overstatement
  • Quietly confident: Let the work speak; no loud claims

Voice and Tone

STFL communication is direct, respectful, and human. We speak to partners, beneficiaries, and supporters as equals.

Do:

Be clear. Be specific. Be honest about what we have done and what remains.

Don't:

Make claims without evidence. Use jargon or emotional manipulation. Imitate other organizations.

Identity

Organization: SohaelTasneem Foundation

Short name: STFL

Primary domain: https://stflbd.app

Language: Bangla-first

03

Logo Protection

Clear Space

Maintain a minimum clear space around the logo equal to the height of the mark. No other elements may enter this zone.

Logo with clear space demonstration

Minimum Size

Digital: Minimum 32px × 32px for the mark, 120px × 40px for the full logo

Print: Minimum 1cm × 1cm for the mark, 5cm × 1.5cm for the full logo

Below these sizes, use the mark alone rather than the full logo.

Contrast

The logo must have sufficient contrast against its background for accessibility.

Use full-color on light backgrounds, white on dark backgrounds. Do not place the logo on patterned or photographic backgrounds without a solid underlay.

04

Color System

Core Palette

STFL Ink

#081F2D

Primary text, headings

STFL Deep Navy

#0B2B43

Dark backgrounds, headers

STFL Snow

#FAFAF8

Light backgrounds, cards

STFL Stone

#E7E7E2

Borders, dividers

Accent Colors

STFL Accent

#FF6B35

Primary CTA, buttons

STFL Black

#000000

High contrast emphasis

Usage Guidelines

• Navy: Primary dark surface for headers, heroes, and top-level navigation

• Orange: Primary CTA button, leading stripe on accent cards

• Accents (Red, Blue, Purple, Cyan, Green): Program categories, small iconography; never as card backgrounds

• Stone/Snow: Borders, dividers, neutral backgrounds

05

Typography

Type Families

বাংলা

Bangla: Hind Siliguri

Primary typeface for all Bangla text. Bundled in all digital products.

Abc

English: System Font

Inter or system sans-serif for all English text in digital contexts.

Type Scale

40px / 700

Display Large — hero statement

32px / 700

Display Medium — section hero

26px / 700

Headline Large — screen title

22px / 600

Headline Medium — section header

16px / 400

Body Large — body copy

14px / 400

Body Medium — secondary copy

Principles

• Bangla-first: Type Bangla first, then fit English as a companion

• Generous line height: Bangla matras and descenders require 1.45–1.6× the font size

• Scale responsively: Typography scales with the system font size, up to 200%

• Hierarchy through weight and size: Never through color alone

06

Digital Language

Navigation

Clear, flat hierarchy. Primary navigation is top-level; secondary appears on hover or in dropdowns. No mega-menus; maintain clarity.

Buttons

Primary button: orange background, white text, 48px minimum height. Secondary: outlined, gray border. Always center at least 48px height for touch targets.

Cards

White or Snow background, subtle border, optional accent stripe on the left (4px). Never use accent color as card background.

Spacing

Use a consistent spacing scale: 4, 8, 12, 16, 24, 32, 48, 56px. Generous whitespace is a feature, not a luxury.

Photography

Documentary, not staged. Real people, real contexts. Avoid stock imagery. Show the work, not an idealized version.

Shadows & Depth

Soft, consistent shadows. Dark blue-gray: rgba(7,27,43,.12). Never harsh shadows; maintain the minimal aesthetic.

Accessibility

WCAG AA contrast (4.5:1 for body, 3:1 for large). All interactive elements 48px+. Support reduced motion. Provide alt text for all images.

Content-First Design

Design containers around content, not the reverse. Reading paths are clear. No decorative clutter.

07

Brand Applications

Website

Bangla-first design, responsive layouts, large typography, generous whitespace. Logo in header. Primary CTA in orange. Accessible by default.

Android App

Exact same color palette and typography as the website. Responsive to 200% font scale. Bundled fonts ensure consistency across all devices.

Documents

Logo on title page, top-left. Use navy headers and orange accents. Include page numbers. Follow the same hierarchy and spacing rules.

Social Media

Logo in profile image. Maintain consistent palette. Use the mark for square formats, full logo for wider fields. No filters or distortions.

Digital Materials

Email templates, presentations, infographics. Consistent spacing, typography, color. Logo and wordmark placement follows app/web guidelines.

Reporting

Annual reports, case studies, research publications. Premium design treatment. Use data visualization instead of decorative graphics. Always honest claims.

08

Governance

Asset Usage

All STFL brand assets are canonical. Do not create variants. If a variant is needed, consult the STFL brand team before production.

Naming

Use "STFL" in all formal contexts. "SohaelTasneem Foundation" in full for official documents. "The Foundation" in conversational contexts.

Approved Partners

Partner logos appear only on explicit approval. Never combine marks without permission. STFL mark is always more prominent than partner mark.

Version & Support

This Brand Guide is version 1.0. For updates, clarifications, or asset requests, contact the STFL communications team.