Join Parker

Join Parker

Preview image. Unlock full-res

Matte bluescreen material

Industryfintech
Palette
#1b1d20
#ffffff
#6e6e6e
#f2f1ec
#e1dfd8
#a3a3a3
#5196fe
#f9754e
#f4ebff

Parker's visual system evokes a smart, modern financial platform with a distinct material quality. Cool grays and crisp whites form a quiet canvas that allows a vibrant blue and a warm orange to highlight key interactive elements and brand accents. Typography is compact and precise, maintaining readability while maximizing information density. Softly rounded cards and buttons provide a friendly tactile feel, contrasting with the directness of the color palette. Always use the Parker Orange (#f9754e) for primary call-to-action button fills to maintain brand recognition and visual hierarchy. Apply 24px border-radius to all content cards and major section containers to maintain the friendly, soft aesthetic. Utilize Inter for all body text, UI labels, and most headings, adjusting weight to 400 for body and 600/700 for distinct headings. Ensure a horizontal padding of 24px and vertical of 8px for all buttons to achieve the consistent pill shape. Use Parker Blue (#5196fe) for all interactive links and secondary action outlines, ensuring clear visual distinction from primary actions. Maintain maximum content width at 1200px, centered on the page, with consistent 64px vertical section gaps. Use Gambetta for high-impact headlines (e.g., above 48px) with its defined tighter letter spacing (e.g., -0.08em at 64px) for a focused, bold statement. Do not use multiple accent colors for CTA buttons; restrict chromatic fills to Parker Orange and outlines to Parker Blue. Avoid sharp corners; all major UI elements like cards and buttons must adhere to the specified border-radii of 24px or 1584px. Do not introduce new typefaces; rely solely on Inter and Gambetta to preserve typographic rhythm and brand voice. Do not use generic gray backgrounds for prominent cards; use Pure White (#ffffff) or Ash Gray (#f2f1ec). Avoid heavy drop shadows; elevation should be subtle, defined by a single rgba(0,0,0,0.1) 0px 2px 10px 0px shadow for cards, or none at all. Do not vary line-height arbitrarily; stick to the defined ratios of 1.05 and 1.16 for display text and 1.42-1.55 for body text. Do not use less than 8px element gap for components unless explicitly defined in a specific component recipe.

More like this