Luxurysystem
Maritime Nautical
This prompt produces genuinely distinct output
Generates UI with naval precision — deep navy, brass gold, white rope borders, compass roses, and the ordered elegance of a ship captain's chart room. Every interface is seaworthy.
navybrassnauticalmaritimeclassic
Added February 16, 2026 by unslop.dev
Example output
Captain's log card
⚓ Ship's Log
Entry #1,247
Crossing the Meridian
Clear skies, Force 4 winds from the northwest. Made 142 nautical miles since last entry. All hands report satisfactory conditions.
Position
41°24'N 72°58'W
Heading
247° WSW
Speed
8.2 kn
View code
<div style="padding: 2rem; background: #0c1a2e;">
<div style="max-width: 26rem; border: 2px double #c4a456; padding: 0;">
<div style="padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(196,164,86,0.25); display: flex; justify-content: space-between; align-items: center;">
<span style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.25em; color: #c4a456;">⚓ Ship's Log</span>
<span style="font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.625rem; color: rgba(245,243,238,0.4);">Entry #1,247</span>
</div>
<div style="padding: 1.25rem;">
<h3 style="font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif; font-size: 1.125rem; font-weight: 600; color: #f5f3ee; margin: 0 0 0.5rem 0; line-height: 1.3;">Crossing the Meridian</h3>
<p style="font-family: 'Gill Sans', 'Segoe UI', 'Helvetica Neue', sans-serif; font-size: 0.8125rem; color: rgba(245,243,238,0.6); line-height: 1.65; margin: 0 0 1.25rem 0;">Clear skies, Force 4 winds from the northwest. Made 142 nautical miles since last entry. All hands report satisfactory conditions.</p>
<div style="display: flex; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(196,164,86,0.15);">
<div>
<p style="font-family: 'Gill Sans', sans-serif; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(245,243,238,0.35); margin: 0 0 0.125rem 0;">Position</p>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.8125rem; color: #c4a456; margin: 0;">41°24'N 72°58'W</p>
</div>
<div>
<p style="font-family: 'Gill Sans', sans-serif; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(245,243,238,0.35); margin: 0 0 0.125rem 0;">Heading</p>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.8125rem; color: #f5f3ee; margin: 0;">247° WSW</p>
</div>
<div>
<p style="font-family: 'Gill Sans', sans-serif; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(245,243,238,0.35); margin: 0 0 0.125rem 0;">Speed</p>
<p style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.8125rem; color: #f5f3ee; margin: 0;">8.2 kn</p>
</div>
</div>
</div>
</div>
</div>Brass button group
View code
<div style="padding: 2rem; background: #0c1a2e; display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center;"> <button style="background: #c4a456; color: #0c1a2e; border: none; padding: 0.5rem 1.5rem; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; cursor: pointer;">Set Course</button> <button style="background: transparent; color: #f5f3ee; border: 1px solid rgba(245,243,238,0.3); padding: 0.5rem 1.5rem; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;">Chart Room</button> <button style="background: transparent; color: #cc3333; border: 1px solid rgba(204,51,51,0.4); padding: 0.5rem 1.5rem; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;">All Stop</button> <button style="background: transparent; color: rgba(245,243,238,0.25); border: 1px solid rgba(245,243,238,0.1); padding: 0.5rem 1.5rem; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: not-allowed;">In Port</button> </div>
Navigation header
View code
<div style="background: #0c1a2e; border-bottom: 2px double #c4a456;">
<div style="max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; height: 3.5rem;">
<div style="display: flex; align-items: center; gap: 0.625rem;">
<span style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 1rem; color: #c4a456;">⚓</span>
<span style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; color: #f5f3ee; font-weight: 600;">Meridian</span>
</div>
<div style="display: flex; gap: 1.5rem; align-items: center;">
<a style="font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: #c4a456; text-decoration: none; cursor: pointer;">Voyages</a>
<a style="font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(245,243,238,0.6); text-decoration: none; cursor: pointer;">Fleet</a>
<a style="font-family: 'Gill Sans', 'Segoe UI', sans-serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(245,243,238,0.6); text-decoration: none; cursor: pointer;">Charts</a>
<button style="background: #c4a456; color: #0c1a2e; border: none; padding: 0.375rem 1rem; font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; cursor: pointer;">Board</button>
</div>
</div>
</div>Crew manifest
—— ★ ——
Crew Manifest
Name
Rank
Status
J. Hargrove
Captain
On Watch
K. Matsuda
First Mate
On Watch
L. Chen
Navigator
Off Duty
View code
<div style="padding: 2rem; background: #f5f3ee;">
<div style="max-width: 30rem;">
<div style="text-align: center; margin-bottom: 1.25rem;">
<span style="font-family: 'Palatino Linotype', Georgia, serif; font-size: 0.625rem; letter-spacing: 0.3em; color: #c4a456;">—— ★ ——</span>
<h2 style="font-family: 'Palatino Linotype', 'Book Antiqua', Georgia, serif; font-size: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #0c1a2e; margin: 0.625rem 0 0 0;">Crew Manifest</h2>
</div>
<div style="border: 1px solid #1a3050;">
<div style="display: flex; background: #1a3050; padding: 0.5rem 1rem;">
<span style="font-family: 'Gill Sans', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; color: #c4a456; flex: 2;">Name</span>
<span style="font-family: 'Gill Sans', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; color: #c4a456; flex: 1;">Rank</span>
<span style="font-family: 'Gill Sans', sans-serif; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; color: #c4a456; flex: 1; text-align: right;">Status</span>
</div>
<div style="display: flex; padding: 0.625rem 1rem; border-bottom: 1px solid rgba(26,48,80,0.1); align-items: center;">
<span style="font-family: 'Gill Sans', sans-serif; font-size: 0.8125rem; color: #0c1a2e; flex: 2;">J. Hargrove</span>
<span style="font-family: 'Gill Sans', sans-serif; font-size: 0.75rem; color: #4a5a6a; flex: 1;">Captain</span>
<span style="font-family: 'Gill Sans', sans-serif; font-size: 0.6875rem; color: #2a8a4a; flex: 1; text-align: right;">On Watch</span>
</div>
<div style="display: flex; padding: 0.625rem 1rem; border-bottom: 1px solid rgba(26,48,80,0.1); align-items: center; background: rgba(26,48,80,0.02);">
<span style="font-family: 'Gill Sans', sans-serif; font-size: 0.8125rem; color: #0c1a2e; flex: 2;">K. Matsuda</span>
<span style="font-family: 'Gill Sans', sans-serif; font-size: 0.75rem; color: #4a5a6a; flex: 1;">First Mate</span>
<span style="font-family: 'Gill Sans', sans-serif; font-size: 0.6875rem; color: #2a8a4a; flex: 1; text-align: right;">On Watch</span>
</div>
<div style="display: flex; padding: 0.625rem 1rem; align-items: center;">
<span style="font-family: 'Gill Sans', sans-serif; font-size: 0.8125rem; color: #0c1a2e; flex: 2;">L. Chen</span>
<span style="font-family: 'Gill Sans', sans-serif; font-size: 0.75rem; color: #4a5a6a; flex: 1;">Navigator</span>
<span style="font-family: 'Gill Sans', sans-serif; font-size: 0.6875rem; color: #cc3333; flex: 1; text-align: right;">Off Duty</span>
</div>
</div>
</div>
</div>System prompt
Copy this into your AI system prompt
You generate UI in a maritime nautical aesthetic — the visual language of naval tradition, ship interiors, and maritime charts. Deep navy blues, polished brass gold, crisp whites, and the disciplined order of life at sea. Interfaces that feel like the chart room of a tall ship — functional, beautiful, and precise. Everything has a purpose. Everything is lashed down. VISUAL RULES: - Background: Deep navy (#0c1a2e) for dark surfaces, off-white (#f5f3ee) for light surfaces. The contrast of a white uniform against a dark sea. - Primary: Navy blue (#1a3050) for text on light, white (#f5f3ee) for text on dark. - Accent: Brass gold (#c4a456). For borders, highlights, ornamental details, and interactive elements. Like polished ship fittings. - Secondary: Signal red (#cc3333) for alerts and warnings — the color of port-side navigation lights. - Text: Dark navy (#0c1a2e) on light backgrounds, cream (#f5f3ee) on dark. Warm, never cold gray. - Typography: Classic refined serif: `font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif`. Body in clean sans: `font-family: 'Gill Sans', 'Segoe UI', 'Helvetica Neue', sans-serif`. Headings feel inscribed. - Borders: 1-2px solid navy or brass. Double borders for emphasis (the look of brass trim). `border: 2px double #c4a456` for decorative edges. - Border radius: 2-4px max. Nautical design is angular and functional. - Spacing: Orderly and measured. Everything in neat rows and columns. Like a ship's log — nothing wasted. - Decorative: Compass directions (N S E W), anchor (⚓), stars (★), horizontal rules with centered ornament, rope/knot border patterns. SPECIFIC PATTERNS: - Cards: Navy bg with brass border on dark themes, or white bg with navy border on light. Small brass accent line at top. - Buttons primary: Navy bg, cream text, brass border. Uppercase, tracked, serif. Small and authoritative. - Buttons secondary: Transparent bg, brass or navy border. Matching text. - Headers: Serif, uppercase, with brass ornamental dividers. `—— ★ ——` or `—— ⚓ ——`. - Data displays: Ship's log format. Date/time on left, data on right. Neat columns. - Status: Green (starboard), red (port), brass (neutral). Like navigation lights. - Navigation: Horizontal list with `|` dividers, uppercase, tracked wide. ANTI-PATTERNS: - No neon or electric colors. Everything is traditional and muted. - No rounded corners larger than 4px. Nautical is angular. - No playful or bubbly elements. Maintain maritime discipline. - No monospace fonts (unless specifically for coordinates/data). - No gradient fills. Flat, solid colors like paint on a hull.
Related prompts
Luxury
Art Nouveau
system
Generates UI inspired by the Art Nouveau movement — sinuous organic curves, botanical motifs, whiplash lines, Mucha-style decorative borders, and the belief that art should permeate every designed surface.
✦ Proclamation
The Architecture of Enduring Interfaces
Great design, like great architecture, outlasts the fashions that surrounded its creation. Build with stone, not with straw.
Anno MMXXVI
Luxury
Gothic Revival
system
Generates UI with the drama of cathedral architecture — deep purples and blacks, gold tracery details, pointed arch motifs, and the solemn grandeur of medieval illuminated manuscripts meets modern dark UI.
◆ Exclusive Access ◆
The Grand
Opening Gala
Join us for an evening of extraordinary design, live music, and curated experiences at the Metropolitan.
March 15, 2026 · 7:00 PM
Our Services
Crafted With
Precision & Purpose
Every detail considered. Every element intentional. We create experiences that endure beyond the moment.
◆
Luxury
Art Deco
system
Generates UI inspired by 1920s Art Deco — geometric patterns, gold on dark backgrounds, symmetrical layouts, Didot-style serifs, and the luxurious geometry of the Chrysler Building lobby.