Krea

Krea

Generate, edit, and enhance images, videos, and 3D assets with Krea's creative AI suite. Start for free with real-time tools, powerful models, and collaborative workflows.

4.0
25
Visits
Visit

Available Pages

Design Analysis

Krea Home design analysis

Build a dark system that feels like a capable creative-tool marketplace rather than a minimal landing page. A dark creative-tool marketplace system built from black app chrome, rounded sidebar rails, massive action pills...

Overview

Build a dark system that feels like a capable creative-tool marketplace rather than a minimal landing page. A dark creative-tool marketplace system built from black app chrome, rounded sidebar rails, massive action pills, and rich media tiles.

Image Direction

Use media-heavy tiles, app-shell side rails, and carousel-like hero proof. The interface should feel abundant, current, and deeply product-led.

Colors

White is the strongest action fill. Everything else should remain within a tight band of black, charcoal, and readable gray so imagery and model previews can lead.

Typography

Use a strong contemporary sans that can survive dense tiles, long lists, and a lot of media. The voice should remain scannable and product-native.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Dark Model Marketplace

A dark creative-tool marketplace system built from black app chrome, rounded sidebar rails, massive action pills, and rich media tiles.

dense, glossy, and creative-tool native

Primary mode: darkcreative ai product marketingapp-marketplace

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
dense, glossy, and creative-tool native
Density
5
Variance
4
Motion
2
Signals
black app shell · left sidebar rail · giant white and dark pills · media-heavy model tiles

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Action White
#FFFFFF
App Black
#121212
Surface Black
#1A1A1A
Soft Border
rgba(255,255,255,0.12)
Text White
#F5F5F5
Text Gray
#A9A9AA
Hero Blue
#0E3555
Usage rules
White belongs to the strongest pill action and a few bright chips, not every card.
Most of the app shell should remain in layered dark neutrals so media tiles can dominate.
Metadata gray must stay readable against black and never drift into ghosted contrast.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
6px
sm
8px
md
16px
lg
24px
section
88px

Token Radii

Corner radii tokens with a live surface sample.

sm
8px
md
20px
lg
28px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Inter
large app-market headline voice
Body
Inter
dense creative-tool support voice
Mono
IBM Plex Mono
micro model and control label voice

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
4.3rem/—
Display
H2
2.25rem/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Use a clean sans with enough weight to survive the media-heavy environment. · Let metadata stay compact but obvious against the dark shell. · Keep long descriptions to a few lines so the marketplace feels scannable.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-220ms
Easing
cubic-bezier(.22,.8,.18,1)
Spring
stiffness 100, damping 18

Motion

Resolved motion token values.

PropertyValue
duration160ms-220ms
easingcubic-bezier(.22,.8,.18,1)
springstiffness 100, damping 18

Layout Principles

Use a persistent left rail to ground the product navigation while the main stage rotates media-heavy offers.
Let large hero and carousel tiles carry the visual richness, then organize the rest into dark grids.
Keep dense content scannable through strong grouping and obvious action pills.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Buttons primary
Base Attributes
Background
#FFFFFF
Text
#111111
Border
1px solid #FFFFFF
Radius
999px
Padding
12px 32px
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
rgba(255,255,255,0.06)
Text
#F5F5F5
Border
1px solid rgba(255,255,255,0.14)
Radius
999px
Padding
12px 32px
Min height
44px
Shadow
none
Typography
body
Cards media tile
Feature Card
Component preview content
Base Attributes
Background
#1A1A1A
Text
#F5F5F5
Border
1px solid rgba(255,255,255,0.08)
Radius
28px
Padding
24px
Shadow
none
Cards rail item
Feature Card
Component preview content
Base Attributes
Background
rgba(255,255,255,0.04)
Text
#F5F5F5
Border
1px solid transparent
Radius
8px
Padding
8px 16px
Shadow
none
Navigation sidebar item
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
#F5F5F5
Active text
#F5F5F5
Item padding
8px 16px
Item radius
8px
Badges model tag
Base Attributes
Background
#F4F1E3
Text
#111111
Border
1px solid #F4F1E3
Radius
999px
Padding
6px 10px
Shadow
none
Inputs field
Base Attributes
Background
#1A1A1A
Text
#F5F5F5
Border
1px solid rgba(255,255,255,0.12)
Radius
20px
Padding
12px 16px
Min height
44px
Placeholder
rgba(245,245,245,0.45)

Image direction

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Role
load-bearing
Media types
  • -
    hero carousel
  • -
    media tile
  • -
    sidebar app shell
Subject patterns
  • -
    creative model previews, dark glossy tiles, and dense left-rail navigation
Composition logic
  • -
    Keep the left rail steady while the main stage rotates immersive tiles and carousels.
  • -
    Use large media previews as the primary proof of capability.
Treatment rules
  • -
    White pills should stand out as immediate action anchors.
  • -
    Dark panels need enough separation to keep the marketplace legible.
Generation cues
  • -
    dark creative ai marketplace, left sidebar, giant white pill CTA, media-heavy tiles
Avoid
  • -
    No pale gray-on-black metadata drift.
  • -
    No minimalist empty shell that loses the sense of abundance.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not replace the huge action pills with square buttons.
  • -
    Do not flatten the marketplace tiles into low-image text blocks.
  • -
    Do not let metadata gray become unreadable against black panels.