DESIGN.md

version	alpha
name	TradingGoose Studio
description	A dual-theme design system for a trading workstation product family with a crisp marketing shell, a dense multi-panel workspace, and a quieter documentation skin. The system is built around neutral surfaces, a single gold accent, restrained shadows, and subtle animated grid backgrounds.
colors	primary primary-foreground primary-soft primary-strong background-light background-dark foreground-light foreground-dark surface-light surface-dark surface-raised-light surface-raised-dark surface-muted-light surface-muted-dark surface-accent-light surface-accent-dark surface-secondary-light surface-secondary-dark popover-light popover-dark text-muted-light text-muted-dark sidebar-light sidebar-dark sidebar-accent-light sidebar-accent-dark #FFCC00 #0C0A09 #FFE066 #FFD633 #FFFFFF #080706 #0C0A09 #FAFAF9 #FEFEFE #0C0A09 #FDFDFD #171717 #EFEFF0 #27272A #F8F8F9 #212123 #E7E7E9 #242429 #FFFFFF #0D0D0D #71717B #9F9FA9 #FAFAFA #18181B #F4F4F5 #27272A
strokes	border-light border-dark input-light input-dark #E4E4E7 #262626 #C9C9CF #404040
signals	grid-light grid-dark chart-positive chart-negative chart-neutral info success warning destructive-light destructive-dark #F1F1F1 #131313 #10B981 #EF4444 #3B82F6 #2563EB #16A34A #D97706 #E7000B #FF6467
typography	display-xl headline-lg headline-md title-lg title-md body-lg body-md body-sm label-md label-sm label-eyebrow code-md code-sm fontFamily fontSize fontWeight lineHeight letterSpacing Soehne 48px 700 1.05 -0.04em fontFamily fontSize fontWeight lineHeight letterSpacing Soehne 32px 500 1.1 -0.03em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 30px 540 1.15 -0.03em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 24px 540 32px -0.02em fontFamily fontSize fontWeight lineHeight Inter 18px 460 28px fontFamily fontSize fontWeight lineHeight Inter 18px 400 28px fontFamily fontSize fontWeight lineHeight Inter 16px 400 24px fontFamily fontSize fontWeight lineHeight Inter 14px 400 20px fontFamily fontSize fontWeight lineHeight Inter 14px 460 20px fontFamily fontSize fontWeight lineHeight Inter 12px 460 16px fontFamily fontSize fontWeight lineHeight letterSpacing Inter 11px 460 16px 0.24em fontFamily fontSize fontWeight lineHeight Geist Mono 14px 400 20px fontFamily fontSize fontWeight lineHeight Geist Mono 12px 400 16px
rounded	xxs xs sm md lg xl 2xl 3xl full 0.5px 2px 4px 6px 8px 12px 16px 24px 9999px
spacing	0 xxs xs sm md lg xl 2xl 3xl 4xl 5xl 6xl workspace-header-height control-height sidebar-width sidebar-width-mobile docs-sidebar-width chat-composer-max-width marketing-max-width marketing-grid-cell canvas-zoom-control 0px 2px 4px 8px 12px 16px 24px 32px 48px 64px 96px 128px 48px 40px 224px 288px 286px 748px 1280px 56px 40px
shadows	none sm md lg xl 2xl none 0 1px 2px 0 #0000000D 0 4px 12px -2px #00000014 0 12px 24px -6px #0000001A 0 20px 40px -12px #00000026 0 25px 50px -12px #00000040
elevation	flat subtle card popover modal borderColor shadow {strokes.border-light} {shadows.none} borderColor shadow {strokes.border-light} {shadows.sm} borderColor shadow {strokes.border-light} {shadows.md} borderColor shadow {strokes.border-light} {shadows.lg} borderColor shadow {strokes.border-light} {shadows.xl}
motion	duration-fast duration-base duration-medium duration-slow duration-loop-fast duration-loop-medium easing-standard easing-soft easing-smooth hover-glow-radius overlay-blur 150ms 200ms 300ms 500ms 1500ms 2500ms cubic-bezier(0.4, 0, 0.2, 1) ease-out ease-in-out 40px 1.5px
components	button-primary button-primary-hover button-primary-active button-secondary-light button-secondary-dark pill-light pill-dark input-light input-dark workspace-panel-light workspace-panel-dark workspace-panel-raised-light workspace-panel-raised-dark workspace-panel-muted-light workspace-panel-muted-dark workspace-tab-light workspace-tab-active-light workspace-tab-dark workspace-tab-active-dark chat-composer-light chat-composer-dark popover-surface-light popover-surface-dark sidebar-shell-light sidebar-shell-dark sidebar-item-active-light sidebar-item-active-dark code-panel-light code-panel-dark backgroundColor textColor typography rounded height padding {colors.primary} {colors.primary-foreground} {typography.label-md} {rounded.md} 40px 0 16px backgroundColor {colors.primary-soft} backgroundColor {colors.primary-strong} backgroundColor textColor typography rounded height padding {colors.surface-secondary-light} {colors.foreground-light} {typography.label-md} {rounded.md} 40px 0 16px backgroundColor textColor typography rounded height padding {colors.surface-secondary-dark} {colors.foreground-dark} {typography.label-md} {rounded.md} 40px 0 16px backgroundColor textColor typography rounded padding {colors.surface-secondary-light} {colors.foreground-light} {typography.label-sm} {rounded.full} 4px 12px backgroundColor textColor typography rounded padding {colors.surface-secondary-dark} {colors.foreground-dark} {typography.label-sm} {rounded.full} 4px 12px backgroundColor textColor typography rounded height padding {colors.background-light} {colors.foreground-light} {typography.body-md} {rounded.md} 40px 0 12px backgroundColor textColor typography rounded height padding {colors.background-dark} {colors.foreground-dark} {typography.body-md} {rounded.md} 40px 0 12px backgroundColor textColor rounded padding {colors.surface-light} {colors.foreground-light} {rounded.lg} {spacing.lg} backgroundColor textColor rounded padding {colors.surface-dark} {colors.foreground-dark} {rounded.lg} {spacing.lg} backgroundColor textColor rounded padding {colors.surface-raised-light} {colors.foreground-light} {rounded.lg} {spacing.lg} backgroundColor textColor rounded padding {colors.surface-raised-dark} {colors.foreground-dark} {rounded.lg} {spacing.lg} backgroundColor textColor rounded padding {colors.surface-muted-light} {colors.foreground-light} {rounded.lg} {spacing.lg} backgroundColor textColor rounded padding {colors.surface-muted-dark} {colors.foreground-dark} {rounded.lg} {spacing.lg} backgroundColor textColor typography rounded height padding {colors.surface-accent-light} {colors.text-muted-light} {typography.label-md} {rounded.md} 40px 0 12px backgroundColor textColor {colors.background-light} {colors.foreground-light} backgroundColor textColor typography rounded height padding {colors.surface-accent-dark} {colors.text-muted-dark} {typography.label-md} {rounded.md} 40px 0 12px backgroundColor textColor {colors.background-dark} {colors.foreground-dark} backgroundColor textColor typography rounded padding {colors.background-light} {colors.foreground-light} {typography.body-md} {rounded.3xl} {spacing.lg} backgroundColor textColor typography rounded padding {colors.surface-dark} {colors.foreground-dark} {typography.body-md} {rounded.3xl} {spacing.lg} backgroundColor textColor rounded padding {colors.popover-light} {colors.foreground-light} {rounded.lg} {spacing.xl} backgroundColor textColor rounded padding {colors.popover-dark} {colors.foreground-dark} {rounded.lg} {spacing.xl} backgroundColor textColor padding {colors.sidebar-light} {colors.foreground-light} {spacing.lg} backgroundColor textColor padding {colors.sidebar-dark} {colors.foreground-dark} {spacing.lg} backgroundColor textColor typography rounded padding {colors.sidebar-accent-light} {colors.foreground-light} {typography.label-md} {rounded.md} 8px 12px backgroundColor textColor typography rounded padding {colors.sidebar-accent-dark} {colors.foreground-dark} {typography.label-md} {rounded.md} 8px 12px backgroundColor textColor typography rounded padding {colors.foreground-light} {colors.foreground-dark} {typography.code-md} {rounded.lg} {spacing.xl} backgroundColor textColor typography rounded padding {colors.background-dark} {colors.foreground-dark} {typography.code-md} {rounded.lg} {spacing.xl}

