# Songdew Design System

> A high-contrast digital stage where electric blue accents and bold geometric typography anchor a clean, functional workspace for independent music.

**Source:** https://songdew.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Songdew utilizes a monochrome foundation of off-white `#f9f9f9` and deep charcoal `#222222`, punctuated by a high-energy primary blue `#0035ff`. The system leans heavily on **Poppins** for its geometric clarity across UI and secondary headings, while **Graphik** provides a structural, authoritative weight for display headers. Layouts are characterized by a persistent left-hand navigation rail and a "soft-depth" aesthetic, where subtle shadows and large border radii (up to 100px) soften the otherwise rigid grid.

## Signature DNA
1. **The Electric Blue Signal** (`#0035ff`): Used as the primary interactive thread, appearing in text links, active states, and the floating chat trigger to maintain brand continuity against neutral backgrounds.
2. **Geometric Hierarchy**: The pairing of Graphik Bold (700) for display and Poppins (400-600) for UI creates a "Workstation" feel—functional yet modern.
3. **Soft-Depth Controls**: Buttons and cards often feature a unique dual-shadow approach (white highlight + soft grey drop) to create a "neomorphic-lite" lift from the `#f9f9f9` canvas.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#f9f9f9` | Page background, primary surface | 19 | 1.0 | `--light` |
| `{color.white}` | `#ffffff` | Card surfaces, high-contrast text | 19 | 1.0 | `--white` |
| `{color.ink.primary}` | `#222222` | Primary body text, headings | 102 | 0.8 | Computed |
| `{color.ink.muted}` | `#989aa3` | Secondary labels, metadata | 48 | 0.8 | Computed |
| `{color.ink.subtle}` | `#788188` | Tertiary text, placeholder | 34 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.brand.primary}` | `#0035ff` | Primary action text, brand signal | 11 | 0.8 | Computed |
| `{color.brand.secondary}` | `#598ce7` | Decorative borders, secondary surfaces | 8 | 0.6 | Computed |
| `{color.accent.yellow}` | `#fdb423` | "Pro" highlights, warning-tier cards | 6 | 0.6 | Computed |
| `{color.accent.red}` | `#ef1d27` | Critical alerts, "About" section accents | 5 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| **Graphik** | 600, 700 | Display, Hero headings | Inter | Commercial |
| **Poppins** | 300, 400, 500, 600, 700 | UI, Body, Sub-headings | Poppins (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 40px | 48.8px | normal | 700 | Hero Display | `h2` |
| `{type.heading.lg}` | 32px | 44.8px | normal | 700 | Section Header | `div.f32.black` |
| `{type.heading.md}` | 30px | 33px | normal | 500 | Sub-section | `h3` |
| `{type.heading.sm}` | 24px | 24px | normal | 600 | Card Titles | `h3.card-title` |
| `{type.body.lg}` | 18px | 25.2px | normal | 400 | Intro Paragraphs | `p` |
| `{type.body.md}` | 16px | 22.4px | normal | 400 | Standard Body | `a.ng-tns-c24-0` |
| `{type.body.sm}` | 14px | 19.6px | normal | 400 | Sidebar Nav | `div.mainHeader.dker` |
| `{type.caption}` | 12px | 16.8px | 0% | 300 | Metadata | `span.lhsNavHeadings` |

## Spacing
**Base unit:** 5px (inferred from common multiples)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 11 |
| `{space.sm}` | 10px | 49 |
| `{space.md}` | 15px | 39 |
| `{space.lg}` | 20px | 23 |
| `{space.xl}` | 40px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Main layout containers | 264 occurrences |
| `{radius.md}` | 8px | Standard buttons, small cards | `button.sd-btn` |
| `{radius.lg}` | 12px | Feature cards | `div.card` |
| `{radius.full}` | 100px | Pill buttons, avatar containers | `div.card (circle)` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.soft}` | `rgb(255, 255, 255) -5px -5px 10px 0px, rgba(216, 218, 225, 0.7) 4px 5px 10px 0px` | Primary CTA buttons, elevated cards | `button.btn.sd-btn` |

## Components

### Tier 1: Foundational

#### Sidebar Navigation
**Role:** Primary site-wide navigation and workstation switching.
**Pages observed:** All
**Spec:** Background `#ffffff` / Text `#788188` / Border-right 1px `#f9f9f9` / Typography Poppins 14px.
**States observed:** Active: Text `#0035ff`, Weight 500.

#### Primary Button (Rounded)
**Role:** Main call-to-action (e.g., "Join For Free").
**Pages observed:** https://songdew.com
**Spec:** Background `#f9f9f9` / Text `#466dfd` / Radius 8px / Padding 15px / Shadow `{shadow.soft}`.
**States observed:** Default | Hover: Not captured.

### Tier 2: Patterns

#### Feature Card (Outlined)
**Role:** Content grouping for opportunities or tracks.
**Pages observed:** https://songdew.com
**Spec:** Background `#ffffff` / Border 1px `#598ce7` / Radius 12px / Padding 20px.

#### Pro Badge
**Role:** Highlighting premium features.
**Pages observed:** https://songdew.com
**Spec:** Background `#fdb423` / Text `#222222` / Radius 100px / Typography Poppins 14px.

### Tier 3: Surface-specific

#### About Header
**Role:** Section identification on editorial pages.
**Pages observed:** https://songdew.com/about
**Spec:** Background `#222222` / Text `#ffffff` / Border-bottom 3px `#ef1d27` / Typography Graphik 40px Bold.

#### Floating Chat Trigger
**Role:** Persistent support access.
**Pages observed:** All
**Spec:** Background `#0035ff` / Radius 50% / Shadow `{shadow.soft}`.

## Layout
| Property | Value |
|---|---|
| Sidebar Width | ~240px |
| Content Max-Width | 1440px |
| Section Vertical Gap | 40px |

## Do's
- Use **Graphik Bold** for top-level display headings only.
- Apply `#0035ff` to all primary interactive text and active navigation states.
- Use the dual-shadow `{shadow.soft}` on buttons sitting on the `#f9f9f9` canvas.
- Maintain a 12px border radius for all content-heavy cards.
- Keep the sidebar navigation persistent across all workstation views.

## Don'ts
- **Wrong:** Using `#007bff` (standard browser blue) for buttons. **Right:** Use `#0035ff`. **Reason:** Brand identity requires the specific high-saturation Songdew blue.
- **Wrong:** Applying sharp corners to CTA buttons. **Right:** Use `{radius.md}` (8px). **Reason:** Sharp corners are reserved for layout containers only.
- **Wrong:** Using Poppins for 40px display headers. **Right:** Use Graphik. **Reason:** Graphik provides the necessary structural weight for high-level brand messaging.

## Quick start

```css
/* CSS Variables */
:root {
  --sd-blue: #0035ff;
  --sd-canvas: #f9f9f9;
  --sd-ink: #222222;
  --sd-shadow: -5px -5px 10px 0px #ffffff, 4px 5px 10px 0px rgba(216, 218, 225, 0.7);
  --font-display: 'Graphik', sans-serif;
  --font-ui: 'Poppins', sans-serif;
}
```

## Known gaps
- Hover and focus states for neomorphic buttons were not captured in static analysis.
- Mobile navigation transition (hamburger menu interaction) was not fully sampled.
- Success and Error semantic colors (e.g., form validation) were not present on analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://songdew.com | 1440x900 | 2026-06-06 |
| About Us | https://songdew.com/about | 1440x900 | 2026-06-06 |
| Mobile Home | https://songdew.com | 390x844 | 2026-06-06 |