Launchpad

States

Every control is specified in every state, not just the default. Input borders use a 3:1 contrast colour so they stay visible.

Components

Button

Primary: blue fill, white text, 2px ink border, 14px radius, hard 4px shadow; on hover it moves 2px and the shadow shrinks to 2px. Secondary: white fill, same border.

Card

Surface (#F2F4FF) fill, 2px ink border, 14px radius, hard shadow. Content aligned left.

Input

48px tall, 2px ink border, 10px radius, blue focus ring. Pair with a primary button on the same row for sign-ups.

Hero

Left-aligned headline (64 to 88px), one sentence of support, primary and secondary buttons, product screenshot on the right with the same border and shadow.

Feature

Three blocks maximum per row. Each: a short bold heading, two lines of text, optional tiny screenshot. No icon-in-a-circle.

Pricing

Two or three plans as bordered cards; the recommended one has the yellow highlight on its price.

Footer

Ink background with white text, simple link columns, one repeated call to action.

# DESIGN.md: Launchpad

A bold, confident landing page with hard edges and one loud colour.
Category: Landing page. Best for: SaaS and product landing pages; Launch and waitlist pages; Hackathon and event sites.

Follow this file for every screen and component. If something is not covered, choose the option closest to these principles. Do not substitute your own default style.

## Principles
- One idea per section. Each section has a headline a stranger could understand in 3 seconds.
- Blue is the brand colour, yellow is the highlight. Use yellow on at most one phrase per screen.
- 2px ink borders and a hard offset shadow (no blur) give every interactive block the same tactile feel.
- Big, tight display type (Bricolage) against calm body copy (Figtree).
- Show the product early: a real screenshot or live demo above the fold, not an illustration.

## Colour tokens
Define these once (CSS variables or Tailwind theme) and use only these. No raw hex values in components.

```css
:root {
  --bg: #FFFFFF;
  --surface: #F2F4FF;
  --ink: #0A0A23;
  --muted: #4B4B6B;
  --line: #0A0A23;
  --control: #0A0A23;
  --danger: #C4161C;
  --accent: #2748FF;
  --accent-ink: #FFFFFF;
  --accent-2: #FFD23F;
  --radius: 14px;
  --border-width: 2px;
  --shadow: 4px 4px 0 #0A0A23;
}
```

| Token | Value | Use |
|-------|-------|-----|
| bg | #FFFFFF | page background |
| surface | #F2F4FF | panels, cards, inputs |
| ink | #0A0A23 | primary text |
| muted | #4B4B6B | secondary text, captions |
| line | #0A0A23 | decorative dividers only (too faint for control borders) |
| control | #0A0A23 | borders of inputs, buttons and other controls (3:1 contrast) |
| danger | #C4161C | errors and destructive actions (4.5:1 on bg and surface) |
| accent | #2748FF | primary action, links, active state |
| accent-ink | #FFFFFF | text on accent |
| accent-2 | #FFD23F | highlight (one phrase per screen) |

## Typography
- Display / headings: Bricolage Grotesque
- Body: Figtree
- Mono: IBM Plex Mono
- Load them from Google Fonts or the framework's font loader. Keep body text at 16px or larger on mobile.
- Left-align text. Keep paragraphs under 70 characters wide.

## Shape and spacing
- Corner radius: 14px
- Border: 2px solid ink
- Shadow: 4px 4px 0 #0A0A23
- Density: Spacious. 8px base, sections 96 to 128px apart, hero headline 64 to 88px.
- Type scale: 16 / 18 / 24 / 32 / 48 / 72 / 88 px. Body 16 to 18px, display line height 1.02 to 1.1, tight tracking.
- Spacing scale: 8, 16, 24, 32, 64, 96, 128 px (use only these steps)

## Components
- **Button.** Primary: blue fill, white text, 2px ink border, 14px radius, hard 4px shadow; on hover it moves 2px and the shadow shrinks to 2px. Secondary: white fill, same border.
- **Card.** Surface (#F2F4FF) fill, 2px ink border, 14px radius, hard shadow. Content aligned left.
- **Input.** 48px tall, 2px ink border, 10px radius, blue focus ring. Pair with a primary button on the same row for sign-ups.
- **Hero.** Left-aligned headline (64 to 88px), one sentence of support, primary and secondary buttons, product screenshot on the right with the same border and shadow.
- **Feature.** Three blocks maximum per row. Each: a short bold heading, two lines of text, optional tiny screenshot. No icon-in-a-circle.
- **Pricing.** Two or three plans as bordered cards; the recommended one has the yellow highlight on its price.
- **Footer.** Ink background with white text, simple link columns, one repeated call to action.

## Layout
- Max width 1120px, 12 columns, left-aligned text.
- Sections alternate white and surface backgrounds; no full-bleed gradients.
- Sticky top nav: logo, 3 links, one primary button.

## Motion
One moment on load (hero headline slides in). Buttons respond to hover and press. Nothing animates on scroll except a single reveal per section.

## Interaction states
Every interactive element needs all of these, not just the default:
- **Hover:** primary buttons darken about 8%; secondary buttons and rows get a subtle background tint. Hover is never the only way to reveal an action (touch has no hover).
- **Focus:** a visible 2px outline in the accent colour with a 2px offset. Never remove the outline without replacing it.
- **Active / pressed:** move 1px down or darken further, so the click feels acknowledged.
- **Disabled:** 45% opacity, not-allowed cursor, aria-disabled. If the reason is not obvious, say why next to the control.
- **Loading:** keep the button width, show a spinner, disable repeat clicks, and keep the label ("Saving...").
- **Selected / current:** differs by more than colour (weight, underline, check mark or bar).
- **Error:** danger colour plus an icon and text, never colour alone.

## Forms and validation
- Every field has a visible label above it. Never use a placeholder as the only label.
- Use the control border colour (3:1 contrast) for input and button borders, not the faint line colour.
- Use the right input type and autocomplete attribute; inputs are at least 16px on mobile so iOS does not zoom.
- Mark optional fields, not required ones. Keep forms as short as possible.
- Validate when the user leaves a field and again on submit; do not show errors while they are still typing.
- Put the error message under the field: say what went wrong and how to fix it ("Enter an email like name@example.com"). On submit with errors, move focus to the first invalid field.
- Never clear what the user typed after an error.

## Feedback and system status
- Acknowledge every action within 100ms (pressed state, spinner or optimistic update).
- Loads longer than about 300ms show a skeleton shaped like the content; longer than 10 seconds show progress or a way to cancel.
- Confirm non-critical actions with a toast (role="status", visible at least 5 seconds). Errors stay on screen until dismissed.
- Destructive actions ask for confirmation or offer Undo. Name the thing being deleted in the dialog.
- Empty states say what will appear here and offer one clear action. Error states say what happened and what to do next.

## Navigation and structure
- The user can always tell where they are: current item marked with aria-current and a non-colour cue.
- At most 7 top-level destinations. Keep navigation in the same place on every page.
- Links look like links. Buttons do things; links go places.
- The browser Back button works and URLs reflect state (filters, tabs, steps) so pages can be shared and reloaded.
- One primary action per screen.

## Responsive behaviour
- Design mobile first. Breakpoints: 480, 768, 1024, 1280 px. Single column below 768px.
- No horizontal scrolling at 320px width. Tables scroll inside their own container or collapse to stacked rows.
- Touch targets at least 44 by 44px with 8px between them. Dense desktop UIs may use smaller controls only for a fine pointer; enlarge them under `@media (pointer: coarse)`.
- Support zoom to 200% and user font-size changes; use rem for type and spacing where possible.

## Content and tone
- Sentence case. Buttons start with a verb that says what happens ("Save note", not "Submit"). Keep names consistent across screens.
- Plain language, no jargon, no filler. Do not blame the user in errors.

## Accessibility
- Text contrast at least 4.5:1; large text and interface borders at least 3:1.
- Use semantic HTML (button, a, nav, main, label, table). Every control is reachable and operable by keyboard in a logical order.
- Do not rely on colour alone to convey meaning. Give images alt text and icon-only buttons an accessible name.
- Respect prefers-reduced-motion. Set the page language.

## Avoid
- Purple-to-blue gradients
- Soft blurred shadows and glassmorphism
- Stock illustrations of people at laptops
- Icon-in-circle feature trios
- Centred paragraphs
- More than one highlighted phrase per screen

More kits

• Ledger · Web app
• Marginalia · Web app
• Night Shift · Web app