design-system-developer

Design System Developer (Smart Router)

Purpose

Context-aware routing to the Anytype iOS design system: icons, typography, colors, spacing. Helps you navigate Figma-to-code translation.

When Auto-Activated

• Working with icons or typography
• Keywords: icon, typography, design system, figma, color, spacing
• Editing files in DesignSystem/ or Assets.xcassets
• Discussing colors or UI components

🚨 CRITICAL RULES (NEVER VIOLATE)

1. ALWAYS use design system constants - Never hardcode hex colors, font sizes, or asset names
2. ALWAYS run make generate after adding assets - Icons and assets must be code-generated
3. Icons are organized by size - x18, x24, x32, x40 (use correct size for context)
4. Typography follows strict mapping - Figma style names map to specific Swift enum cases
5. Spacing formula - NextElement.Y - (CurrentElement.Y + CurrentElement.Height)

📋 Quick Reference

Icon Usage

// 18pt - Toolbar/nav bar icons
Image(asset: .X18.search)

// 24pt - List row icons
Image(asset: .X24.camera)

// 32pt - Buttons, main UI (most common)
Image(asset: .X32.qrCode)

// 40pt - Large features
Image(asset: .X40.profile)

Adding Icons

1. Export SVG from Figma ("32/qr code" → QRCode.svg)
2. Add to /Modules/Assets/.../Assets.xcassets/DesignSystem/x32/QRCode.imageset/
3. Run make generate
4. Use: Image(asset: .X32.qrCode)

Typography Usage

// Screen titles
AnytypeText("Settings", style: .uxTitle1Semibold)

// Section headers
AnytypeText("Recent", style: .uxTitle2Semibold)

// Body text
Text("Description").anytypeStyle(.bodyRegular)

// Small labels
Text("Add Member").anytypeStyle(.caption1Medium)  // Note: no "ux" prefix!

Typography Mapping (Figma → Swift)

Content Styles (remove "Content/" prefix):

• "Content/Body/Semibold" → .bodySemibold
• "Content/Preview Title 2/Regular" → .previewTitle2Regular

UX Styles - Title/Body/Callout (keep "ux" prefix lowercase):

• "UX/Title 1/Semibold" → .uxTitle1Semibold
• "UX/Body/Regular" → .uxBodyRegular

UX Styles - Captions (DROP "ux" prefix - EXCEPTION!):

• "UX/Caption 1/Medium" → .caption1Medium (no "ux")
• "UX/Caption 2/Regular" → .caption2Regular (no "ux")

Common Typography Styles

Use Case	Figma Style	Swift Constant	Size
Screen titles	UX/Title 1/Semibold	.uxTitle1Semibold	28pt
Section headers	UX/Title 2/Semibold	.uxTitle2Semibold	17pt
Body text	Content/Body/Regular	.bodyRegular	17pt
Small labels	UX/Caption 1/Medium	.caption1Medium	13pt

Color Usage

// Backgrounds
.background(Color.Shape.transparentSecondary)
.background(Color.Background.primary)

// Text colors
.foregroundColor(Color.Text.primary)
.foregroundColor(Color.Text.secondary)

// Control colors
.foregroundColor(Color.Control.active)

📏 Spacing from Figma (CRITICAL FORMULA)

CRITICAL: Spacing is the GAP between elements, not top-to-top distance.

Formula:

Spacing = NextElement.Y - (CurrentElement.Y + CurrentElement.Height)

Example:

1. First element: Y=326px, Height=24px → Bottom edge = 350px
2. Second element: Y=374px
3. Spacing = 374 - 350 = 24px ✅

Common mistake:

❌ WRONG: 374 - 326 = 48px  (includes first element's height!)
✅ CORRECT: 374 - (326 + 24) = 24px  (actual gap)

SwiftUI usage:

Text("Title")
Spacer.fixedHeight(24)  // ✅ Correct spacing
Text("Feature")

⚠️ Common Mistakes

Typography Style Doesn't Exist

// ❌ WRONG
Text("Button").anytypeStyle(.uxCaption1Medium)  // Doesn't exist!

// ✅ CORRECT
Text("Button").anytypeStyle(.caption1Medium)  // Captions drop "ux" prefix

Hardcoded Colors

// ❌ WRONG
.background(Color(hex: "#FF0000"))

// ✅ CORRECT
.background(Color.Pure.red)

Wrong Icon Size

// ❌ WRONG - Upscaling looks bad
Image(asset: .X18.qrCode)
    .frame(width: 32, height: 32)

// ✅ CORRECT - Use native size
Image(asset: .X32.qrCode)
    .frame(width: 32, height: 32)

Spacing Calculation

// ❌ WRONG - Top-to-top (includes height)
Spacing = NextElement.Y - CurrentElement.Y

// ✅ CORRECT - Actual gap
Spacing = NextElement.Y - (CurrentElement.Y + CurrentElement.Height)

📚 Complete Documentation

Full Guides:

• Design System: Anytype/Sources/PresentationLayer/Common/DESIGN_SYSTEM_MAPPING.md
• Typography: Anytype/Sources/PresentationLayer/Common/TYPOGRAPHY_MAPPING.md

For comprehensive coverage of:

• Complete typography mapping table
• All color categories and constants
• Icon organization and workflows
• Corner radius standards
• Dimension standards (whole numbers only)
• Design verification workflow
• Dark/light mode considerations

Figma References:

• Typography: https://www.figma.com/file/vgXV7x2v20vJajc7clYJ7a/Typography-Mobile

✅ Design Implementation Checklist

• All icons use .X* constants, no hardcoded asset names
• All typography uses .anytypeStyle() or AnytypeText
• All colors use Color.* constants, no hex values
• Spacing extracted from Figma using correct formula
• All dimensions are whole numbers (or documented if rounded)
• Ran make generate after adding new assets
• Verified against Figma design visually
• Checked dark/light mode appearance

🔗 Related Skills & Docs

• code-generation-developer → CODE_GENERATION_GUIDE.md - Run make generate after adding icons
• ios-dev-guidelines → IOS_DEVELOPMENT_GUIDE.md - SwiftUI patterns for design system
• localization-developer → Combine typography with localized text

---

Navigation: This is a smart router. For deep technical details, always refer to DESIGN_SYSTEM_MAPPING.md and TYPOGRAPHY_MAPPING.md.