Videoconferencia

# Videoconferencia — Style Reference
> Collaborative daylight workspace — every surface a white panel under fluorescent clarity, single violet pulse marking where to act.
Theme: light

Microsoft Teams' page feels like a sunlit open-plan office — bright white expanses punctuated by the distinctive Teams violet-purple (#5d5bd4) and dense navy text (#17253d). The light is almost clinical, with near-zero ambient color tinting, pulling all chromatic attention to the vivid Teams purple accent and photography. Segoe UI Variable's tight negative tracking at display sizes (−0.025em at 48px) is the typographic signature — Microsoft's own variable font doing what no system font substitute can replicate, with headlines that compress horizontally as they scale up. Cards sit as floating white rectangles with a 24px corner radius and a paired micro-shadow system, never harsh — rgba(0,0,0,0.12) 0px 0px 2px plus rgba(0,0,0,0.14) 0px 2px 4px creates a faint lift without drama. The only pill-shaped element (200px radius) reserved for one secondary UI button variant signals interactivity hierarchy without color alone.

## Colors
| Name | Value | Role |
|------|-------|------|
| Teams Violet | `#5d5bd4` | Primary CTA buttons, active nav underlines, badge backgrounds — the single saturated signal on an otherwise achromatic page. Vivid violet-purple stands apart from Microsoft blue (#0067b8) to brand Teams distinctly within the Microsoft ecosystem. |
| Teams Midnight | `#333275` | Hover and pressed states for Teams Violet buttons, nav link active text — darker violet that deepens without shifting hue. |
| Teams Deep | `#424197` | Button pressed/focus states — intermediate violet between Teams Violet and Teams Midnight. |
| Microsoft Blue | `#0067b8` | Link text, icon fills, navigation affordances — the legacy Microsoft hyperlink blue used on informational elements, never on CTA buttons. |
| Ink Navy | `#17253d` | Primary text, headings, body copy, icons — near-black with a distinct blue cast that avoids pure black harshness. |
| Abyss Navy | `#0e1726` | Darkest heading weight, button text on transparent dark-background variants. |
| Steel | `#616161` | Secondary body text, captions, placeholder text, icon color for inactive states. |
| Graphite | `#262626` | Nav link text, body text at medium emphasis. |
| Cloud | `#ffffff` | Page backgrounds, card surfaces, button text on dark. |
| Frost | `#f2f2f2` | Footer background, alternate section background. |
| Lace | `#fbf5fb` | Subtle lilac-tinted surface for decorative hero background areas. |
| Ice Border | `#e6f2fb` | Badge borders, light blue-tinted separator lines. |
| Mist | `#bdc5d2` | Subtle borders, dividers, input outlines in resting state. |
| Near White | `#fefefe` | Card surface background — one step off pure white to reduce glare on elevated surfaces. |

## Typography
| Family | Role |
|--------|------|
| Segoe UI Variable Text | The primary workhorse: all headings, body text, nav labels, buttons, badges. Microsoft's own variable font whose optical sizing axis auto-adjusts letterform construction at different sizes — tighter tracking at display scale (48px at −0.01em to −0.025em) is baked into the font's design intent, not added post hoc. |
| Segoe UI Variable Display | Hero and section headings at large scale — the Display optical axis activates wider, more open letterforms than the Text axis at the same point size, making headlines feel more authoritative at 48px and above. |
| Segoe UI Variable Small | Tight-tracked small labels and fine-print contexts. |
| Segoe UI | System fallback used in footer, some nav utility links, and browser-rendered UI chrome. No tracking adjustments — falls back to OS default rendering. |