# Vectordelia (ベクターデリア)

> A mid-2000s to early-2010s visual language that made flat vector graphics proliferate across advertising, music graphics and game interfaces. Vivid curves, flowers, birds, human silhouettes, speakers, splashes and gradient blocks spread outward from a center. It was named Vectordelia or Frutiger Metro retrospectively; it predates and is distinct from Microsoft's typographic Metro interface.

- IndexStyle No.738 — https://indexstyle.org/styles/vectordelia
- Kind: Style · Family: Digital Retro · Era: mid-2000s–early 2010s / retrospective name
- Mood: Exhilaration, Play, Nostalgia
- What this family collects: Each replays the sense of the future that old computer and appliance screens once carried, and in every case the era being pictured differs from the era doing the picturing.

## Brief inputs

Supply these before production. They are intentionally not invented by the style.

- Deliverable and channel: page, app screen, deck, campaign image, garment, object or space
- Subject and message: what the audience must notice or understand first
- Audience and context: where, when and at what viewing distance it will be encountered
- Format: dimensions, aspect ratio, responsive states, slide count or physical constraints
- Content hierarchy: required copy, data, actions, imagery and legal information
- Production constraints: accessibility, materials, budget, image rights and delivery deadline

## Defining characteristics

- Thick curves, vines, flowers, splashes and concentric rings growing outward from a center
- Dancing people, birds, butterflies, skylines and speakers layered as silhouettes
- Lime, cyan, magenta and orange planes and gradients colliding with black or white
- Thin humanist sans-serif type contrasting with expansive vector ornament

## Best used for

- Concentrating motion and abundance into flat graphics for music, festivals or youth-facing services without photography
- Recreating 2000s digital culture in exhibitions or games as vector proliferation rather than glossy 3D

## Composition recipe

- Typography & lettering: Set short copy in a light humanist sans-serif inside gaps in the curves; do not outline the letters like the ornament.
- Layout & structure: Grow broad curves in three directions from the subject, layer silhouettes and floral forms at varied scales, and reserve one solid area for reading.
- Material & texture: Use crisp vector planes, transparent gradients, halftones and splatter brushes, limiting photographic texture to one point.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #52D84E
- The colour it is remembered by: #F34B9A
- Text and outlines: #171A27

## Evidence and rights boundary

- Treat the source of record and reference works below as evidence for understanding the style, not as assets to reproduce.
- The AI interpretation image, when present, is a browsing aid only. It is neither a reference work nor evidence for the definition.
- For a branded design system, translate hierarchy, spacing, colour roles and component logic into an unrelated fictional service. Do not copy logos, proprietary type, icons, product copy, screenshots or exact component geometry.
- For a regional, Indigenous or community-rooted tradition, retain place, authorship and historical context. Do not combine unrelated motifs or reduce the entry to generic ethnic decoration.
- For fashion and subculture, distinguish documentary context from a costume prompt; use fictional adults and avoid real labels, public figures and caricature.
- Record the rights status and intended use of every supplied image, typeface, logo and quotation before production.

## Translate it by medium

The rules below preserve the visual grammar without copying a historical artefact literally.

### Web and app

- Page structure: translate “Grow broad curves in three directions from the subject, layer silhouettes and floral forms at varied scales, and reserve one solid area for reading.” into the hero, section rhythm and information hierarchy.
- Type system: use “Set short copy in a light humanist sans-serif inside gaps in the curves; do not outline the letters like the ornament.” for display moments and short labels. Keep body copy, navigation, forms and status text in a highly legible companion when the display treatment reduces clarity.
- Components and imagery: carry “Use crisp vector planes, transparent gradients, halftones and splatter brushes, limiting photographic texture to one point.” through image treatment, borders, dividers, cards and selected surfaces; do not decorate every component equally.
- Tokens: begin with #52D84E as the ground, #F34B9A as the memorable colour, and #171A27 for text, outlines and high-contrast detail. Assign colours by semantic role before tuning individual components.
- Presentation: render the screen itself as the design artefact. Add a phone, browser chrome or perspective mockup only when the deliverable explicitly asks for one.
- Responsive behaviour: preserve hierarchy, alignment logic and the dominant cue when columns collapse; do not reproduce a desktop composition by merely shrinking it.
- Usability gate: keyboard focus, action labels, contrast, zoom and reduced-motion behaviour remain explicit even when the historical style did not account for them.

### Slides and decks

- Title slide: express one idea with the strongest scale, alignment or framing move from “Grow broad curves in three directions from the subject, layer silhouettes and floral forms at varied scales, and reserve one solid area for reading.”.
- Content slides: keep the reading layer quieter than the title layer. Use one dominant characteristic per slide and repeat the same grid, margins and type roles across the deck.
- Images and surfaces: art-direct crops, masks, rules and backgrounds with “Use crisp vector planes, transparent gradients, halftones and splatter brushes, limiting photographic texture to one point.” rather than adding unrelated decoration.
- Charts and diagrams: use #52D84E as the ground, #F34B9A as the memorable colour, and #171A27 for text, outlines and high-contrast detail; preserve labels and numerical contrast before stylistic treatment.
- Presentation: deliver a flat slide canvas by default. A photographed screen, laptop or conference room is a different deliverable and must be requested explicitly.
- Sequence: alternate emphatic slides with quiet explanatory slides so the style has rhythm instead of becoming constant noise.

### Image generation and art direction

