Needle Brand System

Surfaces

• Use a very light green page stage with white working surfaces.
• Use solid surfaces in workbench UI.
• Do not use blur, glass, or decorative gradients in normal panes or buttons.
• Do not turn small facts into separate cards by default.
• Keep the stage neutral or dark and let the content provide the texture.
• Treat the stage as a working viewport, not a poster illustration.

Layout

• Start from the primary task and surface, not from a preferred layout or hero header.
• Fit the main workflow into the first viewport.
• Use a stage only when the user is inspecting or manipulating a visual result.
• A three-pane shell is common, not mandatory.
• When a stage is present, keep it wider than the side panes.
• Place controls close to the object they change.
• Keep presets next to the settings or objects they affect.
• Use tabs, drawers, or modals for secondary steps.
• Use one shell before introducing nested cards.
• Left and right panes should have different jobs. Do not mirror them.

Interaction

• Reuse the core classes from brand.css before writing custom control CSS.
• Segmented controls are one joined row of small segments with shared borders.
• Keep segmented controls small and identical across header, stage, and inspector.
• Slider rows are direct: label, value, then one real range input. No extra box.
• Boolean rows are direct: label plus checkbox. No phone switch. No outer box.
• Color-driven tools should expose real color inputs and direct hex values. Add one alpha slider row when opacity matters.
• Tags are small, thin-bordered, and lightly tinted. No gradients.
• Buttons in workbench UI are solid. Do not use gradients.
• Use one small-control radius family per tool row. Do not mix multiple radii side by side.

Hierarchy & Trees

• Tree views and nested lists use a consistent indentation rhythm so structure is scannable at a glance.
• Rows stay content-height rather than oversized so trees remain dense and navigable.
• Expand/collapse affordances (arrows or folder icons) sit to the left of the label. A single click toggles expansion; double-click or Enter activates.
• Selection is shown with a subtle background fill (pale green or neutral tint), not a heavy border or color block.
• Hover state is a lighter tint of the selection color. Keep the contrast low — just enough to confirm the pointer target.
• Use connector lines or indentation guides only when they improve scanning. Keep them very light.

Information Density

• Build the inspector as one continuous pane.
• Use section dividers, alignment, and spacing instead of boxing every row.
• Keep pane headers brief and singular.
• Use tabs or modes instead of showing every surface at once.
• Prefer compact rows and lists before larger cards or tiles.

Content Economy

• Keep tool titles short.
• In workbench headers, the tool name and current context read before the brand.
• Pane headers should not restate their own role.
• Helper text is short and local.
• Long explanation belongs in docs, onboarding, help, or empty states.

marketing

Marketing pages are brighter and more playful, with floating pills, gradients, and larger type.

• Keep the backdrop light and optimistic.
• Use the brand or CTA gradient in focused, high-value moments only.
• Let the lockup and call to action breathe inside large rounded panels or pill bars.
• Use the header-pill plus footer-area shell for full marketing pages.

docs

Docs pages are quieter and more structured, on the same soft green stage with white content blocks.

• Use one clear page title, then move into the content. Avoid marketing-style slogan stacks.
• Use purple for link emphasis and navigation state more than bright green buttons.
• Callouts are softly tinted green or blue on top of the pale page.
• Code blocks are white and rounded, with restrained borders and plenty of internal padding.
• Use the header-pill plus footer-area shell for full docs pages.
• Footer links inherit the footer text color. Do not let browser-default violet show through.

management

Management pages are operational overviews and browsing surfaces. Use them for uploads, libraries, project lists, and cloud-style organization pages.

• Use `header-pill` by default.
• Keep one shared content width across the header, main sections, and footer inner content.
• Prefer rows, tables, lists, and compact cards over a stage-first layout.
• Use cards only where they group genuinely different content.
• Footer is optional. Use `footer-area` only when the page ends like a website.

workbench

Workbench pages are hands-on product pages. Use them for focused tasks where the user is creating, editing, inspecting, or processing something.

• Choose `header-tool` for dense operational pages. Use `header-pill` only if the page behaves more like browsing or management.
• No hero.
• Use the real Needle lockup when branding appears.
• The tool name, file, or mode should read before the brand.
• Decide the primary surface first.
• Use a stage only when the result itself needs space.
• If the task is mostly configuration or review, a two-column or single-pane layout may be better than a stage-first layout.
• Group presets with the settings or objects they affect.
• Add side panes only when they help the workflow. If both are present, they should have different jobs.
• Reuse the same segmented control in the header, stage, and inspector.
• Use direct property rows, check rows, and color rows inside the inspector.
• Use a neutral or dark stage when the page needs a visual work surface.
• Status is inline or optional. Do not add a KPI card row by default.
• No blur, no glass, no marketing footer.

settings

Settings pages use white panels on green, clear labels, and compact spacing.

• Use distinct white panels, but keep them compact and quiet.
• Use tabs and segmented controls in the same compact viewer-style treatment used elsewhere in the product.
• Keep only the active settings group in focus. Use tabs or sections to avoid overwhelming the user with everything at once.
• Keep forms readable, direct, and factual rather than glossy or promotional.

data

Data-heavy and inspector views use mono details, white panels, and muted separators on a pale green stage.

• Place structured data inside white rounded containers.
• Use the Monaspace-style mono face selectively for identifiers, values, JSON structure, and technical labels.
• Prefer light separators and spacing over dense grid lines.
• Keep inspector rows compact and aligned. Avoid nested boxes around each field or duplicated summary panels.
• Apply the data-ink ratio principle: remove any UI element that does not directly help the user read or compare values.