cdragon 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/README.md +110 -0
  2. package/bin/cdragon.js +170 -0
  3. package/package.json +31 -0
  4. package/skills/agent-browser/SKILL.md +50 -0
  5. package/skills/grill-me/SKILL.md +7 -0
  6. package/skills/herdr-agent/SKILL.md +142 -0
  7. package/skills/herdr-cli/SKILL.md +388 -0
  8. package/skills/herdr-cli/scripts/herdr-agent-run-and-wait +203 -0
  9. package/skills/herdr-cli/scripts/herdr-agent-wait-complete +168 -0
  10. package/skills/notion-presentation/SKILL.md +170 -0
  11. package/skills/notion-presentation/references/example-redis-deck.md +97 -0
  12. package/skills/setup-matt-pocock-skills/SKILL.md +127 -0
  13. package/skills/setup-matt-pocock-skills/domain.md +51 -0
  14. package/skills/setup-matt-pocock-skills/issue-tracker-github.md +34 -0
  15. package/skills/setup-matt-pocock-skills/issue-tracker-gitlab.md +35 -0
  16. package/skills/setup-matt-pocock-skills/issue-tracker-local.md +19 -0
  17. package/skills/setup-matt-pocock-skills/triage-labels.md +15 -0
  18. package/skills/tdd/SKILL.md +108 -0
  19. package/skills/tdd/mocking.md +59 -0
  20. package/skills/tdd/refactoring.md +10 -0
  21. package/skills/tdd/tests.md +61 -0
  22. package/skills/to-html/SKILL.md +83 -0
  23. package/skills/to-html/designs/INDEX.md +74 -0
  24. package/skills/to-html/designs/airbnb.DESIGN.md +581 -0
  25. package/skills/to-html/designs/airtable.DESIGN.md +275 -0
  26. package/skills/to-html/designs/alipay.DESIGN.md +456 -0
  27. package/skills/to-html/designs/apple.DESIGN.md +566 -0
  28. package/skills/to-html/designs/banksalad.DESIGN.md +621 -0
  29. package/skills/to-html/designs/channeltalk.DESIGN.md +374 -0
  30. package/skills/to-html/designs/clay.DESIGN.md +398 -0
  31. package/skills/to-html/designs/clickhouse.DESIGN.md +374 -0
  32. package/skills/to-html/designs/cohere.DESIGN.md +361 -0
  33. package/skills/to-html/designs/coinone.DESIGN.md +218 -0
  34. package/skills/to-html/designs/coupang.DESIGN.md +502 -0
  35. package/skills/to-html/designs/cursor.DESIGN.md +416 -0
  36. package/skills/to-html/designs/elevenlabs.DESIGN.md +376 -0
  37. package/skills/to-html/designs/expo.DESIGN.md +373 -0
  38. package/skills/to-html/designs/figma.DESIGN.md +490 -0
  39. package/skills/to-html/designs/framer.DESIGN.md +393 -0
  40. package/skills/to-html/designs/freee.DESIGN.md +572 -0
  41. package/skills/to-html/designs/gangnamunni.DESIGN.md +621 -0
  42. package/skills/to-html/designs/gmarket.DESIGN.md +483 -0
  43. package/skills/to-html/designs/gogolook.DESIGN.md +131 -0
  44. package/skills/to-html/designs/hahow.DESIGN.md +158 -0
  45. package/skills/to-html/designs/hashicorp.DESIGN.md +369 -0
  46. package/skills/to-html/designs/hyundaicard.DESIGN.md +177 -0
  47. package/skills/to-html/designs/ibm.DESIGN.md +420 -0
  48. package/skills/to-html/designs/kakaobank.DESIGN.md +548 -0
  49. package/skills/to-html/designs/kakaopay.DESIGN.md +544 -0
  50. package/skills/to-html/designs/karrot.DESIGN.md +445 -0
  51. package/skills/to-html/designs/kdan.DESIGN.md +160 -0
  52. package/skills/to-html/designs/krds.DESIGN.md +997 -0
  53. package/skills/to-html/designs/line.DESIGN.md +431 -0
  54. package/skills/to-html/designs/linear.app.DESIGN.md +548 -0
  55. package/skills/to-html/designs/miro.DESIGN.md +272 -0
  56. package/skills/to-html/designs/mistral.ai.DESIGN.md +353 -0
  57. package/skills/to-html/designs/money-forward.DESIGN.md +401 -0
  58. package/skills/to-html/designs/mongodb.DESIGN.md +357 -0
  59. package/skills/to-html/designs/naver.DESIGN.md +533 -0
  60. package/skills/to-html/designs/nhncloud.DESIGN.md +174 -0
  61. package/skills/to-html/designs/opencode.ai.DESIGN.md +388 -0
  62. package/skills/to-html/designs/pinterest.DESIGN.md +322 -0
  63. package/skills/to-html/designs/posthog.DESIGN.md +430 -0
  64. package/skills/to-html/designs/raycast.DESIGN.md +422 -0
  65. package/skills/to-html/designs/remember.DESIGN.md +460 -0
  66. package/skills/to-html/designs/resend.DESIGN.md +396 -0
  67. package/skills/to-html/designs/sanity.DESIGN.md +449 -0
  68. package/skills/to-html/designs/sendbird.DESIGN.md +285 -0
  69. package/skills/to-html/designs/smarthr.DESIGN.md +404 -0
  70. package/skills/to-html/designs/socar.DESIGN.md +403 -0
  71. package/skills/to-html/designs/spotify.DESIGN.md +265 -0
  72. package/skills/to-html/designs/supabase.DESIGN.md +348 -0
  73. package/skills/to-html/designs/superhuman.DESIGN.md +414 -0
  74. package/skills/to-html/designs/together.ai.DESIGN.md +356 -0
  75. package/skills/to-html/designs/toss.DESIGN.md +655 -0
  76. package/skills/to-html/designs/uber.DESIGN.md +387 -0
  77. package/skills/to-html/designs/upstage.DESIGN.md +232 -0
  78. package/skills/to-html/designs/velog.DESIGN.md +168 -0
  79. package/skills/to-html/designs/vercel.DESIGN.md +479 -0
  80. package/skills/to-html/designs/wanted.DESIGN.md +529 -0
  81. package/skills/to-html/designs/wise.DESIGN.md +276 -0
  82. package/skills/to-html/designs/yanolja.DESIGN.md +463 -0
  83. package/skills/to-html/designs/yeogiotte.DESIGN.md +459 -0
  84. package/skills/to-html/designs/zapier.DESIGN.md +433 -0
  85. package/skills/to-html/designs/zigzag.DESIGN.md +633 -0
  86. package/skills/to-issues/SKILL.md +84 -0
  87. package/skills/to-prd/SKILL.md +75 -0
  88. package/src/colors.js +15 -0
  89. package/src/link.js +47 -0
  90. package/src/prompt.js +137 -0
  91. package/src/skills.js +75 -0
