# Texags Design System

> A high-contrast collegiate news environment where deep maroon anchors a dense, information-rich grid of athletics coverage.

**Source:** https://texags.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Texags utilizes a "monochrome-plus" system where a foundational achromatic palette of white (#ffffff) and black (#000000) is punctuated by a singular, high-authority primary color: Aggie Maroon (`#5e0025`). The layout is characterized by extreme density, utilizing a custom spacing scale and a mix of sharp-edged containers and circular UI elements. Typography relies on **Open Sans** for functional UI and headings, while **Roboto Slab** provides a traditional journalistic serif for article titles. The interface is highly structured, using 1px borders (#e6e6e6) to organize a massive volume of concurrent data streams and forum feeds.

## Signature DNA
1. **The Maroon Anchor** (The use of `#5e0025` as a high-contrast flood for headers, primary buttons, and category labels, creating immediate brand recognition against the white canvas).
2. **Dense Data Grids** (A heavy reliance on 1px `#e6e6e6` dividers and 14px-16px typography to maximize information density in "News & Notes" and "Post of the Day" sections).
3. **Circular Accent Geometry** (The use of 50% border-radius "Card" elements for sport-specific icons and avatars, contrasting with the otherwise sharp-edged, 0px radius layout).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|-------|-------------|------------|--------|
| `{colors.black}` | `#000000` | Primary text, footer background, high-contrast surfaces | 90 | 0.8 | Computed Style |
| `{colors.white}` | `#ffffff` | Page canvas, button text, primary borders | 89 | 0.8 | Computed Style |
| `{colors.gray-dark}` | `#333333` | Secondary body text | 59 | 0.8 | Computed Style |
| `{colors.gray-mid}` | `#6e6e6e` | Muted metadata and captions | 47 | 0.8 | Computed Style |
| `{colors.hairline}` | `#e6e6e6` | Default 1px section and card dividers | 29 | 0.8 | Computed Style |
| `{colors.gray-light}` | `#d8d8d8` | Subtle surface backgrounds for alternating rows | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|-------|-------------|------------|--------|
| `{colors.primary}` | `#5e0025` | Brand Maroon: Headers, primary CTAs, active states | 20 | 1.0 | `--primary-color` |
| `{colors.link}` | `#225fb2` | Standard hyperlink blue | 45 | 0.8 | Computed Style |
| `{colors.link-alt}` | `#286cac` | Secondary link blue / surface accents | 31 | 0.8 | Computed Style |
| `{colors.maroon-dark}` | `#371117` | Decorative: Darker maroon for gradients or depth | 2 | 1.0 | `--dark-color` |
| `{colors.maroon-light}` | `#4c2a30` | Decorative: Border accents | 1 | 1.0 | `--light-color` |

### Semantic
| Token | Hex | Role |
|------|-------|-------|
| `{colors.error}` | `#f2004e` | Alert/Alt color (declared as `--alt-color`) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|-------|-------|-------|
| **Open Sans** | 400, 600, 700, 900 | Primary UI, Headings, Navigation | N/A | Apache 2.0 |
| **Roboto Slab** | 400, 600 | Article titles, editorial body | N/A | Apache 2.0 |
| **Open Sans Condensed** | 700 | Compact navigation labels | N/A | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{typography.h2}` | 24px | normal | -0.48px | 400 | Section headers | `h2` |
| `{typography.title}` | 18px | normal | normal | 700 | Star counts, emphasis | `div.largeStarCount` |
| `{typography.article-title}` | 17px | 22.1px | normal | 600 | News headlines (Slab) | `div.title` |
| `{typography.body}` | 16px | normal | normal | 400 | Standard page text | `div#page` |
| `{typography.body-bold}` | 16px | normal | normal | 600 | Emphasized UI labels | `div.title` |
| `{typography.label-sm}` | 15px | 19.5px | -0.075px | 700 | News item headlines | `div.headline` |
| `{typography.nav-compact}` | 14px | normal | normal | 700 | Condensed menu items | `li:nth-of-type(1)` |
| `{typography.caption}` | 11px | 19px | normal | 600 | Dates and metadata | `div.date` |
| `{typography.micro}` | 9px | 20px | 0.45px | 600 | Sport category buttons | `div.sport.f5-btn` |

