Style Detail - Abstract Shapes / Geometric

See this style applied to a real page — identical content, different stylesheet.

About This Style

The abstract shapes/geometric design style is a visual approach that emphasizes non-representational forms, geometric patterns, and bold color combinations. It does not attempt to depict real-world objects but rather creates visual interest and conveys emotions or concepts through the interplay of shapes, lines, colors, and textures.

This style often appears modern, vibrant, artistic, and can be very eye-catching. It can range from simple geometric compositions to complex, dynamic abstract patterns.

Main Features:

Geometric Forms: Extensive use of basic geometric elements like circles, squares, triangles, polygons, and straight lines.
Abstract Shapes: Employs irregular, organic, or free-flowing non-realistic shapes.
Bold Colors: Often uses vivid, high-contrast colors, though softer palettes can also be used; color choices are always intentional.
Dynamic Compositions: Element layouts can be asymmetrical, overlapping, or arranged in a way that creates a sense of movement and energy.
Patterns & Repetition: Geometric shapes or abstract elements may be repeated to form unique visual rhythms or textures.
Emphasis on Form over Literal Content: Visual aesthetics and the expression of form itself take precedence over the direct presentation of specific content.
Modern & Artistic Feel: This style inherently carries an avant-garde and artistic aura.
Typography Integration: Text itself can be treated as a design element, using bold fonts or unconventional layouts.

Example AI Prompt

Design a website interface with an abstract geometric style. Use a color palette of vibrant pink (#f8a1d1), deep purple (#b870a9), and a light cream (#f6eacc) for the background, with teal (#7fdee1) accents. The layout should feature overlapping geometric shapes like circles and rectangles with irregular border radii (e.g., some elements with 'border-radius: 50% 20% / 10% 40%;'). Use 'Montserrat' font for headings and text. Backgrounds of sections could be semi-transparent white or cream over a patterned main background. Buttons should be pill-shaped (large border-radius). The overall mood should be playful, modern, and artistic.

(English explanation: Design a website interface with an abstract geometric style. Use a color palette of vibrant pink (#f8a1d1), deep purple (#b870a9), and a light cream (#f6eacc) for the background, with teal (#7fdee1) accents. The layout should feature overlapping geometric shapes like circles and rectangles with irregular border radii (e.g., some elements with 'border-radius: 50% 20% / 10% 40%;'). Use 'Montserrat' font for headings and text. Backgrounds of sections could be semi-transparent white or cream over a patterned main background. Buttons should be pill-shaped (large border-radius). The overall mood should be playful, modern, and artistic.)

Theme CSS Snippets

The following is the core CSS code for applying this abstract shapes/geometric style as a global theme (body.theme-abstract-geometric). It defines colors, fonts, and basic element styles:


/* ==========================================================================
   19. Abstract Shapes / Geometric Theme
   ========================================================================== */

body.theme-abstract-geometric {
    --abs-c1: #f8a1d1; /* Pink */
    --abs-c2: #b870a9; /* Purple */
    --abs-c3: #f6eacc; /* Cream */
    --abs-c4: #7fdee1; /* Teal */

    --page-bg: var(--abs-c3);
    --page-bg-gradient: none;
    /* Add abstract shapes background using SVG for better control and scalability */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-opacity='0.1'%3E%3Ccircle fill='%23f8a1d1' cx='50' cy='50' r='50'/%3E%3Ccircle fill='%23b870a9' cx='100' cy='100' r='50'/%3E%3Ccircle fill='%237fdee1' cx='0' cy='100' r='30'/%3E%3Crect fill='%23f8a1d1' width='20' height='20' x='70' y='10' transform='rotate(30 70 10)'/%3E%3C/g%3E%3C/svg%3E");
    
    --text-color: #333; /* Dark text for readability on cream background */
    --heading-color: var(--abs-c2); /* Purple headings */
    --link-color: var(--abs-c2); /* Purple links */
    --link-hover-color: var(--abs-c1); /* Pink link hover */
    
    --border-color: var(--abs-c4); /* Teal border for accents */
    
    /* For content sections, use a semi-transparent white or the cream color */
    --card-bg: rgba(255, 255, 255, 0.8); 
    --card-shadow: 0 3px 8px rgba(0,0,0,0.08);
    --card-hover-shadow: 0 5px 12px rgba(0,0,0,0.12);
    
    --header-bg: var(--abs-c1); /* Pink header */
    --header-text-color: #fff; /* White text on pink header */
    --header-shadow: none;
    
    --footer-text-color: var(--abs-c2); /* Purple text on cream footer */
    --footer-bg: var(--abs-c3); /* Cream footer, matching page bg */
    
    --button-bg: var(--abs-c2); /* Purple buttons */
    --button-text-color: white;
    --button-hover-bg: #935b87; /* Darker purple hover */
    --button-border: none;
    
    --button-secondary-bg: rgba(255, 255, 255, 0.4); /* Semi-transparent white secondary */
    --button-secondary-text-color: var(--abs-c2); /* Purple text */
    --button-secondary-hover-bg: rgba(255, 255, 255, 0.7);
    --button-secondary-border: none;
    
    --prompt-bg: rgba(255, 255, 255, 0.5); /* Semi-transparent white for prompt area */
    --prompt-text-color: #444; /* Darker text for prompt readability */
    
    --base-font: var(--font-montserrat);
    --heading-font: var(--font-montserrat);
    
    --card-border-radius: 15px; /* Regular rounded corners for sections */
    --button-border-radius: 30px; /* Pill-shaped buttons */
}

/* Specific adjustments for the theme */
body.theme-abstract-geometric .card { 
    /* This rule applies to general cards if not overridden by data-style-id.
       For detail page sections, the --card-bg and --card-border-radius from above will be used.
       The very irregular border-radius (50% 20% / 10% 40%) is a specific feature of the *homepage card*
       for this style, not necessarily for all content sections within the theme.
       If you want all sections to have that irregular shape, you'd apply it here or to .style-detail-section.
    */
    border: 1px solid var(--border-color); 
    /* If you want the homepage card's irregular shape for all theme cards/sections: */
    /* border-radius: 50% 20% / 10% 40%; */
}

body.theme-abstract-geometric h1,
body.theme-abstract-geometric h2,
body.theme-abstract-geometric h3 {
    text-align: center; /* Center headings for a more playful/abstract feel */
    font-weight: 700;
}

Note: Abstract and geometric styles offer a lot of freedom. Try different shape combinations, color pairings, and layouts to create unique visual effects. The key is a sense of form and visual impact.

Resource Download (Example)

Download a zip file containing a more complete CSS definition for this style.

Download abstract-geometric.zip