Northstar Launch style guide

Launch website style system with locked visual rules, editable content rules, and documented component states.

Northstar Launch visual sample — Primary media treatment for page headers, listing evidence, and route previews.

Brand overview

Defines the site personality, visitor decision, and where the visual system works best.

Colors

Maps authored colors to semantic roles so future edits preserve contrast and hierarchy.

color.surface.base#111219

color.surface.card#fbf8f0

color.text.strong#fbf8f0

color.text.muted#fbf8f0

color.text.primary#111219

color.brand.primary#153fb7

color.brand.secondary#153fb7

color.brand.accent#153fb7

Typography

Documents heading, body, label, and action text behavior across the site.

Spacing

Keeps section rhythm, card padding, and form gaps consistent after content edits.

Layout grid

Captures route widths, stacking behavior, and page-specific layout rules.

Buttons

Shows primary, secondary, hover, focus, disabled, loading, and mobile button rules.

Links

Keeps navigation and inline links readable with clear focus states.

Forms

Documents labels, controls, helper text, validation, success, and error states.

Navigation

Defines menu items, active states, mobile behavior, and footer links.

Cards

Documents repeated content containers, media ratios, and dense content handling.

Sections

Lists the public site parts and how each section should be edited.

Images

Defines media direction, crop rules, alt text expectations, and replacement guidance.

Icons

Sets icon style, sizing, contrast, and button usage rules.

Components

Documents reusable site pieces and required state coverage.

Button: default, hover, focus, disabled, error, loading, empty, mobile
Link: default, hover, focus, disabled, error, loading, empty, mobile
Form Control: default, hover, focus, disabled, error, loading, empty, mobile
Navigation: default, hover, focus, disabled, error, loading, empty, mobile
Card: default, hover, focus, disabled, error, loading, empty, mobile
Section: default, hover, focus, disabled, error, loading, empty, mobile
Media: default, hover, focus, disabled, error, loading, empty, mobile
Page Template: default, hover, focus, disabled, error, loading, empty, mobile
Content: default, hover, focus, disabled, error, loading, empty, mobile
Form: default, hover, focus, disabled, error, loading, empty, mobile

Page templates

Lists every route and the job each page performs.

/ - Home
/style-guide - Style Guide

Responsive behavior

Documents mobile stacking, touch targets, and viewport-specific constraints.

Accessibility notes

Requires readable contrast, keyboard focus, labels, and reduced motion support.

Focus states must remain visible on links, buttons, fields, menus, and card actions. Labels stay visible for every control.

Motion rules

Defines interaction timing and reduced motion fallbacks.

Reduced motion support is required. When a visitor prefers reduced motion, movement should shorten or stop without hiding content.

Customization guide

Explains what can be edited without changing the approved visual style.