Family Trust Design.md

gistfile1.txt

# Family Trust Federal Credit Union — Design System

**Website:** https://www.familytrust.org/
**Tagline:** Trusted Financial Guidance for Every Season of Life

---

## Brand Positioning

Family Trust Federal Credit Union is a local, member-driven institution that provides the services of a traditional bank with the personal care of a community partner. For individuals and families who want a financial partner they can trust, Family Trust grows alongside its members — offering guidance, confidence, and connection through every season of life. Unlike large banks that feel distant and impersonal, Family Trust is rooted in community and defined by relationships.

**Preferred language:** member, community, neighbor, guide, partner, confidence, belonging, family
**Avoid:** customer, consumer, applicant, solutions, transaction, execute

---

## Tone of Voice

Warm · Approachable · Clear · Accessible · Encouraging · Empowering · Reliable · Understanding · Community-focused

Write in sentence case for body copy (conversational). Use ALL CAPS for headlines (authoritative, structured). Keep messaging supportive and confidence-building. Preferred calls to action: "Apply Today", "Start Your Journey with Confidence", "Join Today".

---

## Color Palette

| Name | Hex | Role |
|---|---|---|
| Navy | `#1C3461` | Primary — trust, stability, authority |
| Golden Yellow | `#FDB83C` | Accent — warmth, optimism, emphasis (use sparingly) |
| Sky Blue | `#6699CC` | Secondary — clarity, openness, approachability |
| Light Blue | `#C6DAE7` | Secondary — soft, personal, gentle backgrounds |
| Warm Gray | `#D3D0CA` | Secondary — neutral balance, warmth |
| White | `#FFFFFF` | Base — clean, open, modern |

**Usage notes:**
- Navy + White = primary combination for most applications
- White logo on Navy backgrounds; full-color logo on light/neutral backgrounds
- Golden Yellow is an accent only — never a dominant color
- Sky Blue pairs with Navy for branded headers and featured areas
- Light Blue works well for card backgrounds, tinted sections, and footer tabs

---

## Typography

**Font stack:**

```html
<link rel="stylesheet" href="https://use.typekit.net/hnt5sir.css">
```

**Engravers' Gothic Regular** — Headlines
- ALL CAPS only
- Tracking: +300 (letter-spacing: 0.2em–0.3em)
- Use for H1, H2, H3, and UI section labels

**Adobe Garamond Pro** — Body Copy
- Sentence case for conversational tone
- Italic for P1/emphasis
- Regular for P2/P3 body text

### Type Scale

| Level | Font | Size | Case | Tracking |
|---|---|---|---|---|
| H1 | Engravers' Gothic Regular | 27pt / ~36px | ALL CAPS | +300 |
| H2 | Engravers' Gothic Regular | 21pt / ~28px | ALL CAPS | +300 |
| H3 / Subhead | Engravers' Gothic Regular | 15pt / ~20px | ALL CAPS | +300 |
| P1 | Adobe Garamond Pro Italic | 17pt / ~23px | Sentence | 0 |
| P2 | Adobe Garamond Pro | 15pt / ~20px | Sentence | 0 |
| P3 | Adobe Garamond Pro | 13pt / ~17px | Sentence | 0 |

**CSS Implementation:**

```css
/* Fonts */
.font-headline {
  font-family: "engravers-gothic", serif;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 400;
}

.font-body {
  font-family: "adobe-garamond-pro", serif;
  font-weight: 400;
}

.font-body-italic {
  font-family: "adobe-garamond-pro", serif;
  font-style: italic;
}

/* Heading levels */
h1 { font-size: 2.25rem; }   /* ~36px */
h2 { font-size: 1.75rem; }   /* ~28px */
h3 { font-size: 1.25rem; }   /* ~20px */
p.lead { font-size: 1.4375rem; } /* ~23px */
p      { font-size: 1.25rem; }   /* ~20px */
p.small { font-size: 1.0625rem; } /* ~17px */
```

---

## Logo System

### Available Configurations

- **Horizontal** — Primary use; wordmark left, icon right
- **Vertical / Stacked** — Icon above wordmark
- **Icon only** — App icons, favicons, social avatars

### Color Variants

