Kalstore®

Kalstore®

Preview image. Unlock full-res

Warm minimal gallery

Industryecommerce
Palette
#faf9f7
#ffffff
#242424
#585a5a
#727272
#d3d3d3
#edecea
#f1ba35
#30250b
#6c3c3c
#90abc8
#458e71

Kalstore® exudes a calm and focused aesthetic, built on a clean canvas of soft, near-white neutrals. Color is used sparingly but effectively, primarily through a vivid golden yellow for key actions and branding, and a palette of muted, earthy tones for a sophisticated accent. Typography is a key element, utilizing a custom geometric sans-serif with precise letter-spacing to convey a refined, authoritative, yet approachable tone. Components are lightweight with minimal borders and subtle radii, allowing content to take center stage. Use Canvas (#faf9f7) as the default page background to maintain consistent visual warmth. Apply ABCDiatype with specific letter-spacing: -0.0400em for display headings (71px+), -0.0300em for large headings, -0.0200em for medium headings, -0.0020em for body text, and 0.1000em for uppercase elements. Utilize Action Gold (#f1ba35) exclusively for primary calls to action, high-visibility icons, and brand highlights. Implement an 8px border-radius for all primary interactive elements and cards, with 4px for smaller badges and navigation items. Maintain a clear visual hierarchy with Text Primary (#242424) for prominent information and Text Secondary (#585a5a) or Text Muted (#727272) for supportive text. Separate sections with a vertical gap of 40px, and ensure a default element gap of 10px between inline items. Accentuate product feature cards using the specific muted and vivid accent colors (e.g., Card Accent Red #6c3c3c, Card Accent Green #458e71) as background or border/text colors. Avoid generic blue for links; instead use Text Primary (#242424) with a specific underline style, or Action Gold (#f1ba35) for explicit call-to-action links. Do not introduce new border radii beyond 8px, 4px, 1px or 16px (for specific card asymmetry), as this will break the consistent feel. Refrain from adding heavy drop shadows; implement only the subtle pre-defined shadow for elevated components like modals/popups. Do not use highly saturated colors for backgrounds or large sections; reserve them for small, intentional accents as defined in the accent palette. Avoid mixing ABCDiatype with other sans-serif fonts; Arial is strictly reserved as a fallback. Do not deviate from the defined letter-spacing values for ABCDiatype; these are crucial for the brand's typographic identity. Never use the default browser link color (#0000ee) in any context.

More like this