Psychedelic

Design should alter perception, and a page that vibrates, flows and resists easy reading puts the viewer in an expanded state of mind.

Vibrating complementary colours, melting hand-drawn lettering and symmetrical swirls that fill the whole sheet. It came from San Francisco concert posters of 1966 to 1968, and it set out to reject the order of Swiss modernism.

Period: 1965–1972 · Era: Modernist · Domain: Graphic & UI Design · Also called: Psychedelic Poster Art, San Francisco Sound Poster, Acid Graphics

When to load this skill

Load it when the user asks for: "psychedelic", "60s poster", "acid", "trippy", "tie-dye", "fillmore poster", "wes wilson", "victor moscoso", "counterculture", "op art type".

Good for: music festival posters, album covers, event and club sites, tea and cannabis packaging, retro campaign pages.

Do not use it when:

• The product handles money, health or legal content that needs calm and clear reading.
• The page needs long body text, accessibility compliance for photosensitive users or dense forms.
• The brand must feel institutional, minimal or neutral.

System directives

When generating UI or graphic layouts in Psychedelic, you MUST:

1. Fill 90% or more of the sheet with pattern, colour or lettering, and leave no neutral margin.
2. Pair complementary colours of equal value, such as orange against blue and magenta against green, so that edges vibrate.
3. Draw lettering by hand to fit a shape: bend baselines, melt letterforms and reduce the gaps between letters to 0 or less.
4. Build compositions on curves and spirals, with mirrored or radial symmetry around one focal point.
5. Use three to five saturated hues in one piece, and shift hue in gradients across the sheet.
6. Outline shapes with a 2px to 4px dark line, and repeat contours in 3 to 6 concentric rings.
7. Borrow from Art Nouveau, Victorian posters and Op Art, and distort them.

Guardrails

Each line below breaks the style. Check your output against the list before you return it.

• NEVER: Flush-left ragged text on a visible modular grid.
• NEVER: Neutral grey or white margins that frame the content.
• NEVER: A single neo-grotesque typeface at regular weight.
• NEVER: Muted earth-tone palettes with low saturation.
• NEVER: Straight horizontal baselines on every line of display text.
• NEVER: Photographic realism without distortion or colour shift.
• NEVER: Wide empty space as the main compositional element.

Vector profile

Hold these scores. If a request moves an axis by 2 points or more, you have left the style: go to "Lineage fallbacks".

Spatial & grid logic

• Grid mechanics: No modular grid; compositions use a radial or mirrored axis at the sheet centre, with lettering blocks fitted to curves and a 0px to 8px gap between elements.
• Whitespace ratio: Under 10% of the surface stays empty; every gap is filled with pattern, and the spacing scale is 0, 4, 8 and 16px.
• Alignment rules: Centred or mirrored composition; text follows arcs, waves and tapered shapes; lines of text run at any angle between 0 and 30 degrees.
• Container geometry: Organic blobs, arches and rounded panels with a radius of 32px or more; outlines wobble by 2px to 6px as in hand-cut lettering.

Typography

• Classifications: art nouveau display · hand-drawn melting lettering · decorative serif · bubble sans serif
• Tracking: Display sizes take -0.06em to 0 so that letters touch; body takes 0 to +0.01em; labels take +0.04em.
• Leading: Display 0.85 to 1.0; body 1.5 so that the text stays readable on busy fields.
• Hierarchy rules:
  • Set display text at 72px to 160px and body at 18px to 20px; the ratio stays above 4:1.
  • Place body text on a solid panel of one flat colour, never straight on the pattern.
  • Use no more than two display faces in one piece, and set both in bold weights of 700 or more.
  • Warp or curve the headline along an arc; keep body text on a straight baseline.

Font pairings

Colour & lighting

• Palette structure: Four to five fully saturated hues in complementary pairs, with near-equal area for each pair and a black outline to hold shapes together.
• Contrast rules: Vibration is intended on decorative fields; text panels still hold at least 7:1, for example violet #2B0A4D on yellow #FFE600.
• Surface treatment: Saturated flat fills with hue gradients across the sheet; overprinted halftone dots of 4px to 8px and moire patterns are allowed.
• Light and shadow: No single light source; glow is drawn as repeated 2px to 4px contour rings in shifting hues, not as a blur.

Palette

Materiality & texture

• Surface simulation: Offset-litho poster ink on cheap stock, with overprint and fluorescent inks; the surface imitates blacklight posters.
• Border rules: Solid violet outlines of 3px to 4px around every shape; inner contours repeat at 6px steps.
• Blur and elevation: Blur is 0 for shapes; a glow may use a 0 0 24px coloured shadow on one focal element; there are no elevation levels.

Ornamentation & iconography

• Iconography: Hand-drawn solid glyphs with 3px outlines and wobbling terminals: eyes, flowers, suns and mushrooms; no uniform geometric sets.
• Illustration: Symmetrical swirls, paisley, flowers, eyes and melting figures drawn in ink and filled with flat gradients; Art Nouveau borders reworked in neon hues.
• Decorative elements: concentric contour rings · paisley and flower motifs · op-art stripes and checks · halftone dot fields · wavy borders · radial sunbursts

Motion & interactivity

• Born on screen: no — the values here translate a print style for screen
• Transition physics: Translation for screen: shapes breathe with a 4s loop of 3% scale and 6 degrees of rotation, and hue shifts slowly across fills.
• Easing: cubic-bezier(0.45, 0.05, 0.55, 0.95)
• Duration (ms): 600
• Hover and active: Hover shifts hue by 40 degrees and warps the element with a 2 degree skew; active inverts the colour pair and adds a 3px contour ring.

