A shadcn/tweakcn-compatible portfolio system derived from abalone nacre: iridescent teal actions, seafoam focus states, blush-pearl accents, opal surfaces, graphite text, and tidepool-depth dark mode.
Typography
Geist for elegant portfolio and dashboard UI with Noto Sans JP guidance for Japanese labels, compact metrics, generous line height, and polished multilingual readability.
Layout
Quiet 8px-grid portfolio layouts with translucent nacre cards, shell-hole navigation rhythm, soft graphite borders, restrained shadows, and iridescent texture used as a premium accent.
Design-system board
AI-generated reference board showing tokens, components, and motif treatment.
shadcn Component Preview
All components use the active theme tokens — switch the system and watch them retune.
Buttons
variant × size — bg-primary, bg-secondary, hover.bg-muted, border, ring
Inputs
border-input, focus.ring-ring, bg-card
Selection
checkbox, radio group, toggle group, switch — primary highlights
Use case: photorealistic-natural
Asset type: Morphous Abalone transparent motif chroma-key source
Primary request: Create only an isolated abalone shell motif for a design-system catalog, no environment, no props, no text.
Subject: A single abalone shell viewed in a graceful three-quarter angle, showing the nacre interior and outer rim, accurate shell form with oval shape, perforation holes along one side, lustrous iridescent teal, seafoam, blush pink, pearl grey, opal white, and graphite rim details. The shell should feel premium, tactile, marine, and suitable as a portfolio-system motif.
Composition/framing: centered complete cutout with generous padding; show the full shell and rim without cropping; one shell only.
Lighting/mood: clean studio light that preserves pearlescent luster, nacre color shifts, fine shell ridges, and crisp silhouette edges.
Transparent workflow: place the shell on a perfectly flat solid #00ff00 chroma-key background for background removal. The background must be one uniform color with no shadows, gradients, texture, reflections, floor plane, or lighting variation. Keep the shell fully separated from the background with crisp edges and generous padding. Do not use #00ff00 anywhere in the shell.
Constraints: no animal body, no beach scene, no rocks, no sand, no water, no decorative background, no second shell, no text, no watermark, no cast shadow, no contact shadow, no reflection.
Use case: ui-mockup
Asset type: Morphous light-mode design-system board for /systems/morphous-abalone/design-system-light.png
Primary request: Generate one comprehensive 16:9 light-mode design-system board for "Morphous Abalone" / "Abalone Shell", a lustrous portfolio system derived from the visible abalone shell motif. The board is the implementation reference for a shadcn/tweakcn-compatible theme.
Reference use: Use the visible abalone shell cutout as the source of truth. Extract palette, pearlescent texture rhythm, nacre glow, shell perforation rhythm, rocky coast context, contrast, spacing mood, and interaction language from the motif image. The board must visibly respect the motif colors: iridescent teal, seafoam, blush pink, pearl grey, opal white, graphite rim, and tidepool shadow.
Canvas: exact wide 16:9 board, target 3840 x 2160 pixels, 4K-class composition.
Resolution and legibility: make every section label large and readable after gallery downscaling. Use fewer large rows, no dense tiny token tables, clean grid, generous spacing.
Required visible sections with exactly these short labels: Morphous Abalone, Abalone Shell, Light Mode, Palette, Type, Japanese Typography, Components, Navigation, Dashboard/Data, Forms, Tables, Command/Search, Status, Tokens, Texture, Radius, Spacing, Shadows, Assets.
Typography: include English and Japanese guidance. Show concise examples: Geist, Noto Sans JP, Heading, Body, Label, Metrics, 日本語, 余白, 可読性, 行間. Use elegant portfolio UI type hierarchy with strong numeric rhythm.
UI coverage: buttons, icon buttons, inputs, select, textarea, checkbox, radio, switch, tabs, badges, alerts, cards, table rows, command menu, sidebar navigation, top navigation, dashboard metric cards, line chart, bar chart, portfolio gallery tile, loading, empty, error states, spacing, radius, border, shadow, texture samples.
Visual details: opal-white and pearl-grey page background, translucent nacre cards, teal primary actions, blush-pink accents, graphite text, seafoam rings, shell-hole pill navigation, subtle ridged nacre texture, 8px radii, quiet portfolio/workflow dashboard layout.
Text: short readable UI labels only; no paragraphs. Use exact title text "Morphous Abalone".
Constraints: no animals, no beach photo scene, no shells as repeated clutter, no neon overload, no generic purple gradients, no unrelated saturated colors, no random logos, no watermark, no misspelling of "Morphous Abalone".
Use case: ui-mockup
Asset type: Morphous dark-mode design-system board for /systems/morphous-abalone/design-system-dark.png
Primary request: Generate one comprehensive 16:9 dark-mode design-system board for "Morphous Abalone" / "Abalone Shell". It must feel like the same system translated from the visible light-mode Morphous Abalone board and the same abalone shell motif, not a new theme.
Reference use: Use the visible transparent abalone shell motif and visible light board as references. Preserve motif-derived palette roles, nacre texture rhythm, shell-hole navigation rhythm, portfolio dashboard layout, spacing, typography, and shadcn/tweakcn component coverage. Translate opal-white surfaces into deep tidepool and graphite nacre surfaces, with pearl text, teal primary, seafoam rings, blush-pink accents, and restrained iridescent highlights.
Canvas: exact wide 16:9 board, target 3840 x 2160 pixels, 4K-class composition.
Resolution and legibility: make every section label large and readable after gallery downscaling. Use fewer large rows, no dense tiny token tables, clean grid, generous spacing.
Required visible sections with exactly these short labels: Morphous Abalone, Abalone Shell, Dark Mode, Palette, Type, Japanese Typography, Components, Navigation, Dashboard/Data, Forms, Tables, Command/Search, Status, Tokens, Texture, Radius, Spacing, Shadows, Assets.
Typography: include English and Japanese guidance. Show concise examples: Geist, Noto Sans JP, Heading, Body, Label, Metrics, 日本語, 余白, 可読性, 行間. Use elegant portfolio UI type hierarchy with strong numeric rhythm.
UI coverage: buttons, icon buttons, inputs, select, textarea, checkbox, radio, switch, tabs, badges, alerts, cards, table rows, command menu, sidebar navigation, top navigation, dashboard metric cards, line chart, bar chart, portfolio gallery tile, loading, empty, error states, spacing, radius, border, shadow, texture samples.
Visual details: deep tidepool graphite background, dark pearl cards with nacre edge glow, luminous teal primary actions, blush-pink data accents, seafoam focus rings, pearl-grey foreground, shell-hole pill navigation, subtle ridged nacre texture, 8px radii, quiet high-end portfolio/workflow dashboard layout.
Text: short readable UI labels only; no paragraphs. Use exact title text "Morphous Abalone".
Constraints: no animals, no beach photo scene, no repeated shell clutter, no neon overload, no flat pure-black-only background, no generic purple gradients, no unrelated saturated colors, no random logos, no watermark, no misspelling of "Morphous Abalone".
