Expo

Expo's design system feels like a precise technical blueprint on a minimalist canvas. It leverages a stark achromatic palette as its foundation, creating an atmosphere of clarity and focused utility. The singular bold blue (#0090ff) is reserved strictly for interactive elements like primary buttons and specific navigation items, acting as an indicator light in an otherwise subdued interface. Subtle rounded corners, particularly the exaggerated 36px radius on primary buttons, soften the otherwise sharp, text-heavy presentation, introducing an element of approachability to a highly technical subject. Use Inter font family exclusively for all text elements to maintain typographic consistency. Apply #0090ff (Expo Blue) only to primary interactive elements and active states to preserve its signalling value. Employ borderRadius: 36px for all primary buttons and pill-shaped elements to establish a consistent soft touch. Prioritize the neutral palette of #1c2024, #ffffff, #60646c, #f0f0f3 for structure and content to maintain visual clarity. Utilize 4px as the base unit for all spacing, scaling up in multiples (e.g., 8px, 16px, 20px, 24px) for harmonious spatial relationships. Use text links that are #1c2024 (Midnight Ink) with 0px border radius and 0px padding, making them visually subtle until interaction. Do not introduce new typefaces; rely solely on Inter for all text. Avoid using highly saturated, non-blue chromatic colors for primary UI elements; maintain the achromatic base with specific blue accents. Do not use box-shadows for elevation; rely on background color changes or borders for differentiation between surface levels. Do not deviate from the established padding and radius values for buttons and interactive components; uniformity is key. Avoid applying a background color to generic text links; they should appear as plain text until hovered or active. Do not use strong, contrasting borders on elements that are meant to be visually soft or secondary; use subtle neutrals like #d9d9e0 instead.