<!-- Generated by ExtractVibe — https://extractvibe.com/brand/watermark.org -->
<!-- Extracted: 2026-08-20T21:18:53.870Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Bible Church | Dallas, Texas | Watermark Community Church"
description: "Bible Church | Dallas, Texas | Watermark Community Church presents a professional web presence."
colors:
  primary: "#de7130"
  secondary: "#6c757d"
  tertiary: "#007bff"
  neutral: "#48565a"
  surface: "#ffffff"
  on-surface: "#28312f"
  on-surface-secondary: "#48565a"
  border: "#dfdeda"
  link: "#3998b3"
  error: "#dc3545"
  warning: "#ffc107"
  success: "#28a745"
  info: "#17a2b8"
typography:
  display-lg:
    fontFamily: "lato"
    fontSize: "16px"
    fontWeight: "700"
    lineHeight: "32px"
    letterSpacing: "0.96px"
  headline-lg:
    fontFamily: "DM Serif Display"
    fontSize: "72px"
    fontWeight: "400"
    lineHeight: "72px"
    letterSpacing: "0.5px"
  headline-md:
    fontFamily: "DM Serif Display"
    fontSize: "40px"
    fontWeight: "400"
    lineHeight: "46px"
    letterSpacing: "-1px"
  headline-sm:
    fontFamily: "DM Serif Display"
    fontSize: "32px"
    fontWeight: "400"
    lineHeight: "44px"
  body-md:
    fontFamily: "Lato"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "16px"
rounded:
  md: "4px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#000000"
    rounded: "4px"
    padding: "4px 12px"
    fontSize: "20px"
    fontWeight: "400"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#212529"
    rounded: "0px"
    padding: "16px 24px"
    fontSize: "13px"
    fontWeight: "600"
    borderColor: "#ffffff"
    borderWidth: "1px"
  button-primary:
    backgroundColor: "#de7130"
    textColor: "#ffffff"
    rounded: "0px"
    padding: "16px 24px"
    fontSize: "13px"
    fontWeight: "600"
    borderColor: "#de7130"
    borderWidth: "1px"
---

# Bible Church | Dallas, Texas | Watermark Community Church — Design System

## Overview

The visual identity for Watermark Community Church’s Bible Church in Dallas, Texas, establishes a foundation of professional clarity and institutional trust. The design atmosphere is grounded, serious, and accessible, avoiding the ephemeral trends of modern tech startups in favor of enduring stability. This aesthetic communicates that the community is established, reliable, and focused on substance over style. The interface prioritizes legibility and structural integrity, ensuring that information architecture remains intuitive for users seeking spiritual resources or community connection. The overall feel is one of dignified warmth, balancing the approachability of a local church with the polish of a major organization. It is not playful, minimalist in a cold sense, or overly decorative. Instead, it relies on strong grids, clear typography, and purposeful spacing to create a sense of order and calm. The design serves as a digital sanctuary, offering a distraction-free environment for engagement. Every element, from the navigation structure to the content presentation, reinforces the brand’s commitment to professionalism and clear communication. The visual language is consistent and predictable, reducing cognitive load for visitors and allowing the core message to take center stage. This approach ensures that the church’s digital presence reflects its physical presence: welcoming yet structured, modern yet timeless.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette centers on #de7130, a vibrant yet grounded orange that signals energy, warmth, and approachability without sacrificing professionalism. This primary color acts as the sole accent, drawing attention to key interactive elements and calls to action while maintaining visual hierarchy. The #ffffff surface provides a clean, high-contrast backdrop that enhances readability and ensures the content remains the focal point. This limited color strategy reinforces clarity and reduces visual noise, aligning with the brand’s professional and straightforward character. The absence of additional hues ensures that the interface remains focused and uncluttered, fostering a sense of trust and stability.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#de7130` | Burnt Sienna |
| secondary | `#6c757d` | Slate Gray |
| accent / tertiary | `#007bff` | Dodger Blue |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#28312f` | Charcoal |
| secondary text | `#48565a` | Dark Gray |
| border | `#dfdeda` | Gainsboro |
| link | `#3998b3` | Steel Blue |
| muted | `#48565a` | Dark Gray |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#28a745` | Confirmations, positive states |
| warning | `#ffc107` | Caution, intermediate states |
| error | `#dc3545` | Failures, destructive actions |
| info | `#17a2b8` | Neutral information, tips |

## Typography

The type system pairs DM Serif Display for headings with Lato and Oswald for body and UI elements, creating a balance between tradition and modernity. DM Serif Display lends authority and gravitas to headlines, reflecting the church’s established presence and theological depth. Lato provides a neutral, highly readable foundation for body text, ensuring accessibility and comfort for long-form reading. Oswald, with its condensed structure, is utilized for UI labels and secondary navigation, offering a clean, efficient look that complements the primary sans-serif. This combination communicates respect for heritage while embracing contemporary design standards, ensuring the brand feels both timeless and relevant.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Lato | body | self-hosted | 400, 600 |
| lato | heading | self-hosted | 700 |
| DM Serif Display | heading | self-hosted | 400 |
| Oswald | heading | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | lato | 16px | 700 | 32px | 0.96px |
| Heading 2 | DM Serif Display | 72px | 400 | 72px | 0.5px |
| Heading 3 | DM Serif Display | 40px | 400 | 46px | -1px |
| Heading 4 | DM Serif Display | 32px | 400 | 44px | — |
| Body | Lato | 16px | 400 | 16px | — |

### Conventions

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

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `md` — 4px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#000000`
- Radius — `4px`
- Padding — `4px 12px`
- Font size — `20px`
- Font weight — `400`

**Secondary**

- Background — `#ffffff`
- Text — `#212529`
- Radius — `0px`
- Padding — `16px 24px`
- Font size — `13px`
- Font weight — `600`
- Border — `1px solid #ffffff`
- Sample copy — "Learn About Watermark"

**Primary**

- Background — `#de7130`
- Text — `#ffffff`
- Radius — `0px`
- Padding — `16px 24px`
- Font size — `13px`
- Font weight — `600`
- Border — `1px solid #de7130`
- Sample copy — "plan your weekend visit"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | png | [link](brands/watermark.org/logo-0.png) | 95% |
| favicon | — | png | [link](brands/watermark.org/logo-1.png) | 95% |
| favicon | — | png | [link](brands/watermark.org/logo-2.png) | 95% |
| favicon | — | ico | [link](brands/watermark.org/logo-3.ico) | 95% |
| favicon | — | png | [link](#) | 95% |
| favicon | — | png | [link](#) | 95% |
| primary | — | svg | [link](brands/watermark.org/logo-6.svg) | 85% |
| logomark | — | svg | [link](brands/watermark.org/logo-svg-7.svg) | 90% |
| logomark | — | svg | [link](brands/watermark.org/logo-svg-8.svg) | 90% |

## Sources

- Official brand guidelines — https://watermark.org/media
- Live brand page — https://extractvibe.com/brand/watermark.org
- Raw JSON — https://extractvibe.com/api/brand/watermark.org
- DESIGN.md (this file) — https://extractvibe.com/api/brand/watermark.org/design.md
- Extracted — 2026-08-20T21:18:53.870Z
- Generator — ExtractVibe vv1
- Quality score — 65/100