Stykka

Stykka

Preview image. Unlock full-res

Architectural blueprint on white marble

Industrydesign
Palette
#000000
#ffffff
#f6f6f6
#2e2e20
#c9c9c9
#00000008

Stykka's visual system evokes a sense of understated craftsmanship and natural permanence. It combines a restrained, almost monochromatic palette with a strong typographic presence and material-focused imagery. The design is airy and structured, using subtle layering and natural light to highlight content rather than bold colors or heavy UI elements. Typography varies between a clean sans-serif for main content and a distinctive monospaced font for key statements, creating an intentional rhythm. Use Canvas White (#ffffff) as the primary background for all page sections unless an image or specific brand block dictates otherwise. Apply Absolute Zero (#000000) for all primary text content and main headings to maintain stark contrast and strong legibility. Ensure large headlines, particularly in hero sections, use Azeret Mono 400 with a wide letter spacing of -0.010em and a line height of 1.0. Group related UI elements with an element gap of 10px to maintain a slightly compact but clear arrangement. Implement a border-radius of 16px for all card-like containers, and 8px for buttons and interactive navigation elements. Use Ash Gray (#f6f6f6) sparingly for subtle background distinctions or low-prominence UI elements, such as card backgrounds that are not meant to pop. For ghost buttons, define text and border in Absolute Zero (#000000) with a transparent background, ensuring a subtle call to action. Avoid using highly saturated colors for backgrounds or large UI areas; maintain a largely monochromatic base palette. Do not introduce strong box shadows or heavy elevation effects; the design relies on subtle background shifts and natural light. Do not deviate from the specified negative letter spacing for large type; it is a signature element of the typographic style. Do not use generic, unstyled links. All links should explicitly reference Absolute Zero for text, with optional border-bottom interaction states. Avoid arbitrary custom padding values for cards and buttons; stick to the defined 33px vertical / 24px horizontal for cards and 10px vertical / 36px horizontal for buttons. Do not introduce decorative gradients or complex overlays; keep surfaces and backgrounds clean and simple. Do not use system sans-serif for headlines or main body text; it is reserved for captions and minor functional text.

More like this