Core Identity Guidelines

The Design Mission

The brand presence of One Tree Hill Christadelphians is built around natural, grounded earth tones, echoing the physical beauty of the northern Adelaide Hills (One Tree Hill) and presenting scripture studies cleanly. The user interface prioritizes clarity, classical scripture readability, comfortable touch targets, and natural spatial separation.

1. Color System

Foundational tokens, conversion codes, copyable specifications, and contrast validation.

Primary

Forest Deep Olive

Main branding, navigation headers, titles, primary borders.

Hex:
RGB: rgb(44, 74, 62)
HSL: hsl(156, 25%, 23%)
WCAG AA Pass on White Text
Accent Accent

Warm Gold Ochre

Interaction cues, active state borders, link highlighting, warnings.

Hex:
RGB: rgb(212, 163, 115)
HSL: hsl(30, 52%, 64%)
WCAG AA Pass on Deep Charcoal Text
Canvas

Warm Cotton Canvas

Global body background. Minimizes eye strain on scripture blocks.

Hex:
RGB: rgb(250, 248, 245)
Structure

Soft Sage Separation

System grid lines, interior card outlines, horizontal dividers.

Hex:
RGB: rgb(228, 233, 220)

2. Typography System

Font family configurations, sizes, line heights, and letter-spacing guidelines.

Heading Family (Classical)

Playfair Display

An elegant, high-contrast serif. Brings dignity and academic depth to theological and ecclesial titles.

font-family: 'Playfair Display', Georgia, serif;

Body & UI Family (Modern)

Plus Jakarta Sans

A modern, geometrical humanist sans-serif with wide aperture curves, ensuring comfortable legibility during long readings.

font-family: 'Plus Jakarta Sans', sans-serif;

Interactive Typography Sandbox

Type below to preview contrast, spacing, and sizing immediately.

H2 / Headline Level (30px / 1.875rem | Line height: 1.25)

He will teach us of his ways, and we will walk in his paths.

Body Large (16px / 1rem | Line height: 1.625)

He will teach us of his ways, and we will walk in his paths.

Accent Metadata Badge (11px / 0.68rem | Letter spacing: 0.1em) He will teach us of his ways, and we will walk in his paths.

3. Layout, Spacing & Geometry

Spatial system guidelines, corner curves, depth indicators, and interface grids.

The Spacing Scale

We enforce a 4px-8px step metric to maintain balanced layout rhythms.

4px (0.25rem)
p-1 / gap-1
8px (0.50rem)
p-2 / gap-2
12px (0.75rem)
p-3 / gap-3
16px (1.00rem)
p-4 / gap-4
24px (1.50rem)
p-6 / gap-6
32px (2.00rem)
p-8 / gap-8
Radius Small (8px)

Used on small elements like tags, buttons, list actions.

Radius Medium (12px)

Used on standard cards, inner layouts, and form fields.

Radius Large (16px)

Used on macro elements, hero containers, and model frames.

4. Component Blueprints

Direct CSS variables, padding constraints, and styling tokens for reproducing elements exactly.

Primary & Secondary Buttons

Primary Button (Interactive Preview)
Secondary Button (Interactive Preview)
Specs Blueprint
  • Height / Sizing: py-3 (12px top/bottom), px-6 (24px left/right).
  • Typography: Semibold to Bold (fontweight: 700), size: 14px (text-sm).
  • Borders: Secondary relies on solid 2px border-2 using primary color token #2C4A3E.
  • Corner Curve: Medium-Large radius 12px (rounded-xl).

Interactive Content Card

Card Element Component
Theology Session
The Kingdom of God on Earth

A systematic study tracking the physical establishment of Christ's millennial rule from Jerusalem, as predicted by the prophets.

Specs Blueprint
  • Container: bg-white with 1px structural outer border #E4E9DC.
  • Corner Curve: Large radius 16px (rounded-2xl).
  • Shadow Matrix: Delicately soft elevation elevation (shadow-sm to shadow-md on hover transitions).
  • Inner Padding: Constant p-6 (24px padding on all sides).

Meeting Schedule Block

Schedule Row Element
SUN 11a
Memorial Meeting

One Tree Hill Institute

Weekly
Specs Blueprint
  • Background: Light off-white backdrop (bg-stone-50).
  • Timing Block: Fixed w-10 h-10 square with 8px radius corner curves (rounded-lg) and primary background color.
  • Dividers: Internal layout elements should use a clean gap-4 space offset (16px spacing gap).

5. Adaptive Specs & Assets

Standard responsive viewport layouts, media rules, and graphic assets treatment.

Responsive Media Targets

To maintain layout stability on both small smartphone glass panels and desktop screens, implement these adaptive media boundaries:

Mobile Breakpoint (sm): 640px & above
Tablet Breakpoint (md): 768px & above
Desktop Breakpoint (lg): 1024px & above
Max Content Width: 1280px (max-w-7xl)

SVGs & Imagery Treatment

Any icon assets, symbols, or graphical embellishments must conform to the following stylistic guidelines to match our clean theological interface design:

  • Line Weights: All structural SVG paths must use 1.5px or 2px stroke lines. Do not use filled visual silhouettes unless they represent simple media players.
  • Curves: Stroke corners must be assigned stroke-linecap="round" and stroke-linejoin="round" properties.
  • Colors: Rely on primary #2C4A3E or muted neutral stone #7C8375. Avoid highly saturated primaries (pure blues, deep reds) unless they represent critical weather warnings.