Lone Star College System

Overview

Lone Star College System is a public higher education institution serving Texas with 200+ programs spanning university transfer, skilled trades, and online degrees. The design system embodies institutional pride and accessibility through a bold, confident aesthetic rooted in Institutional Authority—a visual language that combines deep navy blues (#003768) with energetic accent reds (#b30838) and bright sky blues (#2392e8). The brand personality is approachable yet professional, speaking directly to working adults and first-generation students seeking affordable pathways to economic mobility. The UI prioritizes clarity and directness: every element serves a purpose, every color choice signals action or hierarchy, and every interaction removes friction from the enrollment journey.

The voice is practical, encouraging, and solution-focused. Lone Star avoids jargon and speaks in concrete outcomes: "Earn your degree in 2 years" rather than "Flexible scheduling options." The brand celebrates student success stories and emphasizes real career outcomes. Example sentence in brand voice: "Start your nursing degree this fall and graduate debt-free with our workforce partnership program."

Colors

The color system is built on institutional trust (primary navy #003768) paired with energetic secondary and tertiary accents that signal action and opportunity. Primary (#003768) anchors the navigation, headers, and foundational UI elements—it is the color of authority and stability, appearing in the header bar at 100% opacity and in button states at full saturation. Secondary (#b30838), a deep crimson, is reserved for high-priority CTAs ("Donate," "Apply," "Request Info") and appears at 100% opacity on white backgrounds with padding 12px 32px and border-radius 55px. Tertiary (#2392e8), a bright sky blue, supports secondary actions and highlights, creating visual rhythm without competing for attention. The surface stack (white #ffffff down to #cccccc) provides neutral breathing room; on-su

Typography

The typography system uses Futura Std (with fallbacks to arial, helvetica, sans-serif) across all scales, establishing a cohesive, professional voice. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major page titles; Headline-lg (40px, 600 weight) anchors section introductions; Headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) form the reading layer, with generous line-height (1.5x font size) ensuring legibility on mobile and desktop. Label-md (14px, 600 weight, 0.02em letter-spacing) and Label-sm (12px, 500 weight, 0.03em letter-spacing) are used for buttons, badges, and metadata. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) to smal

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on the viewport with 24px gutters on desktop and 12px on mobile. Hero sections span full-width with background imagery and a semi-transparent overlay (rgba(0, 0, 0, 0.3) with blur(2px)) to ensure text legibility. Section spacing uses the lg token (40px) for vertical separation between major content blocks, creating a rhythm that feels spacious without excess. Container padding follows the gutter token (24px) on desktop, reducing to 12px on tablets and 8px on mobile. The primary CTA ("Donate," "Apply") is positioned in the top-right navigation at 100% opacity with secondary CTAs ("Request Info," "Ask") to its left. Cards and content containers use md spacing (24px) for internal padding, with 12px (sm) for compact list

Elevation & Depth

Elevation is conveyed through subtle shadows and layering rather than dramatic depth. Level 1 (Base): flat surfaces with no shadow, used for body backgrounds and neutral containers. Level 2 (Standard Card): box-shadow 0 4px 12px rgba(0, 0, 0, 0.08), applied to cards, modals, and lifted content blocks—this creates a soft separation from the background without visual heaviness. Level 3 (Elevated/Hover): box-shadow 0 16px 40px rgba(0, 0, 0, 0.12), applied on card-hover and modal focus states to signal interactivity. Navigation bars and fixed headers use Level 2 shadows (0 4px 12px rgba(0, 0, 0, 0

Shapes

The shape philosophy is Institutional Clarity—sharp, purposeful corners that communicate professionalism while maintaining approachability through selective rounding. Buttons use full rounding (border-radius 55px or 9999px) to signal action and create a friendly, inviting call-to-action; this applies to all primary, secondary, and tertiary buttons uniformly. Cards and content containers use lg rounding (1rem or 16px) for a balanced, modern appearance that softens hard edges without appearing playful. Input fields use asymmetric rounding (55px 0px 0px 55px on the left, sharp on the right) when

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Primary buttons (button-primary) use backgroundColor {colors.primary} (#003768), textColor white, padding 12px 32px, height 48px, border-radius 55px, fontWeight 900, and fontSize 16px. On hover (button-primary-hover), shift to backgroundColor {colors.primary-container} (#104d7c) with a smooth transition (150ms ease-out). Secondary buttons (button-secondary) use backgroundColor {colors.secondary} (#b30838) with identical padding and height, signaling high-priority actions like "Donate" or "Apply." Tertiary buttons (button-tertiary) use backgroundColor {colors.tertiary} (#2392e8) for supporting actions. Ghost buttons (button-ghost) have transparent background with a 2px solid border in {co

Do's and Don'ts

**Do**

• Do use primary (#003768) for navigation, headers, and foundational UI elements to establish institutional authority and consistency.
• Do reserve secondary (#b30838) and tertiary (#2392e8) for high-priority CTAs and supporting actions; never use both in the same component.
• Do maintain 4.5:1 contrast ratio between text and background colors; test all color combinations with WCAG AA standards.
• Do apply full rounding (55px or 9999px) to all buttons to create a unified, action-oriented visual language.
• Do use the lg spacing token (40px) for vertical separation between major content sections to create breathing room.
• Do apply box-shadow 0 4px 12px rgba(0, 0, 0, 0.08) to cards and lifted surfaces for subtle, professional elevation.
• Do use Futura Std consistently across all typography scales; never mix font families within a single component.
• Do apply focus states (box-shadow: 0 0 0 3px rgba(0, 55, 104, 0.1)) to all interactive elements for keyboard accessibility.

**Don't**

• Don't use primary and secondary colors together in the same component; always separate them with neutral surfaces or whitespace.
• Don't apply shadows deeper than box-shadow 0 16px 40px rgba(0, 0, 0, 0.12); excessive depth undermines institutional clarity.
• Don't mix rounding styles within a single component family (e.g., all buttons must use 55px, not a mix of 16px and 55px).
• Don't use text smaller than 12px (label-sm) for body content; reserve small sizes for metadata and captions only.
• Don't place text directly on photography without a semi-transparent overlay (minimum rgba(0, 0, 0, 0.3)) or text-shadow.
• Don't exceed 1280px container max-width; content that stretches beyond this becomes difficult to read on ultra-wide displays.
• Don't use more than three accent colors (primary, secondary, tertiary) in a single page section; visual noise reduces clarity.
• Don't animate transitions faster than 150ms or slower than 300ms; respect user expectations for responsive, snappy interactions.