# UT Starter Theme Guide

Last updated: 2026-08-05 19:08 EDT

## Purpose

`UT Starter` is a University of Tennessee-inspired presentation and lesson theme built for Elevate. It uses Smokey Gray structure, Tennessee Orange accents, bold heading treatment, warm off-white backgrounds, and subtle line-based textures.

This guide is meant to help reuse the theme in other projects while keeping the visual identity and the accessibility intent intact.

## Core Design Intent

- Use Tennessee Orange as an accent, not as the main reading color.
- Use dark neutrals for readable body text.
- Use bold, high-impact headings.
- Use subtle geometric texture for visual identity without reducing readability.
- Keep the theme feeling structured, editorial, and academic rather than playful or overly decorative.

## Core Tokens

### Primary colors

| Token | Value | Use |
|---|---|---|
| Tennessee Orange | `#FF8200` | Accent rules, borders, markers, dividers, patterned highlights |
| Smokey Gray | `#4B4B4B` | Large structural surfaces, header panels, dark containers |
| Accessible Dark | `#262626` | Primary text, especially on light and orange backgrounds |
| White | `#FFFFFF` | Surface color and reversed text on dark gray |

### Supporting colors

| Token | Value | Use |
|---|---|---|
| Warm page background | `#F7F4EF` | Main page field |
| Light border | `#D9D5CE` | Borders and separators on light surfaces |
| Deep charcoal | `#2F2F2F` | Darker support color |
| Soft gray | `#ECE9E3` | Placeholder / muted fill support |
| Deep-mode surface | `#3A3A3A` | Elevated surfaces inside dark layouts |
| Deep-mode light text | `#F2F2F2` | Muted text inside dark layouts |

### Typography

| Role | Value |
|---|---|
| Body font | `Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif` |
| Heading font | `"Arial Black", Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif` |
| Heading weight | `900` |
| Body tone | clean, readable, conventional |

### Sizing

| Token | Value |
|---|---|
| Content width | `820px` |
| Wide media width | `1080px` |
| Shadow | `0 18px 52px rgba(38, 38, 38, 0.16)` |

## Reusable CSS Variables

```css
:root {
  --lesson-bg: #f7f4ef;
  --lesson-surface: #ffffff;
  --lesson-text: #262626;
  --lesson-muted: #4b4b4b;
  --lesson-border: #d9d5ce;
  --lesson-accent: #ff8200;
  --lesson-accent-dark-text: #262626;
  --lesson-charcoal: #4b4b4b;
  --lesson-charcoal-deep: #2f2f2f;
  --lesson-soft-gray: #ece9e3;
  --lesson-shadow: 0 18px 52px rgba(38, 38, 38, 0.16);
  --lesson-width: 820px;
  --lesson-wide: 1080px;
}
```

## Background Modes

### 1. UT clean

- Warm off-white field: `#F7F4EF`
- Minimal structure
- Best default for long reading

### 2. Campus line

- Warm background plus faint crossing diagonal line texture
- Texture uses transparent Smokey Gray patterning
- Good when you want UT character without heavy structure

### 3. Smokey band

- Dark horizontal band at the top
- Orange striped accent band beneath it
- Good for strong section starts and presentation-style lessons

### 4. Title field

- Smokey Gray dark field with an orange corner marker
- Uses lighter text and darker inset surfaces
- Best for hero moments, title sections, or strong transitions

## Component Guidance

### Lesson header

- Dark Smokey Gray panel
- Left orange border
- Orange underline bar extending below the panel
- White title text
- White kicker with small orange square marker

### Headings

- Bold, compact, high-impact
- Use dark text on light surfaces
- Use white only on dark gray containers

### Image treatment

- Images are squared off rather than soft and rounded
- Use an orange top rule for image framing
- Use warm neutral or striped placeholder styling if no image is present

### Image + text blocks

- Use a white surface with orange top rule
- Pair visual with strong supporting copy
- Keep the copy area spacious and structured

### Buttons

Primary button:

- Smokey Gray fill
- White text
- Orange bottom bar

Secondary button:

- White fill
- Smokey Gray border
- Orange left border accent
- Dark text

### Accordion / card-style interactive surfaces

- White or surface-colored card
- Orange top rule
- Strong heading weight
- Moderate shadow

### Divider

- Uppercase label
- Thick orange rules on both sides

## Accessibility Guidance

This theme was intentionally built to avoid the most common UT-brand accessibility mistake: using Tennessee Orange as a text color on white, or putting white text on Tennessee Orange.

### WCAG 2.1 targets to follow

- Normal text: at least `4.5:1` contrast for AA
- Large text: at least `3:1` contrast for AA
- UI boundaries and meaningful graphics: at least `3:1` where applicable

### Measured contrast ratios from this theme

| Foreground | Background | Ratio | Result |
|---|---|---:|---|
| `#262626` | `#F7F4EF` | `13.79:1` | Excellent |
| `#4B4B4B` | `#F7F4EF` | `7.95:1` | Excellent |
| `#FFFFFF` | `#4B4B4B` | `8.72:1` | Excellent |
| `#262626` | `#FF8200` | `6.09:1` | Safe for normal text |
| `#FFFFFF` | `#3A3A3A` | `11.37:1` | Excellent |
| `#F2F2F2` | `#4B4B4B` | `7.79:1` | Excellent |
| `#FFFFFF` | `#FF8200` | `2.49:1` | Fail for text |
| `#FF8200` | `#FFFFFF` | `2.49:1` | Fail for text |

### Safe text pairings

- `#262626` on `#F7F4EF`
- `#262626` on `#FFFFFF`
- `#4B4B4B` on `#F7F4EF`
- `#FFFFFF` on `#4B4B4B`
- `#262626` on `#FF8200` when text must appear on orange
- `#FFFFFF` or `#F2F2F2` on dark charcoal / gray surfaces

### Pairings to avoid

- `#FF8200` text on white
- `#FF8200` text on warm off-white
- `#FFFFFF` text on `#FF8200`
- large areas of orange behind paragraph text

### Best practice for Tennessee Orange

Use orange for:

- borders
- rules
- markers
- underlines
- striped or patterned highlights
- icon accents
- emphasis bars

Use orange cautiously for:

- large background panels only when text is dark, not white
- badges or chips with very limited text

Do not use orange for:

- body copy
- paragraph links without another treatment
- reversed text with white lettering

## Accessibility Rules of Thumb

1. Treat Tennessee Orange as a brand accent first, not a text color.
2. Put readable content on white, warm off-white, dark gray, or charcoal.
3. If text must sit on orange, use `#262626`, not white.
4. Keep decorative textures faint enough that they never compete with text.
5. Maintain heading impact through weight, scale, and panel treatment rather than low-contrast color tricks.
6. Preserve focus states and interactive affordances with clear outlines and not color alone.

## Suggested Usage Pattern for Other Projects

### Recommended formula

- Page background: warm off-white
- Structural panels: Smokey Gray
- Primary text: Accessible Dark
- Accent system: Tennessee Orange
- Hero / title moment: dark panel + orange edge + white title
- Content cards: white with orange top or side rule

### Good project fit

- higher education lessons
- course modules
- internal academic microsites
- faculty guides
- presentation-style web pages
- institutional explainers

### Less ideal fit

- playful consumer products
- highly illustrative brands
- minimal monochrome systems
- interfaces that need soft rounded contemporary SaaS styling

## Example Snippets

### Accessible orange-accent heading card

```css
.ut-heading-card {
  background: #ffffff;
  border-left: 12px solid #ff8200;
  box-shadow: 0 12px 32px rgba(38, 38, 38, 0.08);
  color: #262626;
  padding: 20px 24px;
}
```

### Accessible UT-style hero

```css
.ut-hero {
  background: #4b4b4b;
  border-left: 18px solid #ff8200;
  color: #ffffff;
  padding: 28px 34px 30px;
  position: relative;
}

.ut-hero::after {
  background: #ff8200;
  bottom: -18px;
  content: "";
  height: 6px;
  left: 34px;
  position: absolute;
  width: min(420px, 58%);
}
```

### Accessible UT button

```css
.ut-button {
  background: #4b4b4b;
  border: 0;
  border-bottom: 6px solid #ff8200;
  color: #ffffff;
  display: inline-flex;
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  padding: 13px 18px;
  text-decoration: none;
}
```

## Special Note

Within Elevate, one intentional exception was made for the app mark: a white `E` on a Tennessee Orange tile. That works as a logo mark, but it should not be treated as a general text-accessibility rule for interface or content design.

## Source Summary

This guide is based on:

- [src/themes/ut-starter/theme.css](/Users/jasonjohnston/Documents/Elevate/src/themes/ut-starter/theme.css)
- [src/themes/ut-starter/theme.json](/Users/jasonjohnston/Documents/Elevate/src/themes/ut-starter/theme.json)
- [src/App.tsx](/Users/jasonjohnston/Documents/Elevate/src/App.tsx)
- [src/styles.css](/Users/jasonjohnston/Documents/Elevate/src/styles.css)