# Silverwingteam Design System

> Ultra-light Helvetica Neue typography centered on a sterile, achromatic canvas with sharp-edged geometry.

**Source:** https://silverwingteam.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Silverwingteam utilizes a strictly monochrome foundation, leaning heavily on **Helvetica Neue** at exceptionally light weights (200 and 300). The interface is characterized by high-contrast black text (#000000) against a pure white background (#ffffff), resulting in a 21:1 contrast ratio that prioritizes legibility and a "placeholder" aesthetic. Layouts are centered and sparse, using a 4px base unit for vertical rhythm. All interactive and container elements utilize a **sharp 0px border radius**, rejecting the rounded trends of modern SaaS.

## Signature DNA
1. **Ultra-Light Typography** (Helvetica Neue at weight 200 for primary headings creates a delicate, airy hierarchy that dominates the visual field).
2. **Achromatic Extremes** (The system uses absolute black #000000 and pure white #ffffff with no documented grays or mid-tones in the foundation).
3. **Sharp Geometry** (A universal 0px border radius is applied to all elements, ensuring a rigid, architectural feel).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
| :--- | :--- | :--- | :--- | :--- |
| N/A | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#ffffff` | Page background | 1 | High | Evidence background |
| `{color.ink}` | `#000000` | Primary text and headings | 5 | High | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.accent.link}` | `#6699ff` | Inline text links (observed in screenshot) | <5 | Medium | Decorative only |
| `{color.accent.brand}` | `#669900` | Logo/Iconography green (observed in screenshot) | <5 | Medium | Decorative only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Helvetica Neue | 200, 300, 400 | Heading, Body, Lead | Inter (Light) | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display}` | 42px | normal | normal | 300 | Main Hero | `h1` (screenshot) |
| `{type.lead}` | 21px | normal | normal | 200 | Lead paragraph | `p.lead` |
| `{type.body.strong}` | 21px | normal | normal | 400 | Emphasized body | `strong` |
| `{type.body}` | 16px | normal | normal | 400 | Standard text | `p` |
| `{type.caption}` | 14px | normal | normal | 400 | Secondary info | `span` |
| `{type.link}` | 16px | normal | normal | 400 | Inline links | `a` |
| `{type.label}` | 12px | normal | normal | 400 | Small labels | `label` |
| `{type.legal}` | 10px | normal | normal | 400 | Footer legal | `small` |

### Principles
1. **Light over Bold.** Headings must use weight 200 or 300; weight 400 is reserved for body emphasis only.
2. **Centered Alignment.** All primary typographic blocks are center-aligned to the viewport.
3. **Standard Tracking.** No custom letter-spacing is applied; the system relies on the natural kerning of Helvetica Neue.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.md}` | 20px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | All containers, buttons, and inputs | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{elev.flat}` | none | All surfaces | No shadows captured in source |

## Components
### Tier 1: Foundational
#### Text Link
**Role:** Navigation and inline actions.
**Pages observed:** 1
**Spec:** Text: #6699ff / Decoration: none / Typography: {type.body}
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
Not captured in source.

### Tier 3: Surface-specific
Not captured in source.

## Layout
| Property | Value |
| :--- | :--- |
| Content Alignment | Center |
| Max-width | Not captured in source |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Typography maintains size; layout stacks vertically. |

## Imagery & decoration
The brand uses a single circular "clock/arrow" icon in a muted green (#669900). It avoids photography, gradients, and complex illustrations, maintaining a "under construction" or "minimalist utility" aesthetic.

## Do's
- Use **Helvetica Neue 200** for all primary page headings.
- Maintain a **#ffffff** background for all primary canvases.
- Ensure all borders and corners are **0px (sharp)**.
- Center-align all text blocks within the container.
- Use **#000000** for 100% of body text.

## Don'ts
- **Wrong:** Using a sub-brand color like #669900 for primary headings. **Right:** Use #000000. **Reason:** The parent brand is strictly monochrome; color is for decoration only.
- **Wrong:** Applying a border-radius to buttons or cards. **Right:** Keep corners at 0px. **Reason:** Sharp geometry is a core signature DNA move.
- **Wrong:** Using "Bold" (700) weights for emphasis. **Right:** Use weight 400. **Reason:** The system is built on an ultra-light typographic scale.
- Do not use drop shadows or elevation.
- Do not use background colors other than white.

## Similar brands
- Minimalissimo
- iA Writer
- Braun (Rams era)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --sw-color-canvas: #ffffff;
  --sw-color-ink: #000000;
  --sw-font-main: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sw-radius-none: 0px;
  --sw-space-base: 4px;
  --sw-space-md: 20px;
}
```

## Agent prompt examples
- "Generate a landing page hero using Helvetica Neue weight 200, size 42px, center-aligned on a white background with no shadows."
- "Create a text link component using #6699ff with no underline and a sharp 0px focus state."
- "Layout a lead paragraph using weight 200 at 21px with 20px of bottom margin."

## Known gaps
- Component states (hover, active, focus) were not captured.
- Grid system and container max-widths were not explicitly defined in the minimal source.
- Secondary and tertiary colors beyond the logo green and link blue were not present.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Main Page | https://silverwingteam.com | 1440px | 2026-06-06 |
| Mobile View | https://silverwingteam.com | 390px | 2026-06-06 |