Preview image. Unlock full-res
Crisp digital canvas with energetic orange
Skiff adopts a crisp, functional aesthetic with a dominant light theme and a single vibrant orange as its brand accent. The design leans into distinct typographic contrasts using a custom sans-serif display font for impactful headlines and system fonts for readability in body text. UI elements are sharp and precise, avoiding heavy shadows or elaborate gradients, focusing instead on clear boundaries and ample negative space. The overall impression is one of modern utility with a hint of warm, energetic personality. Prioritize Canvas White (#ffffff) for page backgrounds and primary content surfaces. Use Pitch Black (#000000) for all primary text and critical UI elements to ensure high contrast. Apply Brand Orange (#ef5a3c) sparingly as a functional accent for active states, key data points, and brand communication. Ensure all interactive elements have a visible Border Light (#dfdfdf) border or a subtle dark overlay (rgba(0,0,0,.08)) for definition. Employ Skiff Sans Display at 64px, weight 380, with a negative letter-spacing of -0.0100em for all main page headlines. Maintain a comfortable density with an 8px elementGap and 48px sectionGap for clear content separation. Use 4px border-radius for subtle component rounding, 12px or 16px for cards, and 36px for distinct pill shapes. Avoid using multiple chromatic colors; limit the accent palette strictly to variations of Brand Orange. Do not introduce heavy shadows or complex gradients unless explicitly defined in component specifications. Do not use typography weights heavier than 400; the system relies on lighter weights for a modern, understated aesthetic. Do not deviate from the established spacing scale (multiples of 4px) to retain consistent rhythm and density. Do not use highly saturated photography; imagery should be clean, focused, or abstract to complement the UI. Do not use any blue as an accent or primary color, as it would conflict with the brand's orange identity. Do not use default browser link styling; all links should use Pitch Black text and Brand Orange on hover or active.
