🎨 Minimalist Elegant Art Page
Instructions
Create a webpage based on the content provided by the user. The webpage style requirements are as follows:
### I. Visual Style Positioning - **Artistic Hand-drawn Style**: Adopting a line art style, blending modern digital design with traditional hand-drawn aesthetics. - **Color Scheme**: Using neutral colors (off-white/light gray) as the base, paired with dark gray main text, and using orange-red (accent color) as the visual focal color. - **Brand Tone**: Refined, artistic, and warm, targeting a discerning user group. ### II. Layout Structure Principles **Hero Section (First Screen Design)** - Left-right column layout (60:40 golden ratio) - Left side: - Oversized title (Display Font, 72-96px), dark font, strong visual impact - Key data highlighted in accent color (e.g., "15 Cities, 4749 locations") - Concise and powerful subtitle copy, stating the core value proposition - Ample white space, creating a high-end feel - Right side: - Customized hand-drawn illustrations, occupying 50% of the visual space - Consistent Illustration Style: Line drawing + local color accents - Illustration content deeply integrated with the brand story - **Navigation Bar Design** - Minimalist top navigation, fixed positioning - Logo + 2-3 main menu items - Right-side icon group (search/favorites/menu) - Transparent or pure white background with subtle shadows - **Content Card Area** - Card grid layout (3-4 columns, responsive) - Each card includes: - Title (Heading 3, 32-40px) - Description (2-3 lines, 16-18px, line height 1.6) - Accompanying hand-drawn illustration (consistent with the main visual style) - Light background (#F5F3F0), rounded corners (8-12px) - Hover state: Slightly rising + deepened shadow - ### III. Illustration System Specifications **Illustration Creation Guidelines** 1. 2. **Line Processing**: - Use 1-2px irregular hand-drawn lines to simulate realistic painting texture - Maintain smooth lines with a touch of artificiality, avoiding excessive mechanicalness. 3. **Color Usage:** - 80% gray lines + 20% brand color fill - Orange-red used only to emphasize elements (people, windows, key buildings) - Background uses gradient beige (#FDFBF7 → #F5F1EB) - 5. **Scene Composition:** - Urban scenes: blending landmark buildings + everyday life scenes - Overhead or isometric perspective - Adding small figures to enhance narrative and intimacy - 7. **Detail Density:** - Rich foreground details, moderately simplified midground, and outlined background - Maintain visual hierarchy, guiding the eye to key information - 9. ### IV. Font System - **Display Font (Title):** Serif font, heavy and powerful (e.g., Freight Display, Tiempos) - **Body Font (Body Text):** Sans-serif, highly legible (e.g., Inter, Manrope) - **Font Size Ratio**: Uses a modular scale (1.25 or 1.333) - - **Font Weight Levels**: Light (300) / Regular (400) / Medium (500) / Bold (700) - ### V. Interaction Details - - **Micro-animations**: Cards float up 4-8px upon hover, transition time 300-400ms - - **Loading Status**: Uses a skeleton screen to maintain brand tone - - **Responsive Breakpoints**: - - Desktop: 1440px+ - - Tablet: 768-1439px - - Mobile: 375-767px - - ### VI. Design Output Requirements Each design output should include: 1. 2. Clear visual hierarchy (achieved through size/color/white space) 3. 4. At least one custom illustration (deeply related to the content, generated using Nano Banana Pro) 5. 6. 2-3 accent color highlights (not exceeding 7. 8. Ample breathing space (section spacing ≥ 120px) 9. 10. Clear user action path 11. --- **Design Philosophy**: Use artistic visual language to convey the brand's uniqueness and warmth. Every pixel serves to tell a story, not simply showcase functionality. The design should make users feel, "This is for people who appreciate life," rather than a cold, commercial product.
The web page illustrations were all generated by nano banana pro.
Description
Recommended by
nene@YouMind
Why we love this skill
This skill turns your content into minimalist elegant hand-drawn webpages, blending modern digital design with traditional aesthetics. It smartly generates custom illustrations and uses refined color and typography to create artistic, brand-warm webpages that make your product visually stand out.
Turn your content into an artistic, hand-drawn style webpage. Delicate line illustrations and color schemes give your information warmth and sophistication.
Related Skills
View all
WebpageExplorable Explainer Page Builder
A report explains. A page lets people find out for themselves. YouMind can already build webpages. Explorable Explainer decides what to build — it turns a piece of research, a dataset or a topic into a single interactive page in the tradition of newsroom graphics and explorable explanations: scroll-driven narrative, real charts, controls you can move, sources you can check. It plans before it codes. You approve a build plan first: the one question the page answers, the reveal — the moment the reader should feel "oh" — a five to eight section scroll spine, two to four interactions each justified by what the reader learns from moving it, and a data contract listing every number and where it came from. Then it builds one self-contained HTML file with no build step. Semantic markup. All numbers in a single editable DATA constant at the top. Scroll reveals that do not break on a phone. Every control a real, keyboard-operable form element with live text describing its current value. Accessibility is built in rather than bolted on: 4.5:1 contrast, visible focus rings, alt text everywhere, no meaning carried by colour alone, reduced-motion respected, responsive from 360px. Before handing over, it runs a five-point self-review and reports the results honestly: does the reveal actually land, does the page still read with JavaScript off, is the tab order sane, is every number traceable, is anything animating that a reader would want to stop. Two rules it will not break: it never invents data to make a chart look good, and it tells you when your numbers contradict your draft. For researchers, analysts, journalists, educators, indie founders and consultants who want their work to be explored rather than skimmed.
WebpageSoft Daylight Floating Web
Soft daylight style web design system: light sky-blue canvas (#ebf5ff), oversized display text with a fixed font weight of 500 (responsive up to 148px), 32px rounded cards + 9999px pills, near-black #181d27 solid CTA buttons, pastel color blocks, and floating 3D clay-style illustrations. Depth is achieved solely through tonal shifts from canvas to cards; content cards have zero shadow. Suitable for 'soft daylight style', '3D illustration landing pages', 'light blue canvas', 'rounded card style', 'SaaS homepage', 'Linear/Framer style', etc., with built-in accessibility and responsive constraints.
WebpageFashion Creative Design Page
A web design system with a fashion-editorial poster style: warm cream paper canvas (#fffef7), 300-weight oversized headlines (64–84px), full-bleed photography, zero shadows, square-corner cards + pill buttons with a 1440px radius. Suitable for needs such as "fashion design style", "magazine layout", "poster style", "art portfolio webpage", "studio portfolio", "gallery page". It can rewrite any content into a high-end fashion editorial style page.
🎨 Minimalist Elegant Art Page
Instructions
Create a webpage based on the content provided by the user. The webpage style requirements are as follows:
### I. Visual Style Positioning - **Artistic Hand-drawn Style**: Adopting a line art style, blending modern digital design with traditional hand-drawn aesthetics. - **Color Scheme**: Using neutral colors (off-white/light gray) as the base, paired with dark gray main text, and using orange-red (accent color) as the visual focal color. - **Brand Tone**: Refined, artistic, and warm, targeting a discerning user group. ### II. Layout Structure Principles **Hero Section (First Screen Design)** - Left-right column layout (60:40 golden ratio) - Left side: - Oversized title (Display Font, 72-96px), dark font, strong visual impact - Key data highlighted in accent color (e.g., "15 Cities, 4749 locations") - Concise and powerful subtitle copy, stating the core value proposition - Ample white space, creating a high-end feel - Right side: - Customized hand-drawn illustrations, occupying 50% of the visual space - Consistent Illustration Style: Line drawing + local color accents - Illustration content deeply integrated with the brand story - **Navigation Bar Design** - Minimalist top navigation, fixed positioning - Logo + 2-3 main menu items - Right-side icon group (search/favorites/menu) - Transparent or pure white background with subtle shadows - **Content Card Area** - Card grid layout (3-4 columns, responsive) - Each card includes: - Title (Heading 3, 32-40px) - Description (2-3 lines, 16-18px, line height 1.6) - Accompanying hand-drawn illustration (consistent with the main visual style) - Light background (#F5F3F0), rounded corners (8-12px) - Hover state: Slightly rising + deepened shadow - ### III. Illustration System Specifications **Illustration Creation Guidelines** 1. 2. **Line Processing**: - Use 1-2px irregular hand-drawn lines to simulate realistic painting texture - Maintain smooth lines with a touch of artificiality, avoiding excessive mechanicalness. 3. **Color Usage:** - 80% gray lines + 20% brand color fill - Orange-red used only to emphasize elements (people, windows, key buildings) - Background uses gradient beige (#FDFBF7 → #F5F1EB) - 5. **Scene Composition:** - Urban scenes: blending landmark buildings + everyday life scenes - Overhead or isometric perspective - Adding small figures to enhance narrative and intimacy - 7. **Detail Density:** - Rich foreground details, moderately simplified midground, and outlined background - Maintain visual hierarchy, guiding the eye to key information - 9. ### IV. Font System - **Display Font (Title):** Serif font, heavy and powerful (e.g., Freight Display, Tiempos) - **Body Font (Body Text):** Sans-serif, highly legible (e.g., Inter, Manrope) - **Font Size Ratio**: Uses a modular scale (1.25 or 1.333) - - **Font Weight Levels**: Light (300) / Regular (400) / Medium (500) / Bold (700) - ### V. Interaction Details - - **Micro-animations**: Cards float up 4-8px upon hover, transition time 300-400ms - - **Loading Status**: Uses a skeleton screen to maintain brand tone - - **Responsive Breakpoints**: - - Desktop: 1440px+ - - Tablet: 768-1439px - - Mobile: 375-767px - - ### VI. Design Output Requirements Each design output should include: 1. 2. Clear visual hierarchy (achieved through size/color/white space) 3. 4. At least one custom illustration (deeply related to the content, generated using Nano Banana Pro) 5. 6. 2-3 accent color highlights (not exceeding 7. 8. Ample breathing space (section spacing ≥ 120px) 9. 10. Clear user action path 11. --- **Design Philosophy**: Use artistic visual language to convey the brand's uniqueness and warmth. Every pixel serves to tell a story, not simply showcase functionality. The design should make users feel, "This is for people who appreciate life," rather than a cold, commercial product.
The web page illustrations were all generated by nano banana pro.
Description
Recommended by
nene@YouMind
Why we love this skill
This skill turns your content into minimalist elegant hand-drawn webpages, blending modern digital design with traditional aesthetics. It smartly generates custom illustrations and uses refined color and typography to create artistic, brand-warm webpages that make your product visually stand out.
Turn your content into an artistic, hand-drawn style webpage. Delicate line illustrations and color schemes give your information warmth and sophistication.
Related Skills
View allWebpageExplorable Explainer Page Builder
A report explains. A page lets people find out for themselves. YouMind can already build webpages. Explorable Explainer decides what to build — it turns a piece of research, a dataset or a topic into a single interactive page in the tradition of newsroom graphics and explorable explanations: scroll-driven narrative, real charts, controls you can move, sources you can check. It plans before it codes. You approve a build plan first: the one question the page answers, the reveal — the moment the reader should feel "oh" — a five to eight section scroll spine, two to four interactions each justified by what the reader learns from moving it, and a data contract listing every number and where it came from. Then it builds one self-contained HTML file with no build step. Semantic markup. All numbers in a single editable DATA constant at the top. Scroll reveals that do not break on a phone. Every control a real, keyboard-operable form element with live text describing its current value. Accessibility is built in rather than bolted on: 4.5:1 contrast, visible focus rings, alt text everywhere, no meaning carried by colour alone, reduced-motion respected, responsive from 360px. Before handing over, it runs a five-point self-review and reports the results honestly: does the reveal actually land, does the page still read with JavaScript off, is the tab order sane, is every number traceable, is anything animating that a reader would want to stop. Two rules it will not break: it never invents data to make a chart look good, and it tells you when your numbers contradict your draft. For researchers, analysts, journalists, educators, indie founders and consultants who want their work to be explored rather than skimmed.
WebpageSoft Daylight Floating Web
Soft daylight style web design system: light sky-blue canvas (#ebf5ff), oversized display text with a fixed font weight of 500 (responsive up to 148px), 32px rounded cards + 9999px pills, near-black #181d27 solid CTA buttons, pastel color blocks, and floating 3D clay-style illustrations. Depth is achieved solely through tonal shifts from canvas to cards; content cards have zero shadow. Suitable for 'soft daylight style', '3D illustration landing pages', 'light blue canvas', 'rounded card style', 'SaaS homepage', 'Linear/Framer style', etc., with built-in accessibility and responsive constraints.
WebpageFashion Creative Design Page
A web design system with a fashion-editorial poster style: warm cream paper canvas (#fffef7), 300-weight oversized headlines (64–84px), full-bleed photography, zero shadows, square-corner cards + pill buttons with a 1440px radius. Suitable for needs such as "fashion design style", "magazine layout", "poster style", "art portfolio webpage", "studio portfolio", "gallery page". It can rewrite any content into a high-end fashion editorial style page.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.