Overview

TradingGoose Studio should feel like a clean, instrument-grade trading workstation rather than a lifestyle dashboard. The product is neutral, sharp, and information-dense, with a single warm gold accent used to indicate the main action or the currently active tool. The overall impression is disciplined and quiet: white or near-black canvases, hairline borders, compact controls, and dense panel groupings.

The marketing and public surfaces use the same visual language, but with more breathing room and more atmosphere. They introduce faint animated grids, ripple fields, and node-and-beam diagrams to suggest workflows, signals, and automation. The effect should feel technical and precise, not playful. The docs experience is the quietest member of the family: it keeps the same gold accent and neutral chrome, but removes most of the theatrical background treatment.

Colors

The palette is built from neutrals first and brand color second.

• Gold (#FFCC00) is the single signature accent. Use it for the primary call to action, the selected utility action, the highlighted logo frame, and loading strokes. It is intentionally warmer and louder than the rest of the interface.
• Light mode is almost paper-white. Core backgrounds are true white or near-white, with subtle stacking between background-light, surface-light, surface-raised-light, and surface-muted-light.
• Dark mode is almost black rather than blue-black. Surfaces step from background-dark through surface-dark, surface-raised-dark, surface-muted-dark, and surface-secondary-dark. Dark mode should preserve the same gold accent rather than changing brand temperature.
• Borders are low-contrast separators, not hard frames. In both themes the system prefers tonal layering and line work over loud fills.
• Data colors such as chart-positive, chart-negative, chart-neutral, info, success, and warning are semantic overlays. They belong in charts, notices, and workflow state, not in brand framing.
• Grid colors stay faint. The animated landing grid and workspace dots should read as structure in the background, never as texture competing with content.

Typography

Typography uses two voices.

• Soehne handles branded or editorial moments: public navigation, auth and changelog headlines, and other moments that need more personality. It should feel compact, confident, and slightly premium.
• Inter is the default product voice. It carries almost all working UI: tabs, buttons, table text, chat copy, forms, badges, and dashboard headings. It should feel precise and contemporary, not decorative.
• Geist Mono or an equivalent crisp monospace is reserved for code, structured data, and technical previews. Code should feel clean and legible rather than retro-terminal.
• The hierarchy is intentionally compressed. Dense screens lean heavily on 14px to 16px body sizes, 12px labels, and 11px uppercase eyebrows with generous tracking. Large type is used sparingly and mainly on marketing, auth, and empty-state surfaces.

Layout

There are three layout modes inside the same system.

• Marketing pages use wide centered containers, generous vertical spacing, and large open fields around the hero and feature sections. Animated grids and connection lines may occupy entire sections behind the content.
• Workspace screens are edge-to-edge and tool-like. The shell uses a compact 48px top header, a narrow icon-first sidebar, resizable panel groups, tab rails, and nested cards. The composition should privilege density, scanning speed, and side-by-side comparison.
• Docs sit between the two: more spacious than the workspace, less dramatic than marketing, with a dedicated left navigation rail and restrained card treatment.

Spacing follows a pragmatic 4px and 8px rhythm. Internal control padding is small and efficient; card padding usually lands at 16px or 24px. Headers, sidebars, tab bars, and chat composers should align to the same grid so even busy screens still read as orderly.

Elevation & Depth

Depth is subtle. The system prefers tonal stacking, borders, and selective shadows over heavy floating layers.

• Most panels are separated by a border plus a soft shadow.
• Popovers, dropdowns, and dialogs step up in shadow strength, but they should still feel crisp and controlled rather than soft and glassy.
• Dark mode relies more on tonal contrast than on large drop shadows. A near-black panel on a slightly lighter near-black field is often enough.
• Marketing cards use localized hover glows and background ripples to create energy without changing the base system. These effects should feel like technical instrumentation, not liquid glass.

Shapes

The default shape language is rectangular with softened corners.

• 4px to 8px radii are the baseline for dense controls, tabs, cells, and compact panels.
• 12px to 16px radii are for cards, dropdowns, overlays, and medium-size containers.
• 24px and full pill radii are reserved for hero chips, oversized chat composers, badge pills, and a few high-visibility marketing elements.

Avoid mixing extremely sharp corners with overly bubbly ones inside the same view. The system should feel consistent, compact, and deliberate.

Components

Core component behavior should follow these patterns:

• Primary buttons are gold with dark text. They are compact, slightly weighty, and visually obvious.
• Secondary and outline actions are neutral surfaces with strong text, relying on borders, fill shifts, and shadow rather than secondary brand colors.
• Tabs switch state through tonal inversion: the active tab usually becomes the clearest surface while inactive tabs recede into muted backgrounds.
• Panels and cards are neutral containers with crisp borders and restrained shadow. In the workspace they should feel like functional modules, not promotional tiles.
• Sidebar items read as compact utility controls. The gold accent belongs to the workspace identity tile and the strongest current action, not every row.
• Hero chips and small badges use pill geometry and quiet neutral fills. They support the main message; they should not overpower it.
• Chat composers are oversized relative to other controls, with deep rounding and a more conversational silhouette than the rest of the workspace.
• Code panels should be the darkest surfaces in the system, with bright, legible syntax colors and strong contrast against surrounding chrome.

Do's and Don'ts

• Do use gold only for the primary action, active utility emphasis, and brand-defining highlights.
• Do keep most of the interface neutral so charts, workflows, and semantic states have room to stand out.
• Do preserve dense alignment and tight rhythm in the workspace, even when adding new panels or controls.
• Do let marketing pages breathe more than product screens, but keep them visually related through the same colors, radii, and type voices.
• Do keep animated grids, ripples, and node connections subtle and structural.
• Don't turn neutral surfaces into colorful cards.
• Don't replace borders with heavy shadow everywhere.
• Don't use glassmorphism, saturated gradients, or whimsical illustration styles.
• Don't make dark mode blue, neon, or glossy; it should remain charcoal, restrained, and high-contrast.