Ransom-s-wake/Design-Proposal/ransom_s_wake_v3/DESIGN.md

name, colors, typography, spacing

name	colors	typography	spacing
Ransom's Wake V3	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #09141e #09141e #2f3a46 #040f19 #111d27 #15212b #202b36 #2b3641 #d8e4f2 #bacac6 #d8e4f2 #26313d #859491 #3c4a47 #3adccc #66fdec #003732 #40e0d0 #006058 #006a62 #ffe2ab #402d00 #ffbf00 #6d5000 #ffdfdc #690007 #ffb9b2 #a7191c #ffb4ab #690005 #93000a #ffdad6 #61f9e9 #3adccc #00201d #005049 #ffdfa0 #fbbc00 #261a00 #5c4300 #ffdad6 #ffb4ac #410003 #92030f #09141e #d8e4f2 #2b3641	headline-lg headline-md body-lg body-sm label-caps data-lg data-md fontFamily fontSize fontWeight lineHeight letterSpacing Inter 32px 700 1.2 -0.02em fontFamily fontSize fontWeight lineHeight Inter 24px 600 1.2 fontFamily fontSize fontWeight lineHeight Inter 16px 400 1.6 fontFamily fontSize fontWeight lineHeight Inter 14px 400 1.5 fontFamily fontSize fontWeight lineHeight letterSpacing Inter 12px 700 1 0.1em fontFamily fontSize fontWeight lineHeight JetBrains Mono 18px 500 1 fontFamily fontSize fontWeight lineHeight JetBrains Mono 14px 400 1	unit gutter margin panel-padding 4px 24px 32px 16px

Brand & Style

The design system for this product is rooted in Industrial Maritime aesthetics, specifically the utilitarian and heavy-duty nature of mid-century naval equipment. The UI evokes a sense of "historical inquiry" and "slow tension," prioritizing functional credibility over modern digital sleekness.

The design style is a hybrid of Tactile/Skeuomorphic and Minimalist Brutalism. Interfaces should feel like physical control consoles—machined, painted, and worn by environment. Every element must appear to have a physical weight and a specific purpose, avoiding any unnecessary "sci-fi" decorative clutter. Surfaces mimic heavy gauge steel, while interactions feel deliberate and mechanical.

Colors

The palette is dominated by the Deep Petrol Blue (#05101a) base, representing the oppressive depth of the ocean and painted steel hulls.

• Primary (Desaturated Cyan): Reserved for active states, selection markers, and focused elements. It should feel like a functional backlight or a steady signal.
• Secondary (Amber): Used for safety notices, warnings, and secondary call-outs. It mimics filament-bulb indicators.
• Tertiary (Muted Red): Strictly for critical failures, danger, and irreversible actions.
• Neutrals: Range from deep navy to weathered greys, used for structural borders and panel segregation.

Typography

Typography is split between the institutional Inter for narrative and labels, and JetBrains Mono for technical readouts and numerical data.

To support full French localization, line heights are generous to accommodate frequent diacritics (é, à, ç). Labels should often use uppercase with increased tracking to mimic stamped metal nameplates. Headlines are heavy and condensed, appearing as if stenciled onto surfaces.

Layout & Spacing

The layout follows a Fixed Grid philosophy, organizing content into rigid "Technical Panels." This mimics the modular construction of a submarine bulkhead.

• Grid: 12-column system for desktop, collapsing to 4-column for mobile.
• Margins: Heavy outer margins (32px+) to create a sense of being "contained" within a vessel.
• Panel Logic: Use thick 2px borders to define separate functional areas. Content should not float; it must be housed within a defined container.

Elevation & Depth

Depth is conveyed through Tonal Layering and physical metaphors rather than soft shadows.

• Base Level: Deep Petrol (#05101a).
• Raised Panels: Slightly lighter blue-grey with a "beveled" edge look achieved via a 1px top-light highlight and a 1px bottom-dark shadow.
• Glass Elements: Use high-blur backdrop filters (30px+) with a subtle "condensation" noise texture to simulate thick gauge viewports.
• Recessed Areas: Use inner shadows to simulate meters or inputs set deep into the dashboard.

Shapes

The shape language is strictly Sharp (0px) or exceptionally low-radius (2px) to emphasize the industrial, machined nature of the equipment.

Avoid circles where possible; use octagons or chamfered corners for "round" elements like gauges or circular buttons. This reinforces the "angular shapes" requirement and maintains the mechanical aesthetic.

Components

• Buttons: Large, blocky, and high-contrast. The "Active" state must be indicated by a 2px solid border in Primary Cyan (#40e0d0), never just a glow. Include a "pressed" state that shifts the element down 2px.
• Nameplates: Use the label-caps style on a slightly lighter grey background with visible "screw head" icons in the corners.
• Input Fields: Recessed rectangles with a mono-font cursor. Use a subtle "scanline" overlay to simulate a low-refresh rate CRT monitor.
• Selection Markers: Use a vertical or horizontal "physical" bar next to the selected item in the Primary color.
• Status Indicators: Small square "lamps" that toggle between off (dark) and Secondary Amber or Tertiary Red.
• Data Cards: Heavy borders, clear headers using the stenciled headline style, and mono-space values for legibility.