Code & token primer

Set data-style="psychedelic" on the root element and paste the tokens. The file tokens.css has the same tokens and a set of reference rules.

[data-style="psychedelic"] {
  --color-bg: #2B0A4D;
  --color-surface: #FFE600;
  --color-text: #2B0A4D;
  --color-muted: #5A2A8A;
  --color-primary: #FF6A00;
  --color-accent: #FF1493;
  --color-border: #2B0A4D;
  --font-sans: "Rubik", "Nunito", "Trebuchet MS", sans-serif;
  --font-display: "Shrikhand", "Rye", "Cooper Black", Georgia, serif;
  --border-radius: 32px;
  --border-width: 3px;
  --shadow-elevation: 0 0 24px rgba(255, 20, 147, 0.6);
  --backdrop-filter: none;
  --space-unit: 4px;
  --ease: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --duration: 600ms;
  --color-complement: #1B3BFF;
  --color-lime: #9AFF00;
  --tracking-display: -0.04em;
  --leading-body: 1.5;
  --color-on-bg: #FFE600;
  --color-on-surface: #2B0A4D;
  --color-on-primary: #2B0A4D;
  --color-on-accent: #2B0A4D;
  --color-muted-on-bg: #BFA417;
  --color-muted-on-surface: #5A2A8A;
  --color-link: #FF1493;
  --color-link-on-surface: #2B0A4D;
  --display-weight: 400;
  --subhead-weight: 400;
  --body-weight: 400;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: -0.02em;
  --display-leading: 0.95;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 18px;
  --icon-stroke: 3;
}

Tailwind patterns:

Visual pack

The pictures and icons of this style are files. Use them as they are, or read them as a specification and draw your own in the same language.

• Icons: solid, stroke 3 on a 24px field, round caps, round joins, container: none. Use: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. An icon takes currentColor.
• Icon family: the sprite is cut from Solar (Bold) by 480 Design, licence CC BY 4.0. Reason: Heavy, swollen solid forms with no straight terminal: the weight of the poster lettering. It is an open-source stand-in for a demo. For a product, use the icon library of the brand and choose the family by the rules below.
• Display type: weight 400, tracking -0.02em, leading 0.95, case: none.
• Weights: display 400, subhead 400, body 400, bold in text 700, labels and buttons 700. The style uses 2 weights (400, 700) and no other. The display has the weight of the body, so size and face carry the hierarchy. The accent is size: a larger word is the accent, so the weights stay few.
• Body type: 18px, leading 1.5.
• Page: hero poster, center aligned, compact density, accent tilt -2°.
• Text colour: --color-text is for the main reading field only. On each field, use its token: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

How to choose an icon pack

An icon pack is a typeface for pictures. Choose it with the same care as the text face. These rules hold for an open-source set and for a licensed library.

1. The stroke matches the stem. Set an icon next to the body text at text size. The line of the icon and the stem of a letter have the same weight.
2. Terminals and corners follow the radius token. Butt caps and mitre joins go with a radius of zero. Round caps and round joins go with a soft radius.
3. The fill mode follows the technology of the era. Print eras cut solid forms. Screen eras with depth fill and shade the form. Current product interfaces draw an outline.
4. The metaphors are not younger than the style. Each picture is an object that the era knew. An icon with a later metaphor breaks the period.
5. One family, one grid. All icons come from one family and one variant, drawn on one field. Do not mix families on one surface.
6. The family covers the product. List each concept that the product needs before you commit. A family that has no icon for one of them is the wrong family.
7. The colour is a token. An icon takes currentColor. A second tone comes from a token, not from the file.
8. The licence permits the use. Read the licence of the set. Give credit where the licence asks for it. A product with a brand uses its licensed library and applies the same rules to choose the family.

Lineage fallbacks

When the user asks for a variation, do not improvise. Blend toward the neighbour named here, and load its skill.

• If the user asks for more readable: move toward mid-century-modern (Mid-Century Modern). Mute the hues to mustard, teal and orange, restore a 6-column grid and 35% empty space; keep the flat layers and the curved shapes.
• If the user asks for more ordered: move toward swiss-international (Swiss International Style). Keep one saturated accent such as #FF6A00 under 10% of the surface, set all text flush left on a 12-column grid; drop the contour rings.
• If the user asks for louder: move toward memphis-design (Memphis Design). Replace swirls with squiggles, terrazzo and 3px black outlines on pink and teal; keep the saturation and the tilted shapes.
• If the user asks for more modern web: move toward y2k-aesthetic (Y2K Aesthetic). Swap hand-drawn lettering for chrome gradients and translucent blobs; keep the saturated hues and the full-bleed fields.
• Rejects (the opposite pole; do not blend): swiss-international
• Nearest by vector profile: memphis-design, grunge-editorial, neo-brutalism-ui

Emotional target

Disorientation and euphoria: the viewer feels that the page moves, that rules are off and that the experience is communal.

Keywords: trippy, liberated, vibrating, fluid, countercultural, ecstatic · Brand archetypes: outlaw, magician, jester

Sources

• Eric Schaal and Walter Medeiros, The Art of Rock: Posters from Presley to Punk (Abbeville Press, 1987)
• Ted Owen and Denise Dickson, High Art: A History of the Psychedelic Poster (Sanctuary Publishing, 1999)

Generated from data/design/styles/psychedelic.json by design-ontology. Do not edit this file; change the data and run npm run build.