Stocketa

Stocketa

Preview image. Unlock full-res

Soft-edged transparency on cloud-white

Industryfintech
Palette
#e0dde2
#f0f0f0
#000000
#abbdcf
#9aa1b2
#a5afcb
#5b638c
#995bb9
#3a4766
#60eb8c
#84a1d0

Stocketa presents a focused financial interface with a light, almost ethereal feel. Its design language is dominated by soft, rounded forms and transparent components, creating a sense of lightness and openness. Color is used sparingly, primarily for functional accents and a subtle brand gradient, letting the content breathe. Typography is compact and precise, maintaining clarity within dense information displays, while nuanced shadows and inset effects give components a sophisticated, layered depth without heaviness. Use Canvas (#e0dde2) for primary backgrounds to maintain the light and airy theme. Apply a 100px border radius to all buttons and tags to create a consistent, soft, 'pill' shape. For primary headings, use Luminescent Violet (#995bb9) with averta standard weight 800 at appropriate scale sizes. Employ the Soft Card shadow (rgba(97, 110, 124, 0.114) 0px 4px 15px 0px with insets) for all elevated containers to achieve delicate depth. Ensure letter-spacing is applied precisely from the Typography tokens, especially for larger text, to maintain the sophisticated, compact feel (e.g., -1.57px at 98px). Separate sections with a sectionGap of 40px to provide comfortable visual breaks. Avoid heavy drop shadows or opaque backgrounds that would counteract the light and transparent aesthetic. Do not use saturated colors for large UI areas; chromatic colors are reserved for accents and small functional elements. Do not deviate from the averta standard font family or its specified weights and letter-spacing for UI text. Avoid sharp corners; all UI components should feature rounded corners, preferably 18px or 22px defaults, or 100px for pill shapes. Do not introduce new border colors for interactive elements; use Midnight Indigo Outline (#3a4766) for ghost action borders. Do not overuse bold weights; reserve averta standard 800 primarily for main headings.

More like this