### Principles
1. **Sans-Serif for Utility:** All navigation, buttons, and metadata use Open Sans to maintain legibility at high densities.
2. **Slab-Serif for Narrative:** Roboto Slab is reserved for content titles to provide a traditional "newspaper" feel.
3. **Tight Tracking on Large Type:** Headings at 24px use -0.48px letter spacing to maintain visual tension.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
|------|-------|-------------|
| `{spacing.xs}` | 5px | 10 |
| `{spacing.sm}` | 10px | 38 |
| `{spacing.md}` | 15px | 17 |
| `{spacing.lg}` | 25px | 24 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-------|-------|
| `{radius.sharp}` | 0px | Default for all containers, headers, and buttons | 319 occurrences |
| `{radius.sm}` | 3px | Form inputs and small rounded buttons | `Rounded Button` |
| `{radius.full}` | 50% | Sport icons and circular profile avatars | `Card` component |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-------|-------|
| Flat | none | The system is entirely flat; no shadows are captured in source. | 0 shadow occurrences |

## Components

### Tier 1: Foundational

#### Surface (Default)
**Role:** Standard content container
**Pages observed:** 1
**Spec:** Background: transparent / Text: #000000 / Border: 1px #e6e6e6 / Radius: 0px / Padding: 0px
**States observed:** Default: captured

#### Button (Primary)
**Role:** Main call to action
**Pages observed:** 1
**Spec:** Background: #5e0025 / Text: #ffffff / Border: 0px / Radius: 0px / Padding: 0px 7px / Typography: 9px Open Sans
**States observed:** Default: captured | Hover: #6f052f (via `--primary-hover-color`)

### Tier 2: Patterns

#### Rounded Button
**Role:** Secondary actions or category tags
**Pages observed:** 1
**Spec:** Background: #5e0025 / Text: #ffffff / Border: 0px / Radius: 3px / Padding: 0px / Typography: 14px Open Sans
**States observed:** Default: captured

#### Sport Icon Card
**Role:** Circular navigation or category indicators
**Pages observed:** 1
**Spec:** Background: #000000 / Text: #225fb2 / Border: 0px / Radius: 50% / Padding: 0px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### News Feed Item
**Role:** Individual story listing in "News & Notes"
**Pages observed:** 1
**Spec:** Background: transparent / Text: #000000 / Border-bottom: 1px #e6e6e6 / Padding: 8px 0px 10px 10px
**States observed:** Default: captured

#### Footer Disclaimer
**Role:** Legal and site information
**Pages observed:** 1
**Spec:** Background: #000000 / Text: #ffffff / Typography: 11px Open Sans / Padding: 20px
**States observed:** Default: captured

## Layout
| Property | Value |
|------|-------|
| Page Max-Width | 1440px (observed) |
| Main Content Gap | 25px (`{spacing.lg}`) |
| Sidebar Width | ~300px |

## Do's
- Use `#5e0025` for all primary user actions and section headers.
- Maintain 0px border radius for all major structural containers.
- Use Roboto Slab exclusively for article headlines to preserve editorial character.
- Separate dense list items with 1px `#e6e6e6` borders.
- Use 50% border radius only for icon-based navigation or avatars.

## Don'ts
- **Wrong:** Using a generic red (#ff0000) for buttons. **Right:** Use `#5e0025`. **Reason:** Brand identity is strictly tied to Aggie Maroon.
- **Wrong:** Applying drop shadows to cards. **Right:** Use 1px borders for separation. **Reason:** The system is flat and shadowless.
- **Wrong:** Using Roboto Slab for functional UI text like "Submit" or "Search". **Right:** Use Open Sans.
- **Wrong:** Mislabeling sub-brand colors as parent primary. **Right:** Only `#5e0025` is the parent primary.

## Quick start

```css
/* CSS Variables */
:root {
  --primary-maroon: #5e0025;
  --primary-hover: #6f052f;
  --text-main: #000000;
  --text-muted: #6e6e6e;
  --border-subtle: #e6e6e6;
  --font-ui: 'Open Sans', sans-serif;
  --font-editorial: 'Roboto Slab', serif;
}
```

## Known gaps
- Hover states for secondary blue links were not explicitly captured in the token evidence.
- Mobile-specific breakpoint transitions for the multi-column sidebar were not fully detailed in the provided component specs.
- Specific shadow tokens were not found, confirming a strictly flat design language.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|-------|-------|
| Homepage | https://texags.com | 1440x900 | 2026-06-06 |