@@ -0,0 +1,373 @@
1
+ ---
2
+ id: expo
3
+ name: Expo
4
+ country: US
5
+ category: developer-tools
6
+ homepage: "https://expo.dev"
7
+ primary_color: "#000020"
8
+ logo:
9
+ type: simpleicons
10
+ slug: expo
11
+ verified: "2026-05-15"
12
+ omd: "0.1"
13
+ ds:
14
+ name: Expo Brand
15
+ url: "https://expo.dev/brand"
16
+ type: brand
17
+ description: Expo logo/wordmark trademark and usage guidelines.
18
+ og_image: "https://og.expo.dev/?theme=universe&title=Brand%2C+Assets%2C+Styles&description=Get+Expo+brand+assets+and+styles+for+any+use."
19
+ ---
20
+
21
+ # Design System Inspiration of Expo
22
+
23
+ ## 1. Visual Theme & Atmosphere
24
+
25
+ Expo's interface is a luminous, confidence-radiating developer platform built on the premise that tools for building apps should feel as polished as the apps themselves. The entire experience lives on a bright, airy canvas — a cool-tinted off-white (`#f0f0f3`) that gives the page a subtle technological coolness without the starkness of pure white. This is a site that breathes: enormous vertical spacing between sections creates a gallery-like pace where each feature gets its own "room."
26
+
27
+ The design language is decisively monochromatic — pure black (`#000000`) headlines against the lightest possible backgrounds, with a spectrum of cool blue-grays (`#60646c`, `#b0b4ba`, `#555860`) handling all secondary communication. Color is almost entirely absent from the interface itself; when it appears, it's reserved for product screenshots, app icons, and the React universe illustration — making the actual content burst with life against the neutral canvas.
28
+
29
+ What makes Expo distinctive is its pill-shaped geometry. Buttons, tabs, video containers, and even images use generously rounded or fully pill-shaped corners (24px–9999px), creating an organic, approachable feel that contradicts the typical sharp-edged developer tool aesthetic. Combined with tight letter-spacing on massive headlines (-1.6px to -3px at 64px), the result is a design that's simultaneously premium and friendly — like an Apple product page reimagined for developers.
30
+
31
+ **Key Characteristics:**
32
+ - Luminous cool-white canvas (`#f0f0f3`) with gallery-like vertical spacing
33
+ - Strictly monochromatic: pure black headlines, cool blue-gray body text, no decorative color
34
+ - Pill-shaped geometry everywhere — buttons, tabs, containers, images (24px–9999px radius)
35
+ - Massive display headlines (64px) with extreme negative letter-spacing (-1.6px to -3px)
36
+ - Inter as the sole typeface, used at weights 400–900 for full expressive range
37
+ - Whisper-soft shadows that barely lift elements from the surface
38
+ - Product screenshots as the only source of color in the interface
39
+
40
+ ## 2. Color Palette & Roles
41
+
42
+ ### Primary
43
+ - **Expo Black** (`#000000`): The absolute anchor — used for primary headlines, CTA buttons, and the brand identity. Pure black on cool white creates maximum contrast without feeling aggressive.
44
+ - **Near Black** (`#1c2024`): The primary text color for body content — a barely perceptible blue-black that's softer than pure #000 for extended reading.
45
+
46
+ ### Secondary & Accent
47
+ - **Link Cobalt** (`#0d74ce`): The standard link color — a trustworthy, saturated blue that signals interactivity without competing with the monochrome hierarchy.
48
+ - **Legal Blue** (`#476cff`): A brighter, more saturated blue for legal/footer links — slightly more attention-grabbing than Link Cobalt.
49
+ - **Widget Sky** (`#47c2ff`): A light, friendly cyan-blue for widget branding elements — the brightest accent in the system.
50
+ - **Preview Purple** (`#8145b5`): A rich violet used for "preview" or beta feature indicators — creating clear visual distinction from standard content.
51
+
52
+ ### Surface & Background
53
+ - **Cloud Gray** (`#f0f0f3`): The primary page background — a cool off-white with the faintest blue-violet tint. Not warm, not sterile — precisely technological.
54
+ - **Pure White** (`#ffffff`): Card surfaces, button backgrounds, and elevated content containers. Creates a clear "lifted" distinction from Cloud Gray.
55
+ - **Widget Dark** (`#1a1a1a`): Dark surface for dark-theme widgets and overlay elements.
56
+ - **Banner Dark** (`#171717`): The darkest surface variant, used for promotional banners and high-contrast containers.
57
+
58
+ ### Neutrals & Text
59
+ - **Slate Gray** (`#60646c`): The workhorse secondary text color (305 instances). A cool blue-gray that's authoritative without being heavy.
60
+ - **Mid Slate** (`#555860`): Slightly darker than Slate, used for emphasized secondary text.
61
+ - **Silver** (`#b0b4ba`): Tertiary text, placeholders, and de-emphasized metadata. Comfortably readable but clearly receded.
62
+ - **Pewter** (`#999999`): Accordion icons and deeply de-emphasized UI elements in dark contexts.
63
+ - **Light Silver** (`#cccccc`): Arrow icons and decorative elements in dark contexts.
64
+ - **Dark Slate** (`#363a3f`): Borders on dark surfaces, switch tracks, and emphasized containment.
65
+ - **Charcoal** (`#333333`): Dark mode switch backgrounds and deep secondary surfaces.
66
+
67
+ ### Semantic & Accent
68
+ - **Warning Amber** (`#ab6400`): A warm, deep amber for warning states — deliberately not bright yellow, conveying seriousness.
69
+ - **Destructive Rose** (`#eb8e90`): A soft pink-coral for disabled destructive actions — gentler than typical red, reducing alarm fatigue.
70
+ - **Border Lavender** (`#e0e1e6`): Standard card/container borders — a cool lavender-gray that's visible without being heavy.
71
+ - **Input Border** (`#d9d9e0`): Button and form element borders — slightly warmer/darker than card borders for interactive elements.
72
+ - **Dark Focus Ring** (`#2547d0`): Deep blue for keyboard focus indicators in dark theme contexts.
73
+
74
+ ### Gradient System
75
+ - The design is notably **gradient-free** in the interface layer. Visual richness comes from product screenshots, the React universe illustration, and careful shadow layering rather than color gradients. This absence IS the design decision — gradients would undermine the clinical precision.
76
+
77
+ ## 3. Typography Rules
78
+
79
+ ### Font Family
80
+ - **Primary**: `Inter`, with fallbacks: `-apple-system, system-ui`
81
+ - **Monospace**: `JetBrains Mono`, with fallback: `ui-monospace`
82
+ - **System Fallback**: `system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji`
83
+
84
+ ### Hierarchy
85
+
86
+ | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
87
+ |------|------|------|--------|-------------|----------------|-------|
88
+ | Display / Hero | Inter | 64px (4rem) | 700–900 | 1.10 (tight) | -1.6px to -3px | Maximum impact, extreme tracking |
89
+ | Section Heading | Inter | 48px (3rem) | 600 | 1.10 (tight) | -2px | Feature section anchors |
90
+ | Sub-heading | Inter | 20px (1.25rem) | 600 | 1.20 (tight) | -0.25px | Card titles, feature names |
91
+ | Body Large | Inter | 18px (1.13rem) | 400–500 | 1.40 | normal | Intro paragraphs, section descriptions |
92
+ | Body / Button | Inter | 16px (1rem) | 400–700 | 1.25–1.40 | normal | Standard text, nav links, buttons |
93
+ | Caption / Label | Inter | 14px (0.88rem) | 400–600 | 1.00–1.40 | normal | Descriptions, metadata, badge text |
94
+ | Tag / Small | Inter | 12px (0.75rem) | 500 | 1.00–1.60 | normal | Smallest sans-serif text, badges |
95
+ | Code Body | JetBrains Mono | 16px (1rem) | 400–600 | 1.40 | normal | Inline code, terminal commands |
96
+ | Code Caption | JetBrains Mono | 14px (0.88rem) | 400–600 | 1.40 | normal | Code snippets, technical labels |
97
+ | Code Small | JetBrains Mono | 12px (0.75rem) | 400 | 1.60 | normal | Uppercase tech tags |
98
+
99
+ ### Principles
100
+ - **One typeface, full expression**: Inter is the only sans-serif, used from weight 400 (regular) through 900 (black). This gives the design a unified voice while still achieving dramatic contrast between whisper-light body text and thundering display headlines.
101
+ - **Extreme negative tracking at scale**: Headlines at 64px use -1.6px to -3px letter-spacing, creating ultra-dense text blocks that feel like logotypes. This aggressive compression is the signature typographic move.
102
+ - **Weight as hierarchy**: 700–900 for display, 600 for headings, 500 for emphasis, 400 for body. The jumps are decisive — no ambiguous in-between weights.
103
+ - **Consistent 1.40 body line-height**: Nearly all body and UI text shares 1.40 line-height, creating a rhythmic vertical consistency.
104
+
105
+ ## 4. Component Stylings
106
+
107
+ ### Buttons
108
+
109
+ **Primary (White on border)**
110
+ - Background: Pure White (`#ffffff`)
111
+ - Text: Near Black (`#1c2024`)
112
+ - Padding: 0px 12px (compact, content-driven height)
113
+ - Border: thin solid Input Border (`1px solid #d9d9e0`)
114
+ - Radius: subtly rounded (6px)
115
+ - Shadow: subtle combined shadow on hover
116
+ - The understated default — clean, professional, unheroic
117
+
118
+ **Primary Pill**
119
+ - Same as Primary but with pill-shaped radius (9999px)
120
+ - Used for hero CTAs and high-emphasis actions
121
+ - The extra roundness signals "start here"
122
+
123
+ **Dark Primary**
124
+ - Background: Expo Black (`#000000`)
125
+ - Text: Pure White (`#ffffff`)
126
+ - Pill-shaped (9999px) or generously rounded (32–36px)
127
+ - No border (black IS the border)
128
+ - The maximum-emphasis CTA — reserved for primary conversion actions
129
+
130
+ ### Cards & Containers
131
+ - Background: Pure White (`#ffffff`) — clearly lifted from Cloud Gray page
132
+ - Border: thin solid Border Lavender (`1px solid #e0e1e6`) for standard cards
133
+ - Radius: comfortably rounded (8px) for standard cards; generously rounded (16–24px) for featured containers
134
+ - Shadow Level 1: Whisper (`rgba(0,0,0,0.08) 0px 3px 6px, rgba(0,0,0,0.07) 0px 2px 4px`) — barely perceptible lift
135
+ - Shadow Level 2: Standard (`rgba(0,0,0,0.1) 0px 10px 20px, rgba(0,0,0,0.05) 0px 3px 6px`) — clear floating elevation
136
+ - Hover: likely subtle shadow deepening or background shift
137
+
138
+ ### Inputs & Forms
139
+ - Background: Pure White (`#ffffff`)
140
+ - Text: Near Black (`#1c2024`)
141
+ - Border: thin solid Input Border (`1px solid #d9d9e0`)
142
+ - Padding: 0px 12px (inline with button sizing)
143
+ - Radius: subtly rounded (6px)
144
+ - Focus: blue ring shadow via CSS custom property
145
+
146
+ ### Navigation
147
+ - Sticky top nav on transparent/blurred background
148
+ - Logo: Expo wordmark in black
149
+ - Links: Near Black (`#1c2024`) or Slate Gray (`#60646c`) at 14–16px Inter weight 500
150
+ - CTA: Black pill button ("Sign Up") on the right
151
+ - GitHub star badge as social proof
152
+ - Status indicator ("All Systems Operational") with green dot
153
+
154
+ ### Image Treatment
155
+ - Product screenshots and device mockups are the visual heroes
156
+ - Generously rounded corners (24px) on video and image containers
157
+ - Screenshots shown in realistic device frames
158
+ - Dark UI screenshots provide contrast against the light canvas
159
+ - Full-bleed within rounded containers
160
+
161
+ ### Distinctive Components
162
+
163
+ **Universe React Logo**
164
+ - Animated/illustrated React logo as the visual centerpiece
165
+ - Connects Expo's identity to the React ecosystem
166
+ - The only illustrative element on an otherwise photographic page
167
+
168
+ **Device Preview Grid**
169
+ - Multiple device types (phone, tablet, web) shown simultaneously
170
+ - Demonstrates cross-platform capability visually
171
+ - Each device uses realistic device chrome
172
+
173
+ **Status Badge**
174
+ - "All Systems Operational" pill in the nav
175
+ - Green dot + text — compact trust signal
176
+ - Pill-shaped (36px radius)
177
+
178
+ ## 5. Layout Principles
179
+
180
+ ### Spacing System
181
+ - Base unit: 8px
182
+ - Scale: 1px, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 144px
183
+ - Button padding: 0px 12px (unusually compact — height driven by line-height)
184
+ - Card internal padding: approximately 24–32px
185
+ - Section vertical spacing: enormous (estimated 96–144px between major sections)
186
+ - Component gap: 16–24px between sibling elements
187
+
188
+ ### Grid & Container
189
+ - Max container width: approximately 1200–1400px, centered
190
+ - Hero: centered single-column with massive breathing room
191
+ - Feature sections: alternating layouts (image left/right, full-width showcases)
192
+ - Card grids: 2–3 column for feature highlights
193
+ - Full-width sections with contained inner content
194
+
195
+ ### Whitespace Philosophy
196
+ - **Gallery-like pacing**: Each section feels like its own exhibit, surrounded by vast empty space. This creates a premium, unhurried browsing experience.
197
+ - **Breathing room is the design**: The generous whitespace IS the primary design element — it communicates confidence, quality, and that each feature deserves individual attention.
198
+ - **Content islands**: Sections float as isolated "islands" in the white space, connected by scrolling rather than visual continuation.
199
+
200
+ ### Border Radius Scale
201
+ - Nearly squared (4px): Small inline elements, tags
202
+ - Subtly rounded (6px): Buttons, form inputs, combo boxes — the functional interactive radius
203
+ - Comfortably rounded (8px): Standard content cards, containers
204
+ - Generously rounded (16px): Feature tabs, content panels
205
+ - Very rounded (24px): Buttons, video/image containers, tabpanels — the signature softness
206
+ - Highly rounded (32–36px): Hero CTAs, status badges, nav buttons
207
+ - Pill-shaped (9999px): Primary action buttons, tags, avatars — maximum friendliness
208
+
209
+ ## 6. Depth & Elevation
210
+
211
+ | Level | Treatment | Use |
212
+ |-------|-----------|-----|
213
+ | Flat (Level 0) | No shadow | Cloud Gray page background, inline text |
214
+ | Surface (Level 1) | White bg, no shadow | Standard white cards on Cloud Gray |
215
+ | Whisper (Level 2) | `rgba(0,0,0,0.08) 0px 3px 6px` + `rgba(0,0,0,0.07) 0px 2px 4px` | Subtle card lift, hover states |
216
+ | Elevated (Level 3) | `rgba(0,0,0,0.1) 0px 10px 20px` + `rgba(0,0,0,0.05) 0px 3px 6px` | Feature showcases, product screenshots |
217
+ | Modal (Level 4) | Dark overlay (`--dialog-overlay-background-color`) + heavy shadow | Dialogs, overlays |
218
+
219
+ **Shadow Philosophy**: Expo uses shadows as gentle whispers rather than architectural statements. The primary depth mechanism is **background color contrast** — white cards floating on Cloud Gray — rather than shadow casting. When shadows appear, they're soft, diffused, and directional (downward), creating the feeling of paper hovering millimeters above a desk.
220
+
221
+ ## 7. Do's and Don'ts
222
+
223
+ ### Do
224
+ - Use Cloud Gray (`#f0f0f3`) as the page background and Pure White (`#ffffff`) for elevated cards — the two-tone light system is essential
225
+ - Keep display headlines at extreme negative letter-spacing (-1.6px to -3px at 64px) for the signature compressed look
226
+ - Use pill-shaped (9999px) radius for primary CTA buttons — the organic shape is core to the identity
227
+ - Reserve black (`#000000`) for headlines and primary CTAs — it carries maximum authority on the light canvas
228
+ - Use Slate Gray (`#60646c`) for secondary text — it's the precise balance between readable and receded
229
+ - Maintain enormous vertical spacing between sections (96px+) — the gallery pacing defines the premium feel
230
+ - Use product screenshots as the primary visual content — the interface stays monochrome, the products bring color
231
+ - Apply Inter at the full weight range (400–900) — weight contrast IS the hierarchy
232
+
233
+ ### Don't
234
+ - Don't introduce decorative colors into the interface chrome — the monochromatic palette is intentional
235
+ - Don't use sharp corners (border-radius < 6px) on interactive elements — the pill/rounded geometry is the signature
236
+ - Don't reduce section spacing below 64px — the breathing room is the design
237
+ - Don't use heavy drop shadows — depth comes from background contrast and whisper-soft shadows
238
+ - Don't mix in additional typefaces — Inter handles everything from display to caption
239
+ - Don't use letter-spacing wider than -0.25px on body text — extreme tracking is reserved for display only
240
+ - Don't use borders heavier than 2px — containment is subtle, achieved through background color and gentle borders
241
+ - Don't add gradients to the interface — visual richness comes from content, not decoration
242
+ - Don't use saturated colors outside of semantic contexts — the palette is strictly grayscale + functional blue
243
+
244
+ ## 8. Responsive Behavior
245
+
246
+ ### Breakpoints
247
+ | Name | Width | Key Changes |
248
+ |------|-------|-------------|
249
+ | Mobile | <640px | Single column, hamburger nav, stacked cards, hero text scales to ~36px |
250
+ | Tablet | 640–1024px | 2-column grids, condensed nav, medium hero text |
251
+ | Desktop | >1024px | Full multi-column layout, expanded nav, massive hero (64px) |
252
+
253
+ *Only one explicit breakpoint detected (640px), suggesting a fluid, container-query or min()/clamp()-based responsive system rather than fixed breakpoint snapping.*
254
+
255
+ ### Touch Targets
256
+ - Buttons use generous radius (24–36px) creating large, finger-friendly surfaces
257
+ - Navigation links spaced with adequate gap
258
+ - Status badge sized for touch (36px radius)
259
+ - Minimum recommended: 44x44px
260
+
261
+ ### Collapsing Strategy
262
+ - **Navigation**: Full horizontal nav with CTA collapses to hamburger on mobile
263
+ - **Feature sections**: Multi-column → stacked single column
264
+ - **Hero text**: 64px → ~36px progressive scaling
265
+ - **Device previews**: Grid → stacked/carousel
266
+ - **Cards**: Side-by-side → vertical stacking
267
+ - **Spacing**: Reduces proportionally but maintains generous rhythm
268
+
269
+ ### Image Behavior
270
+ - Product screenshots scale proportionally
271
+ - Device mockups may simplify or show fewer devices on mobile
272
+ - Rounded corners maintained at all sizes
273
+ - Lazy loading for below-fold content
274
+
275
+ ## 9. Agent Prompt Guide
276
+
277
+ ### Quick Color Reference
278
+ - Primary CTA / Headlines: "Expo Black (#000000)"
279
+ - Page Background: "Cloud Gray (#f0f0f3)"
280
+ - Card Surface: "Pure White (#ffffff)"
281
+ - Body Text: "Near Black (#1c2024)"
282
+ - Secondary Text: "Slate Gray (#60646c)"
283
+ - Borders: "Border Lavender (#e0e1e6)"
284
+ - Links: "Link Cobalt (#0d74ce)"
285
+ - Tertiary Text: "Silver (#b0b4ba)"
286
+
287
+ ### Example Component Prompts
288
+ - "Create a hero section on Cloud Gray (#f0f0f3) with a massive headline at 64px Inter weight 700, line-height 1.10, letter-spacing -3px. Text in Expo Black (#000000). Below, add a subtitle in Slate Gray (#60646c) at 18px. Place a black pill-shaped CTA button (9999px radius) beneath."
289
+ - "Design a feature card on Pure White (#ffffff) with a 1px solid Border Lavender (#e0e1e6) border and comfortably rounded corners (8px). Title in Near Black (#1c2024) at 20px Inter weight 600, description in Slate Gray (#60646c) at 16px. Add a whisper shadow (rgba(0,0,0,0.08) 0px 3px 6px)."
290
+ - "Build a navigation bar with Expo logo on the left, text links in Near Black (#1c2024) at 14px Inter weight 500, and a black pill CTA button on the right. Background: transparent with blur backdrop. Bottom border: 1px solid Border Lavender (#e0e1e6)."
291
+ - "Create a code block using JetBrains Mono at 14px on a Pure White surface with Border Lavender border and 8px radius. Code in Near Black, keywords in Link Cobalt (#0d74ce)."
292
+ - "Design a status badge pill (9999px radius) with a green dot and 'All Systems Operational' text in Inter 12px weight 500. Background: Pure White, border: 1px solid Input Border (#d9d9e0)."
293
+
294
+ ### Iteration Guide
295
+ 1. Focus on ONE component at a time
296
+ 2. Reference specific color names and hex codes — "use Slate Gray (#60646c)" not "make it gray"
297
+ 3. Use radius values deliberately — 6px for buttons, 8px for cards, 24px for images, 9999px for pills
298
+ 4. Describe the "feel" alongside measurements — "enormous breathing room with 96px section spacing"
299
+ 5. Always specify Inter and the exact weight — weight contrast IS the hierarchy
300
+ 6. For shadows, specify "whisper shadow" or "standard elevation" from the elevation table
301
+ 7. Keep the interface monochrome — let product content be the color
302
+
303
+ ## 10. Voice & Tone
304
+
305
+ Expo's voice is **builder-focused and warm-precise.** The brand emphasizes shipping React Native apps with the same speed as web — copy is capability-driven, never marketing-fluff. Surfaces lean into the "framework that gets out of your way" register.
306
+
307
+ | Context | Tone |
308
+ |---|---|
309
+ | CTA | Verb. "Try it free", "Sign up", "Get started" |
310
+ | Marketing | Short claim + screenshots. Capability-list, not benefit-list |
311
+ | Documentation | Imperative, code-block-first, deeply linked |
312
+ | Error (build) | Stack-trace-friendly. Show the actual EAS build error |
313
+
314
+ **Voice samples**
315
+ - Marketing CTA: *"Try it free"* / *"Sign up"* <!-- verified: expo.dev homepage 2026-05 -->
316
+
317
+ **Forbidden phrases.** "Revolutionize mobile", "magic". Apology theatre.
318
+
319
+ ## 11. Brand Narrative
320
+
321
+ Expo was founded **October 2013** by **Charlie Cheever (CEO)** and **James Ide (CTO)** — Cheever was an **early Facebook engineer** and **Quora co-founder**, Ide an early React Native contributor ([Y Combinator — Expo](https://www.ycombinator.com/companies/expo)). Started as **Exponent**, a managed React Native runtime that abstracted iOS/Android build complexity. **First Expo development client released for iPhone May 2015** soon after React Native's public release. Participated in **Y Combinator Summer 2016**. Operates under legal name **650 Industries, Inc.** ([Crunchbase — Expo](https://www.crunchbase.com/organization/exponent-3)). **3M+ developers** build with Expo today. Pivoted toward a fully open-source framework + **EAS (Expo Application Services)** cloud build/deploy/update platform. **Series B $45M (Apr 2026)** led by **Georgian** with **Leadout Capital, A Capital, Red Swan** — round announced alongside **Expo Agent**, an AI mobile-app builder ([SiliconANGLE](https://siliconangle.com/2026/04/16/developer-tooling-startup-expo-nabs-45m-investment/), [PR Newswire](https://www.prnewswire.com/news-releases/expo-raises-45m-series-b-and-launches-expo-agent-to-close-the-gap-from-idea-to-production-ready-mobile-apps-302744423.html)). The brand voice tracks this: framework-first, build-pipeline-deep, developer-focused.
322
+
323
+ ## 12. Principles
324
+
325
+ 1. **Ship to all platforms from one codebase.** *UI implication:* surfaces emphasize iOS + Android + Web parity, never platform-specific UI.
326
+ 2. **EAS is the runway.** Cloud build/deploy/update services are first-class. *UI implication:* dashboards show build status with first-class UX investment.
327
+ 3. **Documentation is product.** *UI implication:* docs.expo.dev has full-time design investment; not "marketing site sidebar".
328
+ 4. **Monochrome chrome, color content.** *UI implication:* don't use bright accents in chrome — the developer's app preview carries color.
329
+ 5. **Whisper shadows, never heavy.** *UI implication:* depth via subtle gradients + 1px borders; no 0.5+ opacity shadows.
330
+
331
+ ## 13. Personas
332
+
333
+ *Personas are fictional archetypes informed by Expo user segments (React Native developers, indie mobile app shippers, enterprise mobile teams), not individual people.*
334
+
335
+ **Yuki Tanaka, 29, Tokyo.** Indie developer shipping mobile-first SaaS. EAS Build replaces Apple/Google certificate management she'd otherwise navigate manually.
336
+
337
+ **Marcus Chen, 38, San Francisco.** Senior engineer at B2B SaaS adding mobile. Expo as the "stop bikeshedding native build infra" choice.
338
+
339
+ **Priya Rao, 27, Bengaluru.** Bootcamp grad shipping first React Native app. Expo Go (try-without-build) is the entire onboarding she needed.
340
+
341
+ ## 14. States
342
+
343
+ | State | Treatment |
344
+ |---|---|
345
+ | **Empty (no projects)** | "Create your first app with `npx create-expo-app`" |
346
+ | **Empty (no builds)** | "Submit your first build" with EAS CLI snippet |
347
+ | **Loading (build running)** | Persistent progress with step + ETA (provisioning, fetching deps, archiving) |
348
+ | **Loading (preview)** | QR code for Expo Go alongside skeleton |
349
+ | **Error (build)** | Full log with collapsible sections + suggestion |
350
+ | **Error (config)** | Specific reason + link to docs section |
351
+ | **Success (build)** | Build artifacts download links + install QR |
352
+ | **Success (deploy/update)** | Update channel info + when users will receive |
353
+ | **Skeleton (project list)** | Whisper-shadow rectangles |
354
+ | **Disabled (no quota)** | 0.5 opacity + upgrade link |
355
+ | **Loading (long install)** | Real-time log stream |
356
+
357
+ ## 15. Motion & Easing
358
+
359
+ | Token | Value | Use |
360
+ |---|---|---|
361
+ | `motion-instant` | 0ms | Toggle |
362
+ | `motion-fast` | 150ms | Hover |
363
+ | `motion-standard` | 250ms | Modal, panel |
364
+
365
+ Standard cubic-bezier; no bounce. `prefers-reduced-motion: reduce` removes hover transitions.
366
+
367
+ ---
368
+
369
+ **Verified:** 2026-05-08 (omd:migrate run 23 — Apple-tier)
370
+ **Tier 1 sources:** expo.dev home + /pricing (live DOM via playwright — Primary `#000` height=radius pill {hero 48px / header+pricing 36px} 0×{24/16} / 14-16px·500; Secondary `#f0f0f3` Cool Gray same geometry; testimonial card 8px `#fff`).
371
+ **Tier 2 sources:** styles.refero.design / getdesign.md — no record.
372
+ **Tier 2 (Philosophy/founders):** Y Combinator (Expo profile), Crunchbase, SiliconANGLE, PR Newswire (Series B 2026), TechCompanyNews.
373
+ **Style ref:** `stripe`. **Conflicts unresolved:** none.