# You-attend Design System

> High-contrast utility meets academic reliability through a monochrome foundation punctuated by semantic red and corporate blue.

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

## TL;DR
You-attend utilizes a functional, Bootstrap-derived aesthetic that prioritizes legibility and clear information hierarchy. The system is built on a foundation of pure white (#ffffff) and deep charcoal (#212529), creating a high-contrast environment for academic data. While the brand identifies as monochrome, it employs a specific "Danger Red" (#dc3545) for critical messaging and a "Primary Blue" (#0d6efd) for interactive focus and links. Typography is anchored by Nunito, a rounded sans-serif that softens the otherwise rigid, grid-based layout. Components feature conservative 6px to 8px radii, avoiding the "pill" trends of modern SaaS in favor of stable, rectangular geometry.

## Signature DNA
1. **The Semantic Red Anchor** (#dc3545 is used not just for errors, but as a primary brand identifier for major headings and hero text on the home and about pages).
2. **Rounded Academic Sans** (The consistent use of Nunito at weights 400-700 provides a friendly, accessible layer to a high-density data tool).
3. **Subtle Elevation via Surface Tiers** (The use of #f8f9fa for section backgrounds and #dee2e6 for borders creates a clear "paper-on-desk" layered effect).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.canvas}` | `#ffffff` | Page background, button text, carousel captions | 22 | 1.0 | `--bs-body-bg` |
| `{colors.ink}` | `#212529` | Primary body text, secondary surfaces | 15 | 1.0 | `--bs-body-color` |
| `{colors.border}` | `#dee2e6` | Card outlines, dividers, input borders | 13 | 1.0 | `--bs-border-color` |
| `{colors.surface-soft}` | `#f8f9fa` | Alternating section backgrounds | 4 | 1.0 | `--bs-tertiary-bg` |
| `{colors.ink-muted}` | `#505458` | Secondary descriptive text | 48 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.brand-danger}` | `#dc3545` | Hero headings, error states, critical alerts | 4 | 1.0 | `--bs-red` |
| `{colors.brand-primary}` | `#0d6efd` | Links, focus rings (decorative only) | 2 | 1.0 | `--bs-primary` |

### Semantic
| Token | Hex | Role | Source |
|---|---|---|---|
| `{colors.success}` | `#198754` | Valid form states | `--bs-form-valid-color` |
| `{colors.warning}` | `#ffc107` | Warning alerts | `--bs-yellow` |
| `{colors.info}` | `#0dcaf0` | Informational callouts | `--bs-cyan` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Nunito | 400, 500, 600, 700 | Headings, Body, Buttons | Nunito (Google Fonts) | SIL Open Font |
| system-ui | 400, 500 | Secondary headings, Fallback | Sans-serif | OS Default |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h1}` | 28px | 33.6px | normal | 500 | Main Page Hero | `h1.text-danger` |
| `{type.h2}` | 30px | 36px | normal | 500 | Section Titles | `h3.section-title` |
| `{type.h3}` | 24px | 28.8px | normal | 500 | Sub-section headings | `h2.text-danger` |
| `{type.h5}` | 20px | 24px | normal | 500 | Card titles | `h5` |
| `{type.body-lg}` | 17px | 25.5px | normal | 400 | Section subtitles | `p.section-subtitle` |
| `{type.body}` | 16px | 24px | normal | 400 | Default running text | `div.topbar` |
| `{type.button}` | 16px | 24px | normal | 700 | Primary CTA text | `a.btn.btn-custom` |
| `{type.caption}` | 12px | 18px | normal | 400 | Footer copyright | `p.mb-0` |

### Principles
1. **Headings use Medium weight.** Most display type is set to 500 (Medium) rather than Bold to maintain a clean academic look.
2. **High contrast for body.** Body text consistently targets #212529 on #ffffff for maximum legibility.
3. **Semantic coloring of type.** Red (#dc3545) is used as a typographic highlight for key brand statements.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 31 |
| `{space.sm}` | 12px | 6 |
| `{space.md}` | 16px | 42 |
| `{space.lg}` | 24px | 5 |
| `{space.xl}` | 48px | 8 |
| `{space.section}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, sharp UI | 78 occurrences |
| `{radius.sm}` | 6px | Text inputs | `radius: 6px` |
| `{radius.md}` | 8px | Content cards, Surfaces | `radius: 8px` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Default state for all cards and inputs | `shadow: none` |
| Focus | `0 0 0 0.25rem rgba(13, 110, 253, 0.25)` | Input focus states | `--bs-focus-ring-color` |

## Components
### Tier 1: Foundational
#### Text Input
**Role:** Data entry for contact and login forms.
**Pages observed:** Home
**Spec:** Background #ffffff | Text #212529 | Border 1px #dee2e6 | Radius 6px | Padding 6px 12px | Type {type.body}
**States observed:** Default | Focus: captured

#### Primary Button
**Role:** Main call to action ("Find Out More", "Submit").
**Pages observed:** Home, About
**Spec:** Background #20c997 (Teal) | Text #ffffff | Border 0px | Radius 8px | Padding 16px | Type {type.button}
**States observed:** Default | Hover: not captured

### Tier 2: Patterns
#### Content Card (Surface)
**Role:** Grouping feature information or university logos.
**Pages observed:** Home, Pricing
**Spec:** Background transparent | Text #505458 | Border 1px #dee2e6 | Radius 8px | Padding 16px
**States observed:** Default

#### Section Header
**Role:** Introducing new content blocks.
**Pages observed:** Home, About
**Spec:** Text #dc3545 | Type {type.h2} | Margin-bottom {space.xl}
**States observed:** Default

### Tier 3: Surface-specific
#### Topbar
**Role:** Global navigation and utility links.
**Pages observed:** Home, About, Pricing
**Spec:** Background #212529 | Text #ffffff | Height 40px | Type {type.body}
**States observed:** Default

#### Footer
**Role:** Legal links and social icons.
**Pages observed:** Home, About
**Spec:** Background #212529 | Text #ffffff | Padding {space.xl} | Type {type.caption}
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max-width | 1320px (Bootstrap Container) |
| Gutter | 24px |
| Section Padding | 80px vertical |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | <768px | Navigation collapses to hamburger; padding reduced to 16px. |
| Desktop | >1200px | 12-column grid active; 1320px max-width container. |

## Imagery & decoration
- **Iconography:** Uses simple glyph-based icons (Pin, Mobile, List) in a muted blue/purple tone.
- **Photography:** Uses hardware mockups (Laptops) to ground the software in physical reality.
- **Avoidance:** No complex gradients, no heavy drop shadows, no organic/blob shapes.

## Do's
- Use #dc3545 for primary brand headings to maintain identity.
- Apply Nunito 500 for all heading levels to ensure academic "softness".
- Use #f8f9fa for alternating background sections to break up long pages.
- Maintain 1px #dee2e6 borders on all card-based layouts.
- Ensure all body text is at least 16px for accessibility.

## Don'ts
- **Wrong:** Using #0d6efd (Primary Blue) for main headings. **Right:** Use #dc3545. **Reason:** Red is the established brand accent for display type.
- Do not use "pill" (9999px) radius on buttons; stick to 8px.
- Do not use pure black (#000000) for body text; use #212529.
- Do not apply shadows to cards; use borders for containment.
- Do not mix Nunito with other decorative serifs.

## Quick start
```css
/* CSS Custom Properties */
:root {
  --color-brand-red: #dc3545;
  --color-brand-teal: #20c997;
  --color-ink: #212529;
  --color-canvas: #ffffff;
  --color-border: #dee2e6;
  --font-main: 'Nunito', sans-serif;
  --radius-md: 8px;
}
```

## Known gaps
- Hover and Active states for the teal primary button were not captured in the static evidence.
- The specific mobile breakpoint for the navigation toggle was not explicitly defined in the CSS variables captured.
- Transition timings for interactive elements were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://you-attend.com | 1440px | 2026-06-06 |
| Pricing | https://you-attend.com/pricing | 1440px | 2026-06-06 |
| About | https://you-attend.com/about | 1440px | 2026-06-06 |