X (formerly Twitter)

X (formerly Twitter) employs a high-contrast, functionally driven design system built on a monochrome base with a singular, vivid blue accent. Content takes precedence, rendered against crisp white and subtle gray surfaces, defined by thin borders and minimal elevation. Typography is compact and precise, maintaining a dense information flow, while rounded corners provide a subtle approachability to functional elements like buttons and cards. Use Midnight Ink (#000000) for all primary text and headings to ensure maximum contrast. Apply Puck Blue (#1d9bf0) exclusively for primary action buttons, active states, and brand iconography. Utilize 9999px border-radius for all interactive buttons, profile avatars, and social links to maintain a fluid, rounded aesthetic. Maintain a clear visual hierarchy with Canvas White (#ffffff) for primary content surfaces and Mist (#eff3f4) for subtle background distinctions. Enforce a base unit of 4px for all spacing decisions, translating to common increments like 4px, 8px, 12px, and 16px for clear rhythm. Employ the TwitterChirp font for all UI elements, utilizing its varying weights (400, 500, 700, 800) to indicate hierarchy without size changes where appropriate. Frame content within a pageMaxWidth of 1070px for optimal readability and balanced composition on larger screens. Do not introduce new chromatic colors; adhere strictly to the Puck Blue (#1d9bf0) as the sole accent color. Avoid heavy shadows or gradients; the system prefers subtle elevation with Whisper Gray (#e0e4e7) or thin Border Silver (#cfd9de) outlines. Do not deviate from the specified font sizes and line heights for TwitterChirp to preserve the compact and high-density information display. Never use Times or any other serif font for primary UI text; it is reserved for system fallback or specific legacy contexts. Avoid applying large, decorative radii to content cards unless specifically defined, maintaining a 16px radius for standard content blocks. Do not cluster elements excessively; ensure a minimum elementGap of 4px to maintain visual breathing room. Resist using bold headlines universally; instead, leverage TwitterChirp's range of weights and the designated type scale to create nuanced visual hierarchy.