- Subject: choose one concrete subject that serves one of the uses above; the style is the treatment, not the subject.
- Composition: build the frame from “Grow broad curves in three directions from the subject, layer silhouettes and floral forms at varied scales, and reserve one solid area for reading.”. Make the focal hierarchy readable before adding texture.
- Lettering and graphic marks: follow “Set short copy in a light humanist sans-serif inside gaps in the curves; do not outline the letters like the ornament.”. If text is not essential, omit it; if it is essential, use short neutral wording and reject illegible pseudo-text.
- Surface, light and finish: interpret “Use crisp vector planes, transparent gradients, halftones and splatter brushes, limiting photographic texture to one point.” as material, texture, edge quality, depth and lighting rather than as a generic filter.
- Effect discipline: gradients, bloom, glass, chrome, heavy shadows, grain and distressed paper are off by default unless the material direction names or clearly requires them.
- Cliché test: remove the most obvious period prop or motif. The style should still read through composition, type, colour relation and material behaviour.
- Set direction: make a clear establishing composition, a changed crop or viewpoint, a material/detail study, and a reduced alternate. Keep the visual grammar stable while changing the framing.
- Ready-to-run prompt: https://indexstyle.org/styles/vectordelia/prompt.txt

### Styling, objects and spaces

- Silhouette and proportion: translate “Grow broad curves in three directions from the subject, layer silhouettes and floral forms at varied scales, and reserve one solid area for reading.” into the distribution of volume, balance, symmetry or asymmetry.
- Materials and finish: start from “Use crisp vector planes, transparent gradients, halftones and splatter brushes, limiting photographic texture to one point.”; choose real materials whose behaviour supports the style instead of printing a motif onto an unrelated surface.
- Graphic detail: apply “Set short copy in a light humanist sans-serif inside gaps in the curves; do not outline the letters like the ornament.” only where lettering, labels, trims or wayfinding have a reason to exist.
- Palette: use #52D84E as the ground, #F34B9A as the memorable colour, and #171A27 for text, outlines and high-contrast detail. Let one role dominate, one support and one provide legibility or edge definition.
- Edit: carry two or three defining characteristics strongly. Avoid turning every characteristic into a literal prop or costume reference.

## What to avoid

Do not merely flatten Frutiger Aero's sky and gloss, and do not confuse it with Microsoft's Metro UI. Curves, silhouettes and music or nature motifs must form one continuous visual flow.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] The deliverable, subject, audience, format and content priority are explicit
- [ ] One characteristic is dominant and at least two others support it
- [ ] Visible in the piece: Thick curves, vines, flowers, splashes and concentric rings growing outward from a center
- [ ] Visible in the piece: Dancing people, birds, butterflies, skylines and speakers layered as silhouettes
- [ ] Visible in the piece: Lime, cyan, magenta and orange planes and gradients colliding with black or white
- [ ] Visible in the piece: Thin humanist sans-serif type contrasting with expansive vector ornament
- [ ] The layout follows: Grow broad curves in three directions from the subject, layer silhouettes and floral forms at varied scales, and reserve one solid area for reading.
- [ ] The lettering follows: Set short copy in a light humanist sans-serif inside gaps in the curves; do not outline the letters like the ornament.
- [ ] The material and surface follow: Use crisp vector planes, transparent gradients, halftones and splatter brushes, limiting photographic texture to one point.
- [ ] The colour relation holds: #52D84E as ground, #F34B9A carrying the style, #171A27 for text and outlines
- [ ] The result still works without the decorative layer: hierarchy, reading order and primary action remain clear
- [ ] Responsive, accessibility or physical-production constraints have been checked for the chosen medium
- [ ] No AI interpretation image has been used as evidence or copied as a visual reference
- [ ] Logos, proprietary type, exact interface geometry and existing artwork compositions have been excluded unless separately licensed
- [ ] Community, regional or subcultural context has been preserved where it is part of the style
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Frutiger Aero (フルティガー・エアロ)** — Shows glossy digital technology as an approachable future by tying it to blue sky, water, grass and bubbles. The gloss is the same as Aqua's, but Aqua is the texture of a control and this is the world of the wallpaper and the advert. → https://indexstyle.org/styles/frutiger-aero
- **Vectorheart (ベクターハート)** — A graphic style compressing Y2K speed into sharp vector forms, industrial symbols, and high-contrast type. Flatter than Metalheart's heavy 3D chrome, it turns Swiss modern and machine-display order into aggressive bevelled angles. → https://indexstyle.org/styles/vectorheart

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=vectordelia+frutiger-aero

## Further study

- The spread of vector packs and Illustrator in the 2000s
- Advertising, music and game screens before the label Frutiger Metro
- Boundaries with Frutiger Aero, Vectorheart and Flat Design

## Reference works

- e-Journal of New Media — Physical Reflections of Digital Aesthetics: The Influence of Frutiger Aero on Interior Design — https://dergipark.org.tr/en/pub/ejnm/article/1535261

## AI interpretation

These AI-generated interpretation images exist for browsing convenience only — they are not reference works:

- https://indexstyle.org/ai/vectordelia.jpg

## Source of record

- e-Journal of New Media — Physical Reflections of Digital Aesthetics: The Influence of Frutiger Aero on Interior Design — https://dergipark.org.tr/en/pub/ejnm/article/1535261

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/vectordelia
- Image-generation prompt (legally clean): https://indexstyle.org/styles/vectordelia/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)