| Variant | Use When |
|---|---|
| Full color (Navy + Sky Blue) | White or light neutral backgrounds |
| All white | Navy or dark blue backgrounds |
| All black | Single-color print, embossing |
| Light blue + white | Mid-blue backgrounds |

### Clear Space

Maintain open space of at least the height of the logotype on all sides. Minimum size: "Federal Credit Union" text must be no smaller than 9pt.

### Family Trust Business Sub-brand

The Business sub-brand uses a distinct seedling icon (dark background with white/blue plant motif) paired with italic *Family Trust* in gray and **BUSINESS** in Engravers' Gothic. Apply on white or black backgrounds only.

---

## Iconography & Imagery

### Photography Guidelines

**Choose images that feel:**
- Natural, candid, warm, and optimistic
- Regionally relevant and diverse
- Well-lit with balanced color and a clear subject
- Supportive of the story and message (family milestones, community, financial confidence)

**Avoid:**
- Black & white, tinted, or oversaturated images
- Busy backgrounds or distracting angles
- Branded clothing, awkward poses, or blurry shots

### Graphic Elements

- Curved/circular photo crops for warmth and softness
- Thin rule lines in Navy or Sky Blue as section dividers
- Light Blue (`#C6DAE7`) tinted boxes for callout sections and sidebar tabs
- Diagonal or curved accent shapes to add energy without busyness

---

## Layout Principles

- Clean layouts with ample white space
- Generous line spacing for body copy (1.5–1.6)
- Left-aligned body text; centered headlines for hero/marketing contexts
- Two-column grids for product comparison (e.g., Business Checking)
- Consistent section padding; never crowded
- Use horizontal rules sparingly to delineate major sections

---

## Components

### Buttons

```css
/* Primary */
.btn-primary {
  background: #1C3461;
  color: #FFFFFF;
  font-family: "engravers-gothic", serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.75rem 1.75rem;
  border: none;
}

.btn-primary:hover {
  background: #6699CC;
}

/* Secondary / Outline */
.btn-secondary {
  background: transparent;
  color: #1C3461;
  border: 1.5px solid #1C3461;
  font-family: "engravers-gothic", serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.75rem 1.75rem;
}
```

### Cards / Info Boxes

```css
.card-light {
  background: #C6DAE7;
  padding: 2rem;
  border-top: 3px solid #1C3461;
}

.card-white {
  background: #FFFFFF;
  border: 1px solid #D3D0CA;
  padding: 2rem;
}
```

### Section Divider

```css
.divider {
  border: none;
  border-top: 1px solid #6699CC;
  margin: 2.5rem 0;
}
```

### Header / Nav

- Background: `#1C3461` (Navy)
- Logo: White variant
- Nav links: White, Engravers' Gothic, uppercase, tracking +200
- Active/hover: `#FDB83C` accent underline or text color

### Footer

- Background: `#1C3461` or `#C6DAE7` tinted
- Text: White on Navy; Navy on Light Blue
- Include: logo, phone (803.367.4100), website (FAMILYTRUST.ORG), NCUA notice

---

## CSS Custom Properties

```css
:root {
  /* Colors */
  --color-navy:        #1C3461;
  --color-gold:        #FDB83C;
  --color-sky-blue:    #6699CC;
  --color-light-blue:  #C6DAE7;
  --color-warm-gray:   #D3D0CA;
  --color-white:       #FFFFFF;

  /* Typography */
  --font-headline: "engravers-gothic", serif;
  --font-body:     "adobe-garamond-pro", serif;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;

  /* Borders */
  --radius-sm: 2px;
  --radius-md: 6px;
  --border-accent: 3px solid var(--color-sky-blue);
}
```

---

## Brand in Use

Applications should reflect:
- Clarity, warmth, member-centered messaging
- Clean layouts with ample spacing
- Consistent typography + color palette
- Photography that reinforces human connection

Avoid anything that feels corporate, cold, or transactional. Every touchpoint — from a brochure to a web form — should feel like a trusted neighbor, not a distant institution.

---

*Family Trust Federal Credit Union · FAMILYTRUST.ORG · 803.367.4100*
*Insured by NCUA*