<!-- Generated by ExtractVibe — https://extractvibe.com/brand/sylhet.wordcamp.org -->
<!-- Extracted: 2026-09-15T05:55:35.538Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "WordCamp Sylhet, Bangladesh 2026 – Just another WordCamp"
description: "WordCamp Sylhet 2026 projects a grounded, community-centric vibe that balances professional technical authority with warm, local hospitality. The design is utilitarian and flat, prioritizing clear information hierarchy and accessibility over decorative flair, reflecting the pragmatic nature of the WordPress developer community."
colors:
  primary: "#16542f"
  tertiary: "#a90005"
  neutral: "#a90005"
  surface: "#fbf1e0"
  on-surface: "#111111"
  on-surface-secondary: "#a90005"
  border: "#dddddd"
  link: "#a90005"
typography:
  display-lg:
    fontFamily: "Sofia Sans Extra Condensed"
    fontSize: "160px"
    fontWeight: "800"
    lineHeight: "160px"
  headline-lg:
    fontFamily: "Sofia Sans Extra Condensed"
    fontSize: "56px"
    fontWeight: "800"
    lineHeight: "56px"
  headline-md:
    fontFamily: "Sofia Sans Extra Condensed"
    fontSize: "32px"
    fontWeight: "700"
    lineHeight: "35.2px"
  body-md:
    fontFamily: "Geist"
    fontSize: "16.8px"
    fontWeight: "400"
    lineHeight: "26.04px"
rounded:
  sm: "3px"
  lg: "5.28px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#16542f"
    textColor: "#fbf1e0"
    rounded: "5.28px"
    padding: "14px 32px"
    fontSize: "24px"
    fontWeight: "600"
    borderColor: "#16542f"
    borderWidth: "2px"
  button-outline:
    textColor: "#16542f"
    rounded: "5.28px"
    padding: "14px 32px"
    fontSize: "14px"
    fontWeight: "600"
    borderColor: "#16542f"
    borderWidth: "2px"
---

# WordCamp Sylhet, Bangladesh 2026 – Just another WordCamp — Design System

## Overview

The visual identity for WordCamp Sylhet 2026 is defined by utilitarian clarity and community-centric warmth. It rejects decorative excess in favor of a flat, accessible interface that prioritizes information hierarchy. This design mirrors the pragmatic ethos of the WordPress developer community, blending professional technical authority with the grounded hospitality of Sylhet. The atmosphere is confident and direct, serving the Everyman and Sage archetypes by making complex technical information approachable for all attendees. It feels like a well-maintained public square: functional, welcoming, and deeply rooted in local context.

**Key characteristics:**

- Vibe — community-driven, utilitarian, flat-design, developer-focused, accessible, local-patriotism
- Archetypes — The Sage, The Everyman
- Comparable to — WordPress.org, Drupal.org, React Community, Mozilla
- Design era — flat-2.0
- Emotional tone — trustworthy-enthusiastic
- Target audience — WordPress developers, designers, freelancers, and local Sylhet community members seeking professional networking and skill development.
- Visual energy — 6/10 (moderate)

## Colors

The palette anchors the brand in nature and tradition. Primary green (#16542f) conveys stability and growth, while the warm surface color (#fbf1e0) provides high-contrast readability without the harshness of pure white. This combination signals a brand that is both earthy and professional, ensuring accessibility while maintaining a distinct, locally-inspired character that feels open and inviting.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#16542f` | Dark Slate Gray |
| accent / tertiary | `#a90005` | Dark Red |
| surface | `#fbf1e0` | Linen |
| background | `#fbf1e0` | Linen |
| text | `#111111` | Near-Black |
| secondary text | `#a90005` | Dark Red |
| border | `#dddddd` | Gainsboro |
| link | `#a90005` | Dark Red |
| muted | `#a90005` | Dark Red |

## Typography

The type system pairs Geist for interface clarity with Sofia Sans Extra Condensed for impactful headlines. This combination balances technical precision with a bold, modern presence. The condensed font allows for dense information display without visual clutter, reinforcing the utilitarian focus. The hierarchy is strict and logical, ensuring that critical event details are instantly scannable, reflecting the developer community’s preference for efficiency and structure.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Geist | body | self-hosted | 400, 500, 600 |
| Sofia Sans Extra Condensed | heading | self-hosted | 700, 800 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Sofia Sans Extra Condensed | 160px | 800 | 160px | — |
| Heading 2 | Sofia Sans Extra Condensed | 56px | 800 | 56px | — |
| Heading 3 | Sofia Sans Extra Condensed | 32px | 700 | 35.2px | — |
| Body | Geist | 16.8px | 400 | 26.04px | — |

### Conventions

- Heading case — title-case
- Body line-height — 26.04px

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `sm` — 3px
- `lg` — 5.28px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#16542f`
- Text — `#fbf1e0`
- Radius — `5.28px`
- Padding — `14px 32px`
- Font size — `24px`
- Font weight — `600`
- Border — `2px solid #16542f`
- Sample copy — "Micro-sponsors Tickets Available"

**Outline**

- Text — `#16542f`
- Radius — `5.28px`
- Padding — `14px 32px`
- Font size — `14px`
- Font weight — `600`
- Border — `2px solid #16542f`
- Sample copy — "View on Google Maps"

## Do's and Don'ts

### Do

- Use Sofia Sans Extra Condensed at 700 or 800 weight for all H1-H3 headings, formatted in Title Case.
- Use Geist at 400, 500, or 600 weight for all body copy, maintaining a line-height of 26.04px.
- Apply the primary green (#16542f) as the background color for all primary Call-to-Action buttons, paired with off-white text (#fbf1e0).
- Style secondary/outline buttons with a 2px solid border in #16542f, transparent background, and #16542f text.
- Maintain a strict flat design aesthetic: do not use box-shadows or gradients on any UI elements.
- Use a consistent border-radius of 5.28px for all buttons and interactive components.
- Set button padding to 14px vertical and 32px horizontal to create a substantial, clickable touch target.
- Use the warm beige (#fbf1e0) as the primary page background to reduce eye strain compared to pure white.
- Employ the accent red (#a90005) sparingly for critical alerts, sale badges, or high-priority visual cues.
- Keep copy direct and imperative, using frequent exclamations to convey enthusiasm without excessive emoji.

### Don't

- Do not use serif fonts; the brand is strictly sans-serif (Geist and Sofia Sans).
- Do not use box-shadows or drop-shadows; the design is entirely flat.
- Do not use gradients; all backgrounds and buttons must be solid colors.
- Do not use emojis in marketing copy or UI labels.
- Do not use sentence case for headings; always use Title Case.
- Do not use pill-shaped buttons; maintain the 5.28px border-radius.
- Do not use pure black (#000000) for body text; use #111111 for softer contrast.
- Do not use excessive whitespace or minimalist layouts that obscure event details; prioritize dense, informative content.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 4/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 8/10 | accessible |

### Copywriting style

- Avg. sentence length — 14 words
- Vocabulary — simple
- Jargon — some
- CTA style — direct action verbs with clear outcomes
- Rhetorical devices — superlative, repetition, imperative

### Sample copy

> Join the Biggest Gathering of Sylhet WordPress Community

> WordCamp Sylhet 2026 is happening.

> The flagship event for the developers, designers, marketers, support agents, freelancers and publishers who keep WordPress running.

> Food You Must Not Miss While Visiting WordCamp Sylhet

> Tickets Are Sold Now

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/sylhet.wordcamp.org) | 100% |
| favicon | — | png | [link](brands/sylhet.wordcamp.org/logo-0.png) | 95% |
| favicon | — | png | [link](brands/sylhet.wordcamp.org/logo-1.png) | 95% |
| favicon | — | png | [link](brands/sylhet.wordcamp.org/logo-2.png) | 95% |
| primary | — | webp | [link](brands/sylhet.wordcamp.org/logo-3.webp) | 85% |
| primary | — | png | [link](brands/sylhet.wordcamp.org/logo-4.png) | 85% |

## Sources

- Official brand guidelines — https://asia.wordcamp.org/2026/press-kit/
- Live brand page — https://extractvibe.com/brand/sylhet.wordcamp.org
- Raw JSON — https://extractvibe.com/api/brand/sylhet.wordcamp.org
- DESIGN.md (this file) — https://extractvibe.com/api/brand/sylhet.wordcamp.org/design.md
- Extracted — 2026-09-15T05:55:35.538Z
- Generator — ExtractVibe vv1
- Quality score — 100/100