Design mockup — not the live site. Anything marked TBC is placeholder content awaiting confirmation from the church.

Internal reference · not linked from the main navigation

Style guide

Every design token and component used across the mockup, in one place, for sign-off before the pages are reviewed.

Colour

Anchored on the three logo colours. 60% sand and white ground, 30% olive, 10% bark as the accent that carries every primary action.

bark — primary (rust / timber)

  • 50

    #FBF4F0

  • 100

    #F5E4DB

  • 200

    #E9C6B4

  • 300

    #DAA187

  • 400

    #C87551

  • 500

    #B8592E

  • 600 · logo

    #AA471F

  • 700

    #8E3A18

  • 800

    #702E14

  • 900

    #4E2110

olive — secondary / neutral

  • 50

    #F7F7F4

  • 100

    #EDECE6

  • 200

    #D9D7CB

  • 300

    #BFBCAB

  • 400

    #9C9887

  • 500

    #7A7666

  • 600

    #5C5A4A

  • 700 · logo

    #474538

  • 800

    #33322A

  • 900

    #1C1C18

  • 950 · logo

    #0F0F0C

Supporting

  • sand · page

    #FAF8F4

  • surface · cards

    #FFFFFF

  • ink · body text

    #1A1A17

  • sage · success

    #5F7A5A

Contrast (WCAG 2.1)

Pairing Ratio Result
bark-600 on white5.77:1AA
White on bark-6005.77:1AA
olive-700 on white9.64:1AAA
White on olive-700 / olive-800> 9:1AAA
olive-400 on white2.42:1Decorative only

Typography

Two families. Montserrat for display, because it is the closest common webfont to the logo wordmark. Open Sans for everything you actually read.

Display / H1 · Montserrat 800 · 60→36px · -0.02em

A church on the wooden cross

H2 · Montserrat 700 · 40→28px · -0.015em

For God, For Each Other, For the World

H3 · Montserrat 600 · 24→20px

Plan your visit

Eyebrow · Montserrat 600 · 13px uppercase · 0.12em

AFM of South Africa · Pretoria East

Lead · Open Sans 400 · 20→18px

Whoever you are, there is a seat for you this Sunday.

Body · Open Sans 400 · 17px / 1.7 · max 68ch

Finding a church that feels like home can be a challenge. We are a congregation committed to genuinely caring for people, and we believe our sincere love for God and our community is the foundation of the stable and joyful fellowship we share.

Buttons & links

On light

Text link with animated underline

An inline prose link inside a sentence.

On dark

Text link on dark

Tab through the buttons above to see the focus ring: a 2px bark-600 outline with a 2px offset, applied identically to every interactive element on the site.

Badges & markers

Badges

Free R350 Series New

Placeholder marker

Content awaiting confirmation is wrapped in data-tbc, which renders like this: Sundays, 09:00

Nothing invented can be mistaken for fact, and a search for data-tbc lists every outstanding item across the site.

Default placeholder

Bark variant

Dark variant

Cards

  • Icon feature

    Used for the three pillars on the homepage.

  • Image

    Linked card

    Whole card is clickable; focus stays on the link.

    Learn more
  • Mar 14
    Free

    Event card

    Date chip, badge, title, meta.

  • Portrait

    Person card

    Role

Forms

Helper text sits under the field.

Please enter a valid email address.

Accordion

Wired with aria-expanded and aria-controls. The plus rotates 45° into a cross when open.

Bands

Full-width sections that set the page rhythm. At most one bark band per page.

Service times strip — bark-600

Get directions

Dark olive band — olive-800

Closing CTA band — bark-700

Plan your visit

Pages in this mockup