Lattice DESIGN.md

People management platform with a clean, professional aesthetic — white surfaces, teal-green brand, and performance-review-first UI.

1. Visual Theme & Atmosphere

Lattice is the operating system for people teams — it centralizes performance reviews, OKRs, employee engagement, and career development. The interface is clean and purposeful, balancing the depth of HR workflows with an approachable, modern aesthetic. A teal-green brand accent signals progress and growth, matching the platform's mission to help people and companies thrive. The UI is structured and data-rich but avoids the sterile feel of traditional enterprise HR software.

2. Color Palette & Roles

3. Typography Rules

css--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-base: 14px;
--font-size-md: 16px;
--font-size-lg: 18px;
--font-size-xl: 22px;
--font-size-2xl: 28px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.3;
--line-height-base: 1.5;

4. Component Stylings

css/* Primary Button */
.button-primary {
  background: #00897B;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.button-primary:hover { background: #00695C; }

/* OKR Progress Card */
.okr-card {
  background: #FFFFFF;
  border: 1px solid #DDE3EE;
  border-radius: 8px;
  padding: 20px;
}
.okr-card__title {
  font-size: 14px;
  font-weight: 600;
  color: #1A2332;
  margin-bottom: 6px;
}
.okr-card__owner { font-size: 12px; color: #667085; margin-bottom: 14px; }
.okr-progress {
  height: 8px;
  background: #DDE3EE;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 6px;
}
.okr-progress__fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.3s ease;
}
.okr-progress__fill--green { background: #27AE60; }
.okr-progress__fill--yellow { background: #F9A825; }
.okr-progress__fill--red { background: #E53935; }
.okr-card__percentage {
  font-size: 12px;
  font-weight: 600;
  color: #1A2332;
}

/* Review Rating Scale */
.rating-scale {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}
.rating-option {
  flex: 1;
  padding: 10px 6px;
  border: 2px solid #DDE3EE;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #667085;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.rating-option:hover { border-color: #00897B; color: #00897B; }
.rating-option--selected {
  border-color: #00897B;
  background: #E0F2F1;
  color: #00695C;
  font-weight: 600;
}

/* Employee Row */
.employee-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #DDE3EE;
  cursor: pointer;
  transition: background 0.08s;
}
.employee-row:hover { background: #F7F8FC; }
.employee-row__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E0F2F1;
  color: #00897B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}
.employee-row__name { font-size: 14px; font-weight: 500; color: #1A2332; }
.employee-row__role { font-size: 12px; color: #667085; }

/* Status Chip */
.status-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}
.status-chip--complete { background: #ECFDF5; color: #065F46; }
.status-chip--in-progress { background: #EFF6FF; color: #1E40AF; }
.status-chip--not-started { background: #F3F4F6; color: #6B7280; }
.status-chip--overdue { background: #FEF2F2; color: #991B1B; }

5. Layout Principles

6. Depth & Elevation

css.shadow-card { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.shadow-modal { box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
.shadow-dropdown { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

7. Do's and Don'ts

Do:

• Use teal (#00897B) for all active states, progress fills (when on track), and CTAs
• OKR progress bars are color-coded: green (on track), yellow (at risk), red (off track)
• Performance rating options are full-width flex items with border selection
• Employee rows show circular avatar with initials

Don't:

• Don't use the teal for off-track or at-risk states — those have their own semantic colors
• Don't condense the rating scale — each option needs enough tap/click area
• Don't use dark backgrounds — Lattice is a bright, professional workspace

8. Responsive Behavior

9. Agent Prompt Guide

You are designing for Lattice — people management and performance platform.
Use a white background (#FFFFFF) with light gray surfaces (#F7F8FC) for sidebars and panels.
Teal (#00897B) is the brand color — CTAs, active nav, focus rings, on-track OKR progress.
OKR cards show a title, owner, color-coded progress bar, and completion percentage.
Progress bars are color-coded: green (on track), amber (at risk), red (off track).
Performance review rating scales use full-width bordered options with teal selected state.
Tone is professional, people-focused, growth-oriented, and structured for HR teams.