Shuttle

Shuttle

Preview image. Unlock full-res

Crisp digital canvas

Industryproductivity
Palette
#ffffff
#f9f9f9
#e5e7eb
#b8b8b8
#000000
#a3a3a3
#525252
#0077ff
#f59e0b
#ef4444

Shuttle employs a crisp, utility-focused aesthetic, blending a stark monochrome palette with a single vibrant blue accent. Surfaces are predominantly white or near-white, providing a clean digital canvas for functional elements. Typography is compact and precise, maintaining a high information density without visual clutter, while subtle shadows and rounded corners soften interactive components. Use InterVariable font with the default negative letter-spacing of -0.025em for all text elements to maintain a compact, tight aesthetic. Prioritize Canvas White (#ffffff) for primary content backgrounds and Cloud Gray (#f9f9f9) for secondary grouped elements to create subtle depth. Apply Shuttle Blue (#0077ff) exclusively for primary calls to action and active states to guide user interaction. Borders should primarily use Border Fog (#e5e7eb) at 1px solid, maintaining a light, clean separation of elements. Implement 8px border-radius for interactive elements like buttons and inputs, and 16px for content cards to unify component shaping. Separate major page sections with a vertical gap of 128px to ensure ample breathing room and clear content distinctions. Elevate primary content cards using the prominent shadow rgba(0, 0, 0, 0.25) 0px 25px 50px -12px to give them visual priority. Avoid using highly saturated colors outside of the defined brand and semantic palette; maintain a predominantly neutral visual space. Do not vary letter-spacing for different text sizes or roles, as InterVariable's consistent -0.025em is a signature styling choice. Refrain from introducing heavy or opaque background colors for cards or containers; favor transparent or very light backgrounds. Do not use box-shadows beyond the specified subtle options; the design minimizes aggressive 3D effects. Avoid mixed border radii on the same component (e.g., 8px for one corner, 16px for another); ensure consistent rounding. Do not introduce gradients unless they are purely decorative and do not interfere with legibility or functional contrast. Do not use excessive visual decoration or embellishment; the system prioritizes clarity and functional simplicity.

More like this