ONE-OS/.agents/skills/ui-ux-pro-max/data/design.csv

1	Bauhaus（包豪斯）
2	大胆的几何现代主义，包含圆形、方形和三角形。主色调（红/蓝/黄），边缘鲜明，阴影强烈。功能性与艺术性兼备，带有建构主义的不对称。
3	1. 极简主义品牌官网与电商
4	2. 工具类与高效率 App
5	3. 数字媒体与在线杂志
6	<design-system>
7	Design Style: Bauhaus (Mobile)
8	1. Design Philosophy
9	Vibe: Tactile, Constructivist, Geometric, High-Contrast, Bold, Architectural
10	Core Concept: The mobile interface is a vertical geometric composition. Scroll views are not just content streams but stacked layers of colored paper and rigid shapes. The limited screen real estate forces a focus on massive typography and distinct color blocking (Red #D02020, Blue #1040C0, Yellow #F0C020). Every tap should feel mechanical and substantial.
11	Key Characteristics:
12	● Geometric Purity: UI elements are strictly circles (buttons/avatars) or squares (cards/inputs).
13	● Color Blocking: distinct screen sections use solid primary colors to separate content without whitespace.
14	● Thick Borders: 2px and 3px black borders ensure legibility and distinct separation on small screens.
15	● Vertical Rhythm: Strong vertical stacking with deliberate spacing, avoiding clutter.
16	● Constructivist Typography: Headlines are massive (text-4xl to text-5xl) relative to screen width, breaking traditional mobile scaling rules.
17	● Thumb-Friendly: Interactive zones are large, distinct, and geometrically defined.
18	2. Design Token System (The DNA)
19	Colors (Single Palette - Light Mode)
20	The palette remains strictly Bauhaus primaries, optimized for high contrast outdoors.
21	● background: #F0F0F0 (Off-white canvas)
22	● foreground: #121212 (Stark Black)
23	● primary-red: #D02020 (Bauhaus Red)
24	● primary-blue: #1040C0 (Bauhaus Blue)
25	● primary-yellow: #F0C020 (Bauhaus Yellow)
26	● border: #121212 (Thick, distinct borders)
27	● muted: #E0E0E0
28	Typography
29	● Font Family: 'Outfit' (geometric sans-serif).
30	● Font Import: Outfit:wght@400;500;700;900
31	● Scaling: Aggressive scaling adapted for vertical viewports.
32	○ Display: text-4xl → text-5xl (Massive headers taking up 30-40% of screen width)
33	○ Subheadings: text-xl → text-2xl
34	○ Body: text-base (16px minimum for legibility)
35	○ Button Text: text-lg (Large for readability)
36	● Weights:
37	○ Headlines: font-black (900) uppercase, tight tracking (tracking-tighter)
38	○ Buttons/Nav: font-bold (700) uppercase, wide tracking (tracking-wide)
39	○ Body: font-medium (500)
40	● Line Height: Tight (leading-none) for headlines to save vertical space; leading-relaxed for body text.
41	Radius & Border
42	● Radius: Strict Binary—rounded-none (0px) for layout blocks, inputs, and cards; rounded-full (9999px) for primary action buttons and avatars.
43	● Border Widths:
44	○ Standard Elements: border-2 (2px)
45	○ Major Containers/Bottom Nav: border-t-2 or border-3
46	○ Separators: divide-y-2
47	● Border Color: Always #121212 (black).
48	Shadows/Effects
49	● Hard Offset Shadows (Tactile feedback):
50	○ Small elements (Tags/Icons): shadow-[2px_2px_0px_0px_black]
51	○ Buttons/Cards: shadow-[4px_4px_0px_0px_black] (Reduced from web 8px to save screen width)
52	○ Floating Action Button (FAB): shadow-[5px_5px_0px_0px_black]
53	● Touch Feedback: active:translate-x-[2px] active:translate-y-[2px] active:shadow-none (Instant mechanical depression).
54	● Patterns:
55	○ Screen transitions: Slide-over with hard black borders.
56	3. Component Stylings
57	Buttons (Touch Targets)
58	● Minimum Size: Height h-12 or h-14 (48px-56px) for thumb accessibility.
59	● Variants:
60	○ Primary (CTA): w-full bg-[#D02020] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]
61	○ Secondary: w-full bg-[#1040C0] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]
62	○ Floating Action (FAB): h-14 w-14 rounded-full bg-[#F0C020] border-2 border-black shadow-[4px_4px_0px_0px_black] flex items-center justify-center
63	● Shapes: Full-width rectangular buttons (rounded-none) or pill-shaped (rounded-full) for bottom-sticky actions.
64	● States: NO hover. Focus on active state (press down effect).
65	Cards (Mobile Stack)
66	● Base Style: White background, border-2 border-black, shadow-[4px_4px_0px_0px_black], mb-6.
67	● Decoration:
68	○ Geometric badge in top-right: absolute top-0 right-0 h-8 w-8 bg-[#F0C020] border-l-2 border-b-2 border-black flex items-center justify-center.
69	● Interaction: Entire card is a touch target. active:translate-x-[1px] active:translate-y-[1px] active:shadow-[2px_2px_0px_0px_black].
70	● Content: Image usually takes top half (aspect-video), bold text below.
71	Bottom Navigation (The Anchor)
72	● Container: fixed bottom-0 w-full bg-white border-t-2 border-black z-50 h-20.
73	● Grid: 3 to 5 items equally spaced.
74	● Items:
75	○ Inactive: Black stroke icon, clear background.
76	○ Active: Icon inside a geometric shape (Square/Circle) with primary color fill (e.g., Red Square context).
77	○ Label: Tiny uppercase bold text below icon, or icon only for minimalism.
78	Inputs & Forms
79	● Field: h-12 bg-white border-2 border-black rounded-none px-4 text-black placeholder:text-gray-400 focus:bg-[#FFF9C4] focus:ring-0 focus:border-black.
80	● Label: Uppercase bold, mb-1 block.
81	● Checkbox: h-6 w-6 appearance-none border-2 border-black bg-white checked:bg-[#1040C0] rounded-none.
82	4. Layout & Spacing
83	● Container: w-full with px-5 (20px) padding. Max-width constraints removed (fluid mobile).
84	● Section Padding:
85	○ Standard: py-8
86	○ Hero: pt-12 pb-16
87	● Grid Systems:
88	○ Main Layout: Single column (Stack).
89	○ Micro-grids: 2-column for stats/gallery (gap-3 or gap-4).
90	● Safe Areas: Respect pt-safe (top notch) and pb-safe (bottom home indicator).
91	● Dividers: Thick section separators border-b-2 border-black usually paired with a background color change.
92	5. Non-Genericness (Bold Choices)
93	Mobile Constraints require distinct personality to avoid looking like a wireframe:
94	● Full-Screen Color Washes:
95	○ Onboarding screens: Full solid backgrounds (Red Screen → Blue Screen → Yellow Screen).
96	○ Success states: Full Yellow background (bg-[#F0C020]) with massive black centered checkmark.
97	○ Error states: Full Red background (bg-[#D02020]) with white text.
98	● Header Identity:
99	● Geometric Lists:
100	○ List items aren't just text lines. They are alternating geometric bullets: Line 1 uses a ■, Line 2 uses a ●, Line 3 uses a ▲.
101	● Image Filters:
102	○ Thumbnails: Grayscale + High Contrast.
103	○ Detail View: Full color, no rounded corners, thick black border.
104	6. Icons & Imagery
105	● Icon Library: lucide-react-native or similar (Circle, Square, Triangle, Menu, X, ArrowLeft).
106	● Icon Style:
107	○ Stroke: stroke-[2px].
108	○ Size: w-6 h-6 (standard) or w-8 h-8 (hero actions).
109	● Icon Containers:
110	○ Navigation icons often live inside rigid 48x48px bordered squares.
111	○ Back buttons are always circular rounded-full with a border.
112	● Imagery:
113	○ Masking: Use CSS clip-paths to crop header images into non-standard shapes (e.g., a trapezoid or a circle cropped at the bottom) within the mobile frame.
114	7. Responsive Strategy (Device Sizes)
115	● Small Phones (SE/Mini):
116	○ Reduce display text to text-3xl.
117	○ Stack stats vertically (1-col).
118	○ Reduce padding to px-4.
119	● Large Phones (Max/Plus):
120	○ Display text scales to text-5xl.
121	○ Stats can use 2-col grid.
122	○ Card images gain more height.
123	● Orientation:
124	○ Portrait (Primary): Vertical stacking.
125	○ Landscape: Avoid if possible, or split screen 50/50 (Text Left / Image Right).
126	8. Animation & Micro-Interactions
127	● Feel: Physical, snappy, zero-latency.
128	● Duration: duration-150 (Very fast).
129	● Easing: ease-in-out (Sharp stops).
130	● Interactions:
131	○ Tap: The element physically depresses (translate X/Y matches shadow size).
132	○ Drawer Open: Slides in from Left/Right with a solid black border line leading it. No soft fades—it slides like a mechanical door.
133	○ Toast/Alerts: Drop down from top as a solid geometric block (Yellow/Red) with hard borders, swinging slightly like a hanging sign.
134	○ Scroll: Sticky headers snap into place instantly.
135	</design-system>
136	1. 极简主义电商与高端奢侈品 2. 专业创意与文档编辑工具 3. 数据密集型仪表盘（局部应用） 4. 实验性与先锋感网站
137	<design-system>
138	Design Style: Minimalist Monochrome (Mobile)
139	Design Philosophy
140	Core Principle
141	Visual Vibe
142	Emotional Keywords: Tactile, Austere, Editorial, Direct, High-Fidelity, Uncompromising, Sharp, Rhythmic.
143	This is the visual language of:
144	● Mobile typographers and digital brutalism
145	● The mobile interfaces of luxury fashion houses (Balenciaga, Zara, SSENSE)
146	● Digital exhibitions where the content frames itself
147	● High-contrast e-reader aesthetics
148	What This Design Is NOT
149	● ❌ Native iOS/Android standard (no system blue, no rounded groups)
150	● ❌ Gesture-heavy (interactions are explicit taps, not vague swipes)
151	● ❌ Cluttered (one idea per screen view)
152	● ❌ Colorful (strictly grayscale)
153	The DNA of Minimalist Monochrome (Mobile)
154	1. Vertical Linearity
155	The mobile screen is a continuous roll of paper. Structure is created not by boxes, but by horizontal lines (rules) that span the full width of the device. Content lives between these lines.
156	2. Typography as Interface
157	Buttons are often just large words. Navigation is text-based. The serif typeface (Playfair Display) acts as the primary image on the screen. Headlines must be large enough to break words onto new lines, creating graphic shapes.
158	4. Zero Radius, Zero Fluff
159	All elements—buttons, images, inputs, modals—have strictly 0px border radius. This sharp geometry cuts through the rounded physical corners of modern smartphones, creating a striking contrast.
160	Design Token System
161	Colors (Strictly Monochrome)
162	background: #FFFFFF (Pure white)
163	foreground: #000000 (Pure black)
164	mutedForeground: #525252 (Dark gray for metadata)
165	border: #000000 (Black borders - heavy usage)
166	borderLight: #E5E5E5 (Subtle dividers)
167	overlay: #000000 (Full screen menu background)
168	Typography
169	Font Stack:
170	Type Scale (Mobile Optimized):
171	xs: 0.75rem (12px) - Metadata / Breadcrumbs
172	sm: 0.875rem (14px) - UI Labels / Captions
173	base: 1rem (16px) - Body text (Legibility minimum)
174	lg: 1.125rem (18px) - Lead text / Button text
175	xl: 1.5rem (24px) - Section headers
176	2xl: 2rem (32px) - Standard Headlines
177	3xl: 2.5rem (40px) - Hero Sub-text
178	4xl: 3rem (48px) - Major Headlines
179	6xl: 5rem (80px) - Numerical statements
180	Tracking & Leading:
181	● Headlines: tracking-tighter (-0.05em) and leading-[0.9]. Text should feel tightly packed.
182	● Body: leading-relaxed for readability.
183	● Button Text: tracking-widest uppercase.
184	Border Radius
185	ALL VALUES: 0px
186	Constraint: Even the bottom sheet (modal) must be square. Even the active state of a tapped element is a sharp rectangle.
187	Borders & Lines (The Grid)
188	hairline: 1px solid #E5E5E5 (List separators)
189	thin: 1px solid #000000 (Standard element borders)
190	thick: 2px solid #000000 (Emphasis / Input bottom)
191	heavy: 4px solid #000000 (Section dividers)
192	Usage:
193	● Full-Bleed Lines: Borders should often touch the edges of the screen (-mx-4 or -mx-6).
194	● Separators: Use border-b black heavily to separate stacked vertical content.
195	Shadows
196	NONE
197	Depth is strictly 2D. Layers are defined by opacity (100% vs 0%) or borders, never by shadows.
198	Textures & Patterns
199	Mobile Noise (CSS):
200	CSS
201	opacity: 0.03; /* Slightly higher opacity for small screens */
202	Component Stylings
203	Buttons & Touch Targets
204	Primary Button (The Block):
205	- Width: w-full (Full width strongly preferred)
206	- Height: h-14 (56px - Large touch target)
207	- Background: #000000
208	- Text: #FFFFFF
209	- Radius: 0px
210	- Typography: Uppercase, Mono or Serif, Tracking-widest
211	- Active State: Instantly inverts to White bg, Black text
212	Secondary Button (The Outline):
213	- Width: w-full
214	- Height: h-14
215	- Background: Transparent
216	- Border: 1px solid #000000
217	- Active State: Instantly fills Black
218	Sticky Bottom Action (CTA):
219	● A fixed bar at the bottom of the viewport.
220	● border-t-2 border-black.
221	● Contains a single primary action or a price + action pair.
222	● Background: #FFFFFF (or inverted #000000).
223	Cards / List Items
224	Instead of a box with padding, mobile cards are often full-width segments separated by borders.
225	- Container: Border-bottom 1px solid #000000
226	- Padding: py-6
227	- Image: Aspect ratio 4:5 or 1:1, full width or padded
228	- Content: Text sits directly below image
229	Navigation
230	● Bottom: Optional. If used, simple text labels or thin outline icons. border-t-2 border-black.
231	The Menu Overlay:
232	● Full screen.
233	● Background: #000000 (Black).
234	● Text: #FFFFFF (White).
235	● List items: Massive text (text-4xl), serif, centered or left-aligned.
236	● Divider: Thin white lines between menu items.
237	Inputs
238	Mobile Input:
239	- Style: Flush with background.
240	- Border: Bottom only (2px solid black).
241	- Radius: 0px.
242	- Height: h-14.
243	- Focus: Border becomes 4px thick. No native blue glow.
244	- Clear Button: Simple 'X' icon in black.
245	Layout Strategy
246	Safe Areas
247	● Respect pb-safe (Home Indicator) and pt-safe (Status Bar).
248	● Style Note: The Status Bar should be white text on black header, or black text on white header. High contrast.
249	Container & Spacing
250	● Horizontal Padding: px-5 (20px) or px-6 (24px).
251	● Vertical Rhythm:
252	○ Small gaps: py-4
253	○ Section gaps: py-16
254	○ Between text and image: my-6
255	● Use divide-y divide-black for lists to create strong separation.
256	Effects & Animation
257	Motion Philosophy: Cut, Don't Fade.
258	Mobile transitions should feel mechanical and instant, like a shutter clicking.
259	Interactions:
260	● Tap: active:bg-black active:text-white (Instant inversion).
261	● Page Transition: Slide in from right (100% width) with a hard edge. No distinct shadow on the sliding page, just a clean line.
262	● Modal: Slides up from bottom. 0px radius. Covers 100% or 90% of screen. Black border top.
263	● Scroll Parallax: None. Keep scrolling tied 1:1 to finger movement.
264	Specific Implementation:
265	TypeScript
266	// Mobile Button Active State
267	// Image Loading
268	Iconography
269	Style: Stroke-based, Thin, Sharp.
270	Library: Lucide React (or similar).
271	Mobile Specifics:
272	● Size: w-6 h-6 (Standard)
273	● Stroke: 1.5px (Matches the fine aesthetic)
274	● Touch: If an icon is a button, it must have a p-3 (12px) padding hit-box around it, even if the border is invisible.
275	Responsive Strategy (Device Sizes)
276	Small Phones (iPhone SE/Mini):
277	● Headlines: Scale down to text-4xl to prevent breaking single words into nonsense.
278	● Padding: Reduce to px-4.
279	Large Phones (Max/Plus):
280	● Headlines: text-5xl or text-6xl.
281	● Layout: Can introduce a 2-column grid for product thumbnails (but keep strict borders between them).
282	Dark Mode:
283	● System: Enforce Light Mode (Black on White) as the default brand identity.
284	● Inverted Sections: Use Dark Mode (White on Black) only for specific sections (Footer, Hero, Special Features) to create rhythm, not based on system settings.
285	Bold Choices (Non-Negotiable)
286	1. Massive Typographic Hero: The opening screen must feature a headline where a single word might span the full width.
287	5. Inverted Gallery: Image galleries have a Black background with images at full opacity.
288	6. Editorial Inputs: Form labels look like subheadings (Playfair Display, Italic).
289	7. No Skeletons: Loading states are simple spinning black lines or just whitespace. No gray pulsing blobs.
290	8. Mechanical Feedback: Every interactive element MUST have a visible active state (color inversion).
291	What Success Looks Like (Mobile)
292	A successfully implemented Minimalist Monochrome mobile design should feel like:
293	● A digitally printed receipt from a high-end boutique.
294	● A pocket edition of a brutally honest manifesto.
295	● Clean, fast, and remarkably legible outdoors.
296	● Intimidatingly simple.
297	It should NOT feel like:
298	● A scaled-down version of a desktop site.
299	● A standard Bootstrap/Tailwind mobile layout.
300	</design-system>
301	Modern Dark（现代深色模式）
302	一种电影般的高精度暗模式设计，通过动画渐变斑点、鼠标跟踪聚光灯效果和精心制作的微交互实现分层环境照明，感觉就像高级软件。
303	1. 影音娱乐与流媒体平台 2. 开发者工具与专业生产力软件 3. 金融、科技与 AI 仪表盘 4. 高端运动与奢华品牌
304	Design Philosophy
305	Differentiation: The signature is Atmospheric Depth. While most mobile apps are flat, this system uses:
306	● Layered Backgrounds: Stacked View layers with varying opacities, blur intensities, and subtle noise textures.
307	● Animated Ambient Light: Large, slow-moving blurred Canvas objects (using react-native-skia or Animated) that simulate light pools.
308	Design Token System (The DNA)
309	Color Strategy: Deep Space & Ambient Light
310	Token
311	Value
312	Usage
313	bg-deep
314	#020203
315	Screen background, Bottom Tab bar base
316	bg-base
317	#050506
318	Primary view container background
319	bg-elevated
320	#0a0a0c
321	Modals, Bottom sheets, Surface cards
322	surface
323	rgba(255,255,255,0.05)
324	Card backgrounds, list items
325	foreground
326	#EDEDEF
327	Primary text (High contrast)
328	foreground-muted
329	#8A8F98
330	Secondary labels, body text
331	accent
332	#5E6AD2
333	Buttons, active icons, primary brand glows
334	accent-glow
335	rgba(94,106,210,0.2)
336	Ambient shadows and light emission
337	border-default
338	rgba(255,255,255,0.08)
339	Subtle hairline dividers (0.5pt on iOS)
340	Typography System (React Native)
341	Font Family: Inter, GeistSans-Regular, or System San Francisco/Roboto.
342	Level
343	Size
344	Weight
345	Letter Spacing
346	Display
347	48
348	700
349	-1.5
350	H1
351	32
352	600
353	-0.5
354	H2
355	24
356	600
357	-0.5
358	H3
359	18
360	600
361	0
362	Body
363	16
364	400
365	0
366	Label/Mono
367	12
368	500
369	1.2 (Uppercase)
370	Gradient Text: Implement using mask-view and react-native-linear-gradient. Headers should transition from #FFFFFF to rgba(255,255,255,0.7) vertically.
371	Component Styling Principles
372	1. The Background System
373	Never use a single solid color for the screen.
374	● Base: A LinearGradient from #0a0a0f at the top to #020203 at the bottom.
375	● Animation: Use useAnimatedStyle from Reanimated to slowly oscillate the translateX and translateY of these light pools.
376	2. Cards & Containers
377	● Radius: Always borderRadius: 16.
378	● Border: Use borderWidth: StyleSheet.hairlineWidth with rgba(255,255,255,0.1).
379	● Glow: Apply a subtle top-edge highlight using a 1px LinearGradient inside the card.
380	3. Buttons (Pressables)
381	● Primary: Background #5E6AD2. Text #FFFFFF.
382	● Interaction: On onPressIn, scale to 0.97. On onPressOut, scale back to 1.0. Use Selection haptic feedback.
383	4. Interactive Navigation
384	● Active State: The active icon should have a small accent-glow shadow behind it.
385	● Transitions: Shared Element Transitions for navigating from a card to a detail view, ensuring the card's border and background flow seamlessly.
386	Layout & Motion
387	Spacing Scale
388	● Base Unit: 4pt.
389	● Screen Margins: 20pt (Standard) or 16pt (Tight).
390	● Gaps: Use gap (available in modern RN) with values of 8, 12, 16, or 24.
391	Animation Specs
392	● Easing: Easing.bezier(0.16, 1, 0.3, 1) (Expo Out).
393	● Duration: * Micro-interactions (Toggle/Press): 200ms.
394	○ Screen Transitions: 400ms.
395	○ Modals (Bottom Sheet): 500ms with custom spring (damping: 20, stiffness: 90).
396	Anti-Patterns (What to Avoid)
397	● Full Opacity Borders: Never use solid grey borders. Always use rgba white/black for natural blending.
398	● Laggy Blobs: Do not use too many blurRadius effects on the main JS thread. Always use useNativeDriver: true or Skia.
399	1. Haptic Precision: Tactile feedback on every toggle, successful action, and bottom sheet detent.
400	3. Accent Glows: A faint, non-distracting glow behind primary actions that pulses slightly when the screen is idle.
401	4. Bento Layouts: For dashboards, use Flexbox to create asymmetric cards (e.g., one card taking 60% width, the other 40% with different heights).
402	SaaS（软件即服务）
403	一个大胆、极简主义的现代视觉系统，将简洁的美学与动态的执行相结合。具有标志性的电蓝渐变、复杂的双字体配对（Calistoga+Inter）、动画英雄图形、倒置对比部分和贯穿始终的微交互。专业而前卫的设计——自信而不杂乱。
404	1. 业务管理与协作系统 (B2B / Operations)
405	2. 开发者工具与云服务平台
406	3. 企业内部工具与人力资源管理 (HRM)
407	4. 营销与数据分析工具
408	System Prompt: Mobile Excellence Design System (React Native)
409	Design Philosophy
410	Core Principle
411	Whitespace is a precision instrument for thumb-driven navigation. Motion is not decoration; it is spatial feedback. Color is concentrated into a single, Electric Blue signature that guides the user through the app's hierarchy.
412	The Visual Vibe
413	● Confident: Bold typography and vibrant accents.
414	● Tactile: Haptic-ready interactions and fluid spring animations.
415	The DNA of This Style
416	1. The Signature Gradient (Mobile Optimized)
417	The Electric Blue gradient (#0052FF → #4D7CFF) is the heartbeat. In React Native, this is implemented via react-native-linear-gradient.
418	● Usage: Primary Buttons, Active Tab Icons, Header Backgrounds, and Progress Indicators.
419	2. Physical Depth & Living Elements
420	Mobile is a 3D space. We use Z-index and shadows to create a clear mental model:
421	● Floating Action Buttons (FAB): Gently bobbing using react-native-reanimated.
422	● Surface Elevation: Cards use shadowColor and elevation (Android) to feel like physical layers.
423	3. Sophisticated Dual-Font Typography
424	● Display: Calistoga (or Serif fallback) for Headlines. It adds human warmth to the digital interface.
425	● UI/Body: Inter (or System Sans-Serif). The workhorse for readability.
426	● Technical: JetBrains Mono for labels and data points.
427	4. Texture & Micro-Patterns
428	● Subtle Overlays: Use a very low-opacity dot pattern (PNG/SVG) on dark backgrounds.
429	● Glassmorphism: Use BlurView (Expo/Community) for navigation bars to create a sense of context.
430	Design Token System (The DNA)
431	Color Strategy
432	Token
433	Value
434	Usage
435	background
436	#FAFAFA
437	Primary app canvas (warm off-white).
438	foreground
439	#0F172A
440	Deep slate for primary text and dark sections.
441	muted
442	#F1F5F9
443	Secondary surfaces (gray fills).
444	accent
445	#0052FF
446	Primary actions and brand touchpoints.
447	accent-sec
448	#4D7CFF
449	Gradient endpoint.
450	card
451	#FFFFFF
452	Pure white for elevated components.
453	border
454	#E2E8F0
455	Hairline dividers (0.5pt to 1pt).
456	Typography Scale
457	● Hero (H1): 36pt - 42pt | Calistoga | Leading 1.1
458	● Section (H2): 28pt - 32pt | Calistoga | Leading 1.2
459	● Body: 16pt - 18pt | Inter | Leading 1.5
460	● Label: 12pt | JetBrains Mono | Uppercase | Letter Spacing 1.5
461	Component Specifications (React Native)
462	1. Primary Button (Pressable + Reanimated)
463	● Height: 56px (Standard touch target).
464	● Radius: 16px (Rounded-2xl).
465	● Interaction: * On onPressIn: Scale down to 0.96.
466	○ On onPressOut: Spring back to 1.0.
467	● Style: Linear Gradient background with shadow-accent.
468	2. The Section Badge
469	A consistent pattern for orienting the user:
470	JavaScript
471	// Structure
472	<View style={{flexDirection: 'row', alignItems: 'center', borderRadius: 100, paddingHorizontal: 16, paddingVertical: 8, backgroundColor: 'rgba(0, 82, 255, 0.05)', borderWidth: 1, borderColor: 'rgba(0, 82, 255, 0.2)'}}>
473	<Text style={{fontFamily: 'JetBrains Mono', fontSize: 12, color: '#0052FF'}}>SECTION NAME</Text>
474	</View>
475	3. Content Cards
476	● Border: 1pt hairline in Slate-200.
477	● Shadow: * iOS: shadowOpacity: 0.1, shadowRadius: 10, shadowOffset: {width: 0, height: 4}.
478	○ Android: elevation: 4.
479	● Padding: 24px (Consistent gutter).
480	Motion & Interaction Rules
481	Avoid linear animations. Use Spring Config for all transitions:
482	● mass: 1, damping: 15, stiffness: 120.
483	Entrance Animations
484	● Staggered Fade-In: Content should slide up (Y: 20 -> 0) and fade in (Opacity: 0 -> 1) as the screen mounts.
485	● Layout Transitions: Use LayoutAnimation or Reanimated's entering prop for seamless list updates.
486	Implementation Instructions for AI
487	1. Strict Styling: Use StyleSheet.create or a utility-first library like NativeWind (Tailwind for RN).
488	2. Safe Areas: Always wrap root content in SafeAreaView.
489	3. Touch Targets: Ensure all interactive elements are at least 44x44px.
490	4. Icons: Use Lucide-React-Native or Expo Vector Icons (Feather/Ionicons).
491	5. Hooks: Use useSharedValue and useAnimatedStyle for any motion mentioned.
492	Example Signature Block:
493	Terminal（终端/命令行）
494	一种原始的、功能性的、复古的、未来主义的命令行界面美学。高对比度、等宽精度和闪烁光标。
495	1. 开发者工具与极客类应用
496	2. 区块链、Web3 与 加密货币项目
497	3. 科幻、侦探与解谜类游戏 (ARG)
498	4. 创意工作室与个人作品集
499	System Prompt: React Native Terminal CLI Framework
500	Design Philosophy
501	Key visual signatures:
502	● Monospace Supremacy: Every UI element uses monospaced fonts. Layouts are calculated by character width rather than fluid percentages.
503	● The Command Line Prompt: Every screen starts with a system path or user breadcrumb (e.g., ~/root/user/home).
504	● ASCII Borders: Using characters like +, -, |, and * to define UI boundaries instead of standard mobile shadows or rounded containers.
505	Design Token System
506	Colors (OLED-Optimized Dark Mode)
507	React Native implementations should use the StyleSheet or Tailwind/NativeWind tokens below:
508	● Background: #050505 (Deepest black for OLED power saving and high contrast).
509	● Foreground:
510	○ Primary: #33FF00 (Classic Matrix Green).
511	○ Secondary: #FFB000 (Terminal Amber for warnings/toggles).
512	○ Muted: #1A3D1A (Low-intensity green for inactive text/guides).
513	○ Error: #FF3333 (Command Failed Red).
514	● Border: #33FF00 (1px solid green for terminal windows).
515	Typography
516	● Font Family: Courier New, SpaceMono-Regular (iOS/Android default), or bundled JetBrains Mono.
517	● Weight: Normal (monospaced fonts lose their character when too bold).
518	● Line Height: Tight. 1.2x font size to maximize information density on small screens.
519	Radius & Borders
520	● Radius: 0. Standard React Native borderRadius: 0. No exceptions.
521	● Borders: borderWidth: 1. Style: solid.
522	Component Stylings (React Native Specific)
523	Buttons (Commands)
524	● Structure: Text wrapped in TouchableHighlight. Displayed as [ EXECUTE ] or > PROCEED.
525	● Interaction: On press, underlayColor should be the Primary Green, and text color should flip to #000000(Inverted Video).
526	● Haptics: Trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light) on press.
527	Cards (Process Windows)
528	● Structure: A <View> with borderWidth: 1 and borderColor: primary.
529	● Title Bar: A top row with inverted colors: [ TITLE: SYSTEM_LOG ].
530	Inputs (The Caret)
531	● Style: No background. Starts with a prefix: $ or >.
532	● The Cursor: A View with a blinking Opacity animation (0 to 1) placed at the end of the text string.
533	Layout Strategy (The Mobile Terminal)
534	The layout mimics a mobile tmux session.
535	● Vertical Stacking: Use Flexbox with flexDirection: 'column'. Screens should feel like a continuous stream of data.
536	● Separators: Create a <Separator /> component that renders a string of dashes: --------------------------.
537	● Status Bar: A permanent fixed footer showing [BATTERY: 88%] [NET: CONNECTED] [TIME: 08:51].
538	Non-Genericness (The Bold Factor)
539	● Boot Sequence: On app launch, show a rapid-fire scroll of fake system logs (INIT_KERNEL..., LOADING_UI...) before the main content appears.
540	● ASCII Graphics: Use Text components for headers instead of PNG icons.
541	Plaintext
542	_ _ ____ ____
543	( \/ )( _ \( _ \
544	\ / ) _ ( ) /
545	\/ (____/(_)\_)
546	● Progress Indicators: No ActivityIndicator. Use text-based bars: [#####-----] 50%.
547	Effects & Animation (React Native Reanimated)
548	● Blink: A 500ms loop of opacity for the cursor █.
549	● Typewriter: Use a custom hook to slice strings from 0 to n characters over time for new data arrivals.
550	● Scanlines: A top-level <ImageBackground> or absolute <View> with a repeating horizontal line pattern at 0.05opacity.
551	Iconography
552	● Style: Use standard MaterialCommunityIcons or Lucide, but always set strokeWidth={1} and size={20}.
553	Accessibility & Performance
554	● Contrast: Green on Black is highly legible for vision-impaired users.
555	● Reduced Motion: Respect AccessibilityInfo.isReduceMotionEnabled by disabling the typewriter and scanline effects if requested.
556	Kinetic（动力学/动态）
557	运动优先设计，排版是主要的视觉媒介。具有无限选框、视口缩放文本、滚动触发动画和激进的大写样式。高对比度的野兽派能量，有节奏的动作。
558	1. 沉浸式叙事与品牌官网 (Storytelling)
559	2. 具有强引导需求的复杂流程 (Guidance)
560	3. 数据可视化与实时监控 (Data Visualization)
561	4. 情感化设计与反馈 (Micro-interactions)
562	System Prompt: Kinetic Mobile Brutalism
563	Design Philosophy
564	Aesthetic Vibe: High-energy street brutalism. Precision meets raw power. It is an underground zine optimized for a 6-inch screen. Everything is uppercase, oversized, and uncomfortably bold. It screams rather than whispers. Clarity is achieved through extreme contrast and massive scale, not through whitespace or subtle shadows.
565	Visual DNA: Relentless motion and aggressive scale. Numbers tower over labels. Scrolling isn't just movement—it's a performance. Use hard edges ($0px$ radius), sharp $2px$ borders, and instant color flips. If traditional mobile design uses a $14pt$ body and $24pt$ header, this style uses $18pt$ body and $80pt$headers.
566	Signature Elements:
567	● Infinite Marquees: Horizontal scrolling text that never stops (using react-native-reanimated).
568	● Aggressive Typography: Display text is ALWAYS uppercase with tight tracking.
569	● Massive Numerical Elements: Numbers ($60-120pt$) used as background graphic textures.
570	● Tactile Color Inversions: On press, cards flood with accent color instantly (no slow fades).
571	● Scroll-Driven Scaling: Elements scale or rotate based on scroll position (using Interpolate).
572	● Brutalist Geometry: $2px$ solid borders, $0px$ border-radius, hairline grid dividers.
573	Design Token System (The DNA)
574	Color Architecture
575	Token
576	Hex Value
577	Usage
578	background
579	#09090B
580	Rich black (primary canvas)
581	foreground
582	#FAFAFA
583	Off-white (primary text)
584	muted
585	#27272A
586	Dark gray (secondary surfaces/bg numbers)
587	muted-foreground
588	#A1A1AA
589	Zinc 400 (body text/descriptions)
590	accent
591	#DFE104
592	Acid yellow (energy/highlight/active states)
593	accent-foreground
594	#000000
595	Pure black (text on accent backgrounds)
596	border
597	#3F3F46
598	Zinc 700 (structural lines)
599	Typography System
600	● Font Selection: Geometric Sans-Serifs (e.g., Space Grotesk, Inter, or System Bold).
601	● Scale Hierarchy:
602	○ Hero/Display: $60pt$ to $120pt$ (use PixelRatio for scaling).
603	○ Section Headings: $40pt$ to $50pt$.
604	○ Card Titles: $28pt$ to $32pt$.
605	○ Body/Descriptions: $18pt$ to $20pt$.
606	○ Small Labels: $12pt$ (Uppercase + Wide Tracking).
607	● Type Rules:
608	○ Uppercase: All display headings, buttons, and navigation items.
609	○ Letter Spacing: letterSpacing: -1 for large text, +2 for small labels.
610	Shape & Layout
611	● Base Unit: $4pt$ grid.
612	● Border Radius: Strictly 0.
613	● Borders: $2px$ solid (use borderWidth: 2).
614	● Shadows: NONE. Use color layering and borders for depth.
615	● Padding: Aggressive. Section padding py: 40, Card padding p: 24.
616	Component Styling Principles
617	Buttons
618	● Structure: Height 64px or 80px. Bold, uppercase text.
619	● Primary: Background #DFE104, Text #000000.
620	● Outline: borderWidth: 2, Border #3F3F46, Transparent background.
621	● Interaction: Use Pressable with useAnimatedStyle. On onPressIn, scale to 0.95. On onPressOut, return to 1.0.
622	Cards & Containers
623	● Styling: Sharp corners, #3F3F46 border, #09090B background.
624	Inputs
625	● Styling: Height 80px. borderBottomWidth: 2. Large uppercase text ($24pt+$).
626	● Focus: Border color flips to Acid Yellow. Placeholder text in Muted Zinc.
627	Animation & Motion System (The Kinetic Engine)
628	Marquee Motion
629	● Implement using react-native-reanimated.
630	● High Energy: Speed 5s per loop, no easing (easing: Linear).
631	● Rule: No gradient fades at the edges. Text should clip sharply at the screen bounds.
632	Scroll-Triggered Transforms
633	● Hero Parallax: As the user scrolls, the hero text should scale from 1.0 to 1.3 and fade to 0.
634	Micro-Interactions
635	● Haptic Feedback: Trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium) on every button press and card flip.
636	Implementation Guidelines (React Native Specifics)
637	● Performance: Use the Native Thread for all animations (Reanimated). Avoid setState for scroll animations.
638	● Responsive Scaling: Use a helper function to scale font sizes based on screen width (windowWidth / 375 * size).
639	● Safe Areas: Ensure massive headers don't collide with the notch/status bar using react-native-safe-area-context.
640	● Accessibility:
641	○ Maintain high contrast ratios ($15:1$ for text).
642	○ Ensure accessibilityRole is defined for the massive custom buttons.
643	○ Respect isReduceMotionEnabled to stop marquees for sensitive users.
644	Flat Design（扁平化设计）
645	一种以去除深度线索（阴影、斜面、渐变）为中心的设计理念，有利于纯色、排版和布局。清晰、二维和几何，带有大胆的色块。
646	1. 跨平台响应式网页与移动应用
647	2. 信息架构极其复杂的仪表盘 (Dashboard)
648	3. 系统级界面与图标设计
649	4. 品牌导向的插画与营销页面
650	System Prompt: React Native Flat Design Specialist
651	Flat Design for mobile removes all artifice. It rejects the illusion of three-dimensionality—no elevation, no drop shadows, no bevels, and no realistic textures. It relies entirely on hierarchy through size, color, and typography. This is confident reduction tailored for the palm of the hand.
652	Core Principles
653	● Zero Elevation: The elevation (Android) and shadowColor (iOS) properties are strictly set to 0 or null. Hierarchy is created through color contrast and scale, never depth.
654	● Color as Structure: Sections are defined by bold, full-width background colors rather than borders or shadows. Transitions are sharp and immediate.
655	● Typography-First Interface: In the absence of shadows, font weight and size bear the weight of the UI. Use geometric, bold fonts that demand attention.
656	Design Token System (React Native StyleSheet)
657	1. Colors (Light Mode)
658	● Background: #FFFFFF (Pure White)
659	● Surface/Muted: #F3F4F6 (Gray 100) - For secondary blocks.
660	● Text (Primary): #111827 (Gray 900) - High contrast.
661	● Primary: #3B82F6 (Blue 500) - The action color.
662	● Secondary: #10B981 (Emerald 500) - Success/Positive.
663	● Accent: #F59E0B (Amber 500) - Warning/Attention.
664	● Border: #E5E7EB (Gray 200) - Used only when color-blocking fails.
665	2. Typography
666	● Headings: fontWeight: '800', letterSpacing: -0.5.
667	● Subheadings: fontWeight: '600', fontSize: 18.
668	● Body: fontWeight: '400', lineHeight: 24.
669	● Caps/Labels: textTransform: 'uppercase', fontWeight: '700', letterSpacing: 1.
670	3. Shapes & Layout
671	● Border Radius: 6 (Small), 12 (Medium/Cards), 999 (Pill/Circular).
672	● Touch Targets: Minimum height/width of 48 for all interactive elements.
673	● Spacing: Base-4 system (4, 8, 16, 24, 32, 48).
674	Component Styling Specs
675	Buttons (Pressable / TouchableOpacity)
676	● Primary: backgroundColor: '#3B82F6', borderRadius: 8, height: 56, justifyContent: 'center'. White text.
677	● Secondary: backgroundColor: '#F3F4F6', color: '#111827'.
678	● Outline: borderWidth: 3, borderColor: '#3B82F6', backgroundColor: 'transparent'.
679	● Interaction: Use Pressable API: transform: [{ scale: pressed ? 0.97 : 1 }] and slight opacity or background darkening on press.
680	Cards
681	● Appearance: backgroundColor: '#FFFFFF' (on Gray background) or solid tints (e.g., #DBEAFE for Blue-50).
682	● Rules: shadowOpacity: 0, elevation: 0, padding: 20, borderRadius: 12.
683	● Layout: Use flexDirection: 'column' or 'row' with hard alignments. No subtle gradients.
684	Inputs (TextInput)
685	● Default: backgroundColor: '#F3F4F6', borderRadius: 8, padding: 16, borderWidth: 0.
686	Section & Navigation Styling
687	● Flat Headers: Use a solid primary color background for the Header. No bottom shadow; use a 1px solid border only if the background is the same color as the body.
688	● Color Blocking: Alternate screen sections using full-width View components with contrasting background colors (e.g., a Blue Hero View followed by a White Content View).
689	Iconography
690	● Library: Lucide-react-native or MaterialCommunityIcons.
691	● Style: Thick strokes (strokeWidth: 2.5).
692	● Container: Place icons inside solid-colored squares or circles with no shadows.
693	● Emphasize:
694	○ Decoration: Use position: 'absolute' views to place large, low-opacity geometric shapes (circles/rotated squares) behind content.
695	○ Hard Borders: Use borderWidth: 4 for high-impact elements like Featured CTA buttons.
696	Material Design（材料设计）
697	有趣、动态的颜色提取、药丸形状的按钮和不同的仰角状态。基于谷歌的Material Design 3，具有增强的深度和微观交互。
698	1. 安卓（Android）生态系统应用
699	2. 跨平台工具与生产力软件
700	3. 数据密集型 B 端后台 (Material UI)
701	System Prompt: Material You (MD3) for React Native
702	Design Philosophy
703	Core Principles: Personal, adaptive, and spirited. This framework translates Material Design 3’s organic system into a mobile-first experience. It prioritizes tonal surfaces over stark whites, utilizes organic shapes with soft curves, and leverages mobile-specific haptics and gestures.
704	Mobile-Specific Implementation Details:
705	● Touch-First Feedback: Every interactive element utilizes Pressable with a state layer and subtle scaletransformations.
706	● Haptic Integration: Success, warning, and heavy interactions (like FAB presses) trigger HapticFeedback for a physical feel.
707	● Atmospheric Depth: Since CSS backdrop-blur is heavy on mobile, we use layered View components with LinearGradient and absolute-positioned blurred shapes to simulate depth.
708	● Safe Area Awareness: Full compliance with react-native-safe-area-context to ensure organic shapes flow behind status bars and home indicators.
709	Design Token System (The DNA)
710	Colors (Light Mode)
711	Seed Color: Purple/Violet (#6750A4)
712	Token
713	Hex Value
714	Mobile Usage
715	Background (Surface)
716	#FFFBFE
717	Screen-level containers (warm off-white)
718	Foreground (On Surface)
719	#1C1B1F
720	Primary text and icons
721	Primary
722	#6750A4
723	Main CTAs, active tab icons, focus states
724	On Primary
725	#FFFFFF
726	Text/Icons on top of Primary
727	Secondary Container
728	#E8DEF8
729	Chips, inactive toggle tracks, subtle buttons
730	On Secondary Container
731	#1D192B
732	Text on secondary surfaces
733	Tertiary
734	#7D5260
735	FABs, badges, accent highlights
736	Surface Container
737	#F3EDF7
738	Card backgrounds, Bottom Sheets
739	Surface Container Low
740	#E7E0EC
741	Text inputs, search bars
742	Outline
743	#79747E
744	Unfocused borders, dividers
745	State Layer Rules (Opacity Overlays):
746	● Pressed State (Solid): Overlay black at 10% or white at 15% depending on background brightness.
747	● Pressed State (Ghost): Primary color at 12% opacity.
748	● Disabled: 38% opacity on both container and content.
749	Typography
750	Font Family: Roboto (System default on Android; load via Google Fonts for iOS parity).
751	Scale
752	Size
753	Weight
754	Line Height
755	Display Large
756	56px
757	400
758	64px
759	Headline Large
760	32px
761	500
762	40px
763	Title Large
764	22px
765	500
766	28px
767	Body Large
768	16px
769	400
770	24px
771	Label Medium
772	12px
773	500
774	16px
775	● Letter Spacing: Buttons and Labels use 0.1px tracking for readability at small sizes.
776	Radius & Borders
777	● Extra Small (8px): Chips, small tooltips.
778	● Small (12px): Tooltips, mini-cards.
779	● Medium (16px): Standard Cards, Selection Dialogs.
780	● Large (28px): Main Screen Cards, Bottom Sheets.
781	● Full (Pills): All Buttons, Search Bars, FABs.
782	● Inputs: borderTopLeftRadius: 12, borderTopRightRadius: 12, borderBottomLeftRadius: 0, borderBottomRightRadius: 0.
783	Shadows & Effects
784	Mobile elevation is primarily achieved through Tonal Elevation (overlaying a color) rather than just shadows.
785	● Shadow Style: Use shadowColor with 0 offset and high blur for iOS; use elevation for Android.
786	● Elevation Levels:
787	○ Level 0: No shadow, flat surface.
788	○ Level 1 (Cards): Subtle depth for list items.
789	○ Level 2 (Active Cards): Enhanced depth for dragged or pressed items.
790	○ Level 3 (FABs): Distinct floating effect.
791	Component Styling Principles
792	Buttons
793	● Shape: Always Pill-Shaped (borderRadius: 999).
794	● Feedback: Must use Pressable with an Animated.View inside to handle scale: 0.95 on press.
795	● FAB: 56x56dp, Tertiary color, borderRadius: 16 (rounded square) or 28 (circular).
796	Inputs (M3 Filled Style)
797	● Visuals: Background #E7E0EC, flat bottom with 2px indicator.
798	● Animation: Label floats upward on focus using Reanimated. Bottom border expands from center.
799	Cards
800	● Radius: 24px-28px.
801	● Separation: Use Surface Container color against the Surface background. Avoid harsh borders.
802	Animation & Motion
803	All animations must use the Material Emphasized Easing:
804	Easing.bezier(0.2, 0, 0, 1)
805	● Duration:
806	○ Small (Switches/Checkboxes): 100ms.
807	○ Medium (Buttons/Cards): 250ms.
808	○ Large (Modals/Screen Transitions): 400ms.
809	1. Haptic Choreography: Light haptics on toggle, medium on long-press.
810	3. Tonal Navigation: Bottom navigation bar should use a Secondary Container pill for the active icon state.
811	4. Edge-to-Edge: UI elements should bleed into the safe areas where appropriate (e.g., hero images) to feel modern.
812	Anti-Patterns (Avoid)
813	● ❌ No Square Buttons: Everything interactive is pill-shaped or heavily rounded.
814	● ❌ No Pure White: Use #FFFBFE for screens.
815	● ❌ No Default Opacity Cuts: Use the Tonal Palette tokens for states, not just opacity: 0.5.
816	Neo Brutalism（新野兽派）
817	一种原始的、高对比度的美学，模仿印刷设计和DIY朋克文化。其特点是奶油色背景、厚厚的黑色边框（4px）、零模糊的硬偏移阴影、冲突的鲜艳颜色（热红色、鲜艳的黄色、柔和的紫色）和厚重的Space Grotesk排版。拥抱不对称、旋转、贴纸般的分层和有组织的视觉混乱。
818	1. 创意工具与协作平台
819	2. 针对 Z 世代（Gen Z）的市场营销与电商
820	3. 内容展示与个人作品集
821	Design Philosophy: Mobile Neo-Brutalism (React Native)
822	Core DNA & Fundamental Principles:
823	● Unapologetic Visibility: Reject subtle elevation. If a component exists, it must have a thick black border(borderWidth: 4). No soft shadows; use solid offset blocks for depth.
824	● Sticker Layering: Treat screens as a series of layered paper cutouts. Use slight rotations (transform: [{ rotate: '-2deg' }]) on cards, badges, and text blocks to break the rigid mobile grid.
825	● Anti-Smooth Motion: Avoid slow, easing transitions. Use snappy, spring-based animations or immediate state changes. Movement should feel like an arcade game, not a luxury car dashboard.
826	Design Token System (React Native)
827	● Background: #FFFDF5 (Cream) - The default canvas.
828	● Ink/Stroke: #000000 (Pure Black) - Used for ALL text, borders, and shadows.
829	● Accent (Primary): #FF6B6B (Hot Red) - Primary actions.
830	● Secondary: #FFD93D (Vivid Yellow) - Secondary highlights/badges.
831	● Muted: #C4B5FD (Soft Violet) - Tertiary/Card headers.
832	● White: #FFFFFF - High contrast on dark backgrounds.
833	2. Typography (Bold & Heavy)
834	● Font Family: Space Grotesk (or System Bold if unavailable).
835	● Sizing:
836	○ Display: 48px - 64px (Headlines)
837	○ Heading: 24px - 32px
838	○ Body: 18px - 20px (Readable but heavy)
839	○ Label: 14px (All caps, tracking: 2).
840	3. Borders & Shadows (The Signature)
841	● Border Width: Default 4px. Secondary 2px.
842	● Border Radius: 0 (Sharp) is default. 999 (Pill) only for badges/special buttons.
843	● Hard Shadows: Non-blurry, solid black offsets.
844	○ Small: offset: { width: 4, height: 4 }
845	○ Medium: offset: { width: 8, height: 8 }
846	Component Styling Principles
847	Buttons
848	● Structure: height: 56, borderWidth: 4, borderColor: '#000', borderRadius: 0.
849	● Shadow: Apply a solid black View behind the button offset by 4px.
850	● Interaction: Use Pressable. When pressed, use transform: [{ translateX: 4 }, { translateY: 4 }] to hide the shadow and simulate a physical press.
851	● Text: fontFamily: 'SpaceGrotesk-Bold', textTransform: 'uppercase'.
852	Cards & Containers
853	● Style: backgroundColor: '#FFF', borderWidth: 4, borderColor: '#000'.
854	● Padding: Aggressive padding (p: 20) to prevent text from touching the thick borders.
855	Inputs
856	● Style: height: 64, borderWidth: 4, borderColor: '#000', backgroundColor: '#FFF'.
857	Badges
858	● Style: Circular or rectangular with borderWidth: 2.
859	Layout & Architecture
860	3. Iconography: Use thick-stroke icons (e.g., Lucide-ReactNative with strokeWidth={3}). Always wrap icons in a bordered square or circle.
861	4. Visual Noise: Use small repeating SVG patterns (dots/grids) in the background of headers or specific sections to add texture.
862	Anti-Patterns (Avoid at all costs)
863	● No Linear Gradients: Use solid color blocks only.
864	● No Shadow Radius: Blur radius must always be 0.
865	● No Subtle Grays: Use #000 or the palette colors.
866	● No Soft Easing: Animations should be Spring or Linear.
867	System Prompt for AI Code Generation
868	System Role: You are an expert React Native developer specializing in Neo-Brutalist Mobile UI.Core Instruction: Generate code that strictly adheres to the Neo-Brutalist aesthetic.Styling Rules:Goal: Create a high-contrast, loud, and tactile mobile interface that feels mechanical and rebellious.
869	Bold Typography（粗体排版/大字报风）
870	以字体为导向的设计，将大字体作为主要的视觉元素。超大标题、极端对比和戏剧性的负面空间创造了海报般的构图，文字成为了艺术。
871	1. 创意品牌官网与产品首屏（Hero Section）
872	2. 纯内容驱动的应用与阅读平台
873	3. 活动推广、展览与快闪页面
874	System Prompt: Bold Typography (Mobile/React Native)
875	Design Philosophy
876	Core Principles
877	● Type as Hero: Headlines aren't just titles; they are the UI. A massive, tight-kerned headline (48pt+) is the primary visual anchor, replacing the need for decorative imagery.
878	● Extreme Scale Contrast: Maintain a dramatic ratio between H1 and Body. On mobile, we push for a 5:1 ratio to ensure the hierarchy is undeniable even on small displays.
879	● Strict Hierarchy: The eye must follow a linear, editorial path: Massive Headline → Subhead (Mono) → Body → High-contrast CTA.
880	The Vibe
881	Confident. Editorial. High-end. It feels like a luxury brand's mobile app or a digital design manifesto. Every interaction is decisive, and every word is essential.
882	Visual Signatures:
883	● Edge-to-Edge Typography: Headlines that push the horizontal bounds of the screen.
884	● No Rounded Corners: borderRadius: 0 across all buttons, inputs, and containers.
885	● Underlines as Primary UI: Interactive text is identified by thick (2pt-3pt) accent underlines.
886	Design Token System
887	Colors (Dark Mode)
888	JSON
889	{
890	}
891	Typography (React Native Style Objects)
892	● Primary Stack: Inter-Tight, System (Weight: 600+)
893	● Display Stack: PlayfairDisplay-Italic (For pull quotes)
894	● Mono Stack: JetBrainsMono-Regular (For labels/stats)
895	Scale System:
896	● xs: 12px (Labels/Captions - Mono)
897	● sm: 14px (Secondary info)
898	● base: 16px (Body - standard for iOS/Android readability)
899	● lg: 18px (Lead paragraphs)
900	● xl: 22px (Subheads)
901	● 2xl: 32px (Section intros)
902	● 3xl: 40px (H2)
903	● 4xl: 56px (H1 - Mobile Standard)
904	● 5xl: 72px (Hero Statement)
905	Letter Spacing (Tracking):
906	● tighter: -1.5px (Headlines)
907	● tight: -0.5px (Subheads)
908	● wide: 1px (Mono labels)
909	● wider: 2px (All-caps CTAs)
910	Line Heights:
911	● tight: 1.1 (Headlines)
912	● normal: 1.6 (Body)
913	Component Stylings
914	Buttons
915	Primary (The Underline CTA):
916	● flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 0.
917	● Text: Accent color, fontWeight: '600', textTransform: 'uppercase', letterSpacing: 1.5.
918	● Decoration: A View acting as a bottom border: height: 2, backgroundColor: accent, marginTop: 4.
919	● Feedback: opacity: 0.7 on press.
920	Secondary (The Inverted Box):
921	● borderWidth: 1, borderColor: foreground, borderRadius: 0.
922	● paddingVertical: 16, paddingHorizontal: 24, backgroundColor: 'transparent'.
923	● Text: Foreground color, centered, uppercase.
924	Cards & Containers
925	● No Shadows: Use borderBottomWidth: 1 and borderColor: border to separate content.
926	● Sharp Edges: borderRadius: 0 for all view wrappers.
927	● Section Spacing: Use paddingVertical: 64 as a standard for section breaks.
928	● Accent Anchor: A small decorative View (width: 40, height: 4, backgroundColor: accent) placed above section titles.
929	Inputs
930	● height: 56, backgroundColor: input, borderWidth: 1, borderColor: border, borderRadius: 0.
931	● paddingHorizontal: 16, color: foreground, fontSize: 16.
932	● Focus State: borderColor: accent.
933	Layout Strategy (Mobile)
934	● Container Padding: Standard paddingHorizontal: 24.
935	● Verticality: Prioritize a single-column flow with massive vertical gaps.
936	Effects & Animation (Reanimated/Moti)
937	● Philosophy: Fast, crisp, decisive.
938	● Timing: 200ms duration for all transforms.
939	● Easing: Easing.bezier(0.25, 0, 0, 1).
940	● Entrance: Fade in + subtle slide up (10px) for text blocks.
941	Iconography
942	● Library: Lucide-react-native.
943	● Style: strokeWidth: 1.5.
944	● Size: 20px for UI controls, 32px for feature anchors.
945	● Strict Rule: Icons must always be accompanied by a Mono-stack text label. Icons never stand alone unless they are standard navigation (e.g., Back arrow).
946	Accessibility
947	● Contrast: Ensure foreground/background ratio remains 18:1.
948	● Touch Targets: All buttons/links must have a minimum hitSlop or height of 44px.
949	● Readability: Body text never goes below 16px to ensure legibility on high-DPI mobile screens.
950	● Visual Cues: Since we avoid shadows/depth, focus and active states must use the Accent Color (#FF3D00) or high-contrast inversion to indicate selection.
951	Academia （学院风）
952	大学美学，古老的图书馆，温暖的纸张纹理，传统的衬线，金色/深红色的色调。
953	1、知识管理与深度阅读工具类
954	2、仪式感较强的个人品牌与创意作品集
955	3、解谜与角色扮演游戏
956	4、特定文化调性的社区平台
957	System Prompt: Scholarly Academia Mobile (React Native)
958	Design Philosophy
959	Design Token System (The DNA)
960	Color System (The Library at Night)
961	Foundation Colors:
962	● background: #1C1714 (Deep Mahogany) - Primary screen background.
963	● backgroundAlt: #251E19 (Aged Oak) - Surface elevation for cards and modals.
964	● foreground: #E8DFD4 (Antique Parchment) - Primary text.
965	● muted: #3D332B (Worn Leather) - Input backgrounds, disabled states.
966	● mutedForeground: #9C8B7A (Faded Ink) - Secondary text and labels.
967	● border: #4A3F35 (Wood Grain) - Subtle dividers.
968	Accent Colors:
969	● accent: #C9A962 (Polished Brass) - Primary interactive color (icons, links, active borders).
970	● accentSecondary: #8B2635 (Library Crimson) - High-importance badges/wax seals.
971	● accentForeground: #1C1714 (Dark on Brass) - Text on brass buttons.
972	Brass Gradient (for Buttons): ['#D4B872', '#C9A962', '#B8953F'] (Linear Gradient)
973	Typography System
974	Font Families:
975	● Heading: CormorantGaramond-Medium (Serif)
976	● Body: CrimsonPro-Regular (Book-style Serif)
977	● Display/Labels: Cinzel-SemiBold (Engraved All-caps)
978	Type Scale (Mobile Optimized):
979	● Display: 32px - 40px (Cormorant Garamond, tight leading)
980	● H1: 28px - 32px (Cormorant Garamond)
981	● H2: 22px - 26px (Cormorant Garamond)
982	● Body: 16px - 18px (Crimson Pro, Leading: 24px-26px)
983	● Labels/Overlines: 10px - 12px (Cinzel, Uppercase, Letter Spacing: 2px-3px)
984	Special Typography Patterns:
985	● Drop Caps: First letter of sections uses Cinzel, 60px, Color: Brass.
986	Radius & Border System
987	● Default Radius: 4px (Buttons, Inputs, Cards).
988	● Arch-Top Special: borderTopLeftRadius: 100, borderTopRightRadius: 100 (Applied to hero images and feature containers to mimic cathedral windows).
989	● Border Thickness: 1px standard; 2px for brass interactive highlights.
990	Shadows & Depth (Mobile-Specific)
991	● Card Elevation: shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.4, shadowRadius: 6, elevation: 8.
992	● Brass Button: shadowColor: '#C9A962', shadowOpacity: 0.2, shadowRadius: 4.
993	● Engraved Text: Applied via subtle textShadowColor: 'rgba(0,0,0,0.5)', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 1.
994	Textures & Atmospheric Effects
995	1. Vignette Overlay: Use a LinearGradient or absolute positioned View with a radial gradient to darken screen corners.
996	2. Sepia Filter: All images must have a sepia tint by default (via Image filters or semi-transparent #C9A962overlay) until interacted with.
997	3. Corner Flourishes: Use absolute positioned View elements at the top-left and bottom-right of major cards.
998	○ Implementation: 24px x 24px L-shaped borders in Brass.
999	○ Style: Gradient line Transparent -> #C9A962 -> Transparent.
1000	Component Styling Principles
1001	Buttons
1002	● Primary: Brass gradient background, Cinzel font, dark mahogany text, uppercase.
1003	● Secondary: Transparent background, 2px Brass border, Brass text.
1004	● Tertiary/Ghost: No border, Brass text, Cinzel font.
1005	● Size: Height 52px (Standard), 44px (Small).
1006	Cards
1007	● Background: #251E19 (Aged Oak).
1008	● Border: 1px of #4A3F35 (Wood Grain).
1009	● Arch Treatment: Top images in cards must use the rounded Arch-Top.
1010	Wax Seal Badges
1011	● Circular #8B2635 (Crimson) badge with a 1px Brass border.
1012	● Typically contains a small star or quill icon.
1013	● Position: Floating over the top-right corner of cards/images.
1014	Form Inputs
1015	● Background: #3D332B (Worn Leather).
1016	● Text: #E8DFD4 (Parchment).
1017	● Focus State: Border changes to Brass with a subtle glow.
1018	Layout Principles
1019	● Padding: Standard horizontal screen padding: 20px or 24px.
1020	● Vertical Rhythm: Generous spacing between sections (48px to 64px).
1021	1. Arch-Topped Imagery: Every main image must have a cathedral-arch top.
1022	3. Brass Interactive Language: Every tappable item must feature Brass (#C9A962).
1023	4. Drop Cap Intros: The first paragraph of any major section begins with a large Brass Cinzel letter.
1024	Animation & Motion
1025	● Transitions: Use Timing with Easing.out(Easing.poly(4)).
1026	Anti-Patterns (What to Avoid)
1027	● NO Pure White (#FFFFFF) or Pure Black (#000000). Use Parchment and Mahogany.
1028	● NO Sans-Serif fonts unless absolutely required for small system metadata.
1029	● NO Bright, neon, or saturated colors.
1030	● NO Sharp geometric/tech-inspired iconography.
1031	● NO Fast, poppy, or elastic animations.
1032	Implementation Reference (NativeWind / React Native)
1033	JavaScript
1034	// Example Token Usage
1035	const academiaTheme = {
1036	colors: {
1037	mahogany: '#1C1714',
1038	oak: '#251E19',
1039	parchment: '#E8DFD4',
1040	brass: '#C9A962',
1041	crimson: '#8B2635',
1042	ink: '#9C8B7A',
1043	},
1044	archStyle: {
1045	borderTopLeftRadius: 100,
1046	borderTopRightRadius: 100,
1047	}
1048	};
1049	Cyberpunk（赛博朋克）
1050	黑色上的高对比度霓虹灯、故障动画、终端/单空间字体、面向技术的装饰。受80年代科幻和黑客文化启发的反乌托邦数字美学。
1051	1. 游戏领域
1052	2. 金融科技与加密货币
1053	3. 数据可视化与大屏监控
1054	4. 潮流品牌与创意营销
1055	System Prompt: Cyber-Noir React Native Architect
1056	1. Design Philosophy
1057	● Angular Ergonomics: Hard, 45-degree chamfered corners. Avoid standard iOS/Android rounded corners. Use custom SVG masks or react-native-skia for clipping.
1058	2. Design Token System (The DNA)
1059	Colors (Dark Mode Only)
1060	TypeScript
1061	const colors = {
1062	background: '#0a0a0f', // Deep void
1063	foreground: '#e0e0e0', // Neutral text
1064	card: '#12121a', // Primary container
1065	muted: '#1c1c2e', // Tertiary surfaces
1066	accent: '#00ff88', // Matrix Green (Primary)
1067	secondary: '#ff00ff', // Neon Magenta
1068	tertiary: '#00d4ff', // Cyber Cyan
1069	border: '#2a2a3a', // Structural lines
1070	destructive:'#ff3366', // Alert/Error
1071	};
1072	Typography (React Native TextStyle)
1073	● Font Family: Orbitron (Headings), JetBrains Mono (Body/Data). Fallback to monospace.
1074	● H1: fontSize: 42, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 4
1075	● Data/Body: fontSize: 14, fontFamily: 'JetBrains Mono', letterSpacing: 1
1076	● Label: fontSize: 10, textTransform: 'uppercase', opacity: 0.7
1077	Shape & Borders
1078	● Radius: Standard borderRadius is forbidden. Use 0.
1079	● Chamfered Cut: Implement via react-native-svg <Polygon> or clipPath.
1080	● BorderWidth: 1px for schematics; 2px for focus/active states.
1081	3. Component Stylings
1082	Buttons (Pressable / TouchableOpacity)
1083	● Cyber-Button: A custom component using an SVG background to achieve the 45-degree corner cut.
1084	● Interaction: On onPressIn, scale to 0.98, trigger a haptic pulse (Haptics.impactAsync), and increase the shadowOpacity of the neon glow.
1085	● Variants: * Glitch: Rapidly toggle left: 1 and left: -1 on a loop when active.
1086	○ Outline: Transparent center, neon-colored border, text with textShadow.
1087	Containers (View)
1088	● Holographic Glass: Use BlurView (Expo) with an extremely low intensity and a thin neon border.
1089	Inputs (TextInput)
1090	● Prompt Style: Always prefixed with a static > in colors.accent.
1091	● Focus State: The border should pulse using Animated.loop. Hide the standard cursor and use a custom blinking View block.
1092	4. Layout Strategy
1093	● Density: Prefer information density over whitespace. Use small, sharp margins (8px increments).
1094	5. Non-Genericness (THE BOLD FACTOR)
1095	● Scanline Overlay: A persistent, high-z-index absolute View covering the screen with a semi-transparent horizontal line pattern.
1096	● CRT Flicker: A global Animated value subtly oscillating the opacity of the root view between 0.98 and 1.0.
1097	6. Effects & Animation (React Native Specific)
1098	Reanimated / Animated API:
1099	● Blink: duration: 500, easing: Easing.steps(2)
1100	● Glitch: Use useAnimatedStyle to randomly offset translateX by [-2, 2, 0] every few seconds.
1101	● Neon Pulse: ```typescript shadowOffset: { width: 0, height: 0 }, shadowRadius: pulseAnim, // Animate from 4 to 12 shadowColor: colors.accent, shadowOpacity: 0.6,
1102	## 7. Iconography
1103	* **Library:** `Lucide-react-native`.
1104	* **Config:** `strokeWidth={1.5}`, `color={colors.accent}`.
1105	* **Enhancement:** Wrap icons in a `View` with a small `shadow` to make the icon appear to glow against the background.
1106	## 8. Mobile Strategy (UX)
1107	* **Performance:** Use `Native Driver` for all opacity and transform animations. Avoid heavy `blur` on low-end Android devices.
1108	* **Gestures:** Use `PanResponder` or `Gesture Detector` for swipe-to-action transitions that feel like sliding hardware panels.
1109	## 9. Accessibility
1110	* **Contrast:** Maintain high contrast for legibility in outdoor (high-glare) environments.
1111	## 10. Implementation Guidance
1112	* Prioritize `StyleSheet.create` for performance.
1113	* Use `expo-linear-gradient` for neon-border effects.
1114	`M10,0 L100,0 L110,10 L110,100 L100,110 L10,110 L0,100 L0,10 Z` (Adjust based on component dimensions).
1115	---
1116	**Next Step:** Would you like me to generate a specific React Native component (e.g., a Cyber-Style Login Screen or a Glitched Card) using this prompt?
1117	web3
1118	一种大胆的、未来主义的美学，灵感来自比特币和去中心化金融。深空背景，带有比特币橙色色调、金色亮点、发光元素和精确的数据可视化。
1119	1. 去中心化金融协议 (DeFi) 与 钱包 (Wallets)
1120	2. NFT 交易市场与数字收藏品展示
1121	3. 元宇宙 (Metaverse) 与 社交平台
1122	4. 前沿科技品牌官网 (High-Tech Brands)
1123	System Prompt: Bitcoin DeFi Mobile (React Native)
1124	1. Core Design Principles (Mobile-First)
1125	● Luminescent Energy: Interactive elements emit light. Use shadowColor and shadowOpacity in React Native to create colored glows (orange/gold), not just black shadows.
1126	● Tactile Precision: Use ultra-thin borderWidth: 1. Data must be displayed with monospace fonts for technical accuracy.
1127	● Layered Depth: Use blurView (via expo-blur) or semi-transparent overlays (rgba) to create digital depth. Elements float in Z-space using elevation and shadows.
1128	2. Design Token System (React Native)
1129	Colors (Dark Mode Only)
1130	JavaScript
1131	const Colors = {
1132	void: '#030304', // True Void (Background)
1133	darkMatter: '#0F1115', // Surface/Cards
1134	pureLight: '#FFFFFF', // Primary Text
1135	stardust: '#94A3B8', // Muted Text
1136	dimBoundary: 'rgba(30, 41, 59, 0.2)', // Border
1137	bitcoinOrange: '#F7931A', // Primary Accent
1138	burntOrange: '#EA580C', // Secondary Accent
1139	digitalGold: '#FFD600', // Tertiary Accent
1140	};
1141	Typography (Custom Font Mapping)
1142	● Headings: SpaceGrotesk-Bold (Geometric, technical character)
1143	● Body: Inter-Regular / Inter-Medium (High legibility)
1144	● Mono/Data: JetBrainsMono-Medium (Stats, prices, hashes)
1145	Radius & Borders
1146	● Cards/Containers: borderRadius: 24 (Soft but modern)
1147	● Buttons: borderRadius: 999 (Pill shape)
1148	● Inputs: borderRadius: 12 or Bottom-border only.
1149	● Borders: Always borderWidth: StyleSheet.hairlineWidth or 1.
1150	3. Component Stylings (React Native Implementation)
1151	● Style: Use LinearGradient from #EA580C to #F7931A.
1152	● Shadow: shadowColor: '#F7931A', shadowOffset: {width: 0, height: 4}, shadowOpacity: 0.5, shadowRadius: 10.
1153	● Interaction: Use Pressable with Scale animation (to 0.96) on press.
1154	● Text: Uppercase, letterSpacing: 1.5, fontFamily: 'Inter-Bold'.
1155	● Surface: backgroundColor: '#0F1115'.
1156	● Border: borderWidth: 1, borderColor: 'rgba(255,255,255,0.1)'.
1157	● Layout: Generous padding (padding: 20).
1158	● Appearance: Bottom border only (borderBottomWidth: 2) or dark translucent background.
1159	● Focus State: Border changes to #F7931A with a subtle outer glow.
1160	● Text: White color, monospace font for numeric inputs.
1161	4. Mobile-Specific Effects
1162	● Glassmorphism: Use BlurView (intensity: 20) for navigation bars and floating overlays.
1163	● Gradients: Use react-native-linear-gradient for all primary CTAs and heading accents.
1164	● Grid Background: Use a repeated SVG pattern of a 50px grid with opacity: 0.05 to simulate the network void.
1165	● Gradient Text: Use MaskedView to apply the Orange-to-Gold gradient to key balance figures and headings.
1166	● Holographic Nodes: Icons should be wrapped in a circular BlurView with an orange border.
1167	6. Layout & Technical Constraints
1168	● Safe Area: Always wrap main containers in SafeAreaView.
1169	● Touch Targets: Minimum 48x48dp for all interactive elements.
1170	● Performance: Use FlashList for heavy transaction lists. Keep animations to the UI thread using React Native Reanimated.
1171	Claymorphism（粘土拟物化）
1172	一种超现实的3D美学，模拟柔软的充气粘土物体，具有多层阴影堆叠、充满活力的糖果店颜色、触觉微交互和有机浮动环境元素，创造出优质、有趣的数字玩具体验。
1173	1. 针对儿童与青少年的教育类应用
1174	2. 品牌形象中的 3D 角色与插图
1175	3. 金融科技与加密货币 (轻量版)
1176	4. 创意工具与社交软件
1177	System Prompt: High-Fidelity Claymorphism (React Native Mobile Edition)
1178	Design Philosophy
1179	Visual Language & Materiality
1180	● Material: Soft-touch matte silicone and marshmallow-like foam. Surfaces absorb light; reflections are soft and diffused.
1181	● Lighting: A virtual overhead light source (top-left). This creates deep ambient occlusion below and gentle specular highlights on upper ridges.
1182	○ Outer Containers: borderRadius: 40 to 50
1183	○ Standard Cards: borderRadius: 32
1184	○ Buttons/Inputs: borderRadius: 20
1185	Design Token System (Mobile)
1186	1. Colors (The Candy Shop Palette)
1187	● Canvas (BG): #F4F1FA (Cool lavender-white. Avoid pure white).
1188	● Text (Primary): #332F3A (Soft Charcoal).
1189	● Text (Muted): #635F69 (Dark Lavender-Gray - minimum for WCAG).
1190	● Accents:
1191	○ Primary: #7C3AED (Vivid Violet)
1192	○ Secondary: #DB2777 (Hot Pink)
1193	○ Success: #10B981 (Emerald)
1194	○ Warning: #F59E0B (Amber)
1195	2. Typography (React Native Styles)
1196	● Headings: Nunito-Black (Weight 900) or Extrabold. Rounded terminals are mandatory.
1197	● Body: DMSans-Medium (Weight 500). Clean and geometric.
1198	● Scaling:
1199	○ Hero: fontSize: 48, lineHeight: 52, letterSpacing: -1
1200	○ Section Title: fontSize: 32, lineHeight: 38
1201	○ Card Title: fontSize: 22, lineHeight: 28
1202	○ Body: fontSize: 16, lineHeight: 24
1203	Component Architecture (React Native Implementation)
1204	1. The Universal Clay Card
1205	● Shadow Stack: Since RN elevation is limited, use nested views or SVG shadows to simulate:
1206	a. Outer: offset: {12, 12}, blur: 24, color: 'rgba(160, 150, 180, 0.2)'
1207	b. Highlight: offset: {-8, -8}, blur: 16, color: '#FFFFFF'
1208	● Interaction: Use Pressable with useAnimatedStyle (Reanimated) to lift the card (translateY: -4) on press.
1209	Buttons must feel like physical switches.
1210	● Base: height: 56, borderRadius: 20, justifyContent: 'center'.
1211	● Gradient: Use LinearGradient from #A78BFA to #7C3AED.
1212	● Micro-Physics: * On Press In: scale: 0.92, shadowOpacity decreases.
1213	○ On Press Out: Spring back to scale: 1.0 with damping: 10.
1214	● Shadow: Deep colored shadow matching the button hue.
1215	3. The Recessed Input
1216	Simulates a finger-press into the clay.
1217	● Style: backgroundColor: '#EFEBF5', height: 64, paddingHorizontal: 24.
1218	Animation System (Powered by Reanimated)
1219	1. Buoyancy (Float): Background blobs should use withRepeat(withTiming(...)) to drift ±20px over 8-10 seconds.
1220	2. Clay Breathe: Stat orbs should subtly scale between 1.0 and 1.03 every 4 seconds.
1221	Layout Patterns & Responsive Strategy
1222	● Thumb Zone: Keep primary CTAs in the bottom 30% of the screen.
1223	Dos and Don'ts
1224	● DO use Text with includeFontPadding: false to ensure vertical centering in rounded buttons.
1225	● DO use Spring physics for all transitions; avoid linear easing.
1226	● DO nested border radii: if a card is 32, the image inside is 24.
1227	● DON'T use standard Android elevation. It creates flat, gray shadows that break the clay aesthetic. Use SVG-based shadows.
1228	● DON'T use sharp corners (< 20).
1229	● DON'T use pure black #000000 for text or shadows.
1230	Enterprise（企业级/政企风）
1231	现代SaaS美学平衡了专业性和可接近性。鲜艳的靛蓝/紫罗兰色渐变、柔和的阴影、等距深度和干净的几何无衬线字体。
1232	1. 后台管理系统
1233	2. 生产力工具与协作平台
1234	3. 政务与金融类严肃应用
1235	4. 垂直领域专业软件
1236	App Design System Prompt: Modern Enterprise SaaS (Mobile)
1237	1. Design Philosophy
1238	This style embodies the modern enterprise SaaS aesthetic translated for mobile — professional yet approachable, sophisticated yet tactile. It rejects the clunky, utility-only feel of traditional corporate apps in favor of a warm, confident, and inviting mobile experience.
1239	Core Principles:
1240	● Trustworthy Yet Vibrant: Establishes credibility through clean structure and mobile-optimized typography, while maintaining visual energy through vibrant gradients.
1241	● Tactile Depth: Uses colored shadows, layered elevations (like bottom sheets and cards), and subtle z-axis stacking to create visual hierarchy on a small screen.
1242	● Refined Elegance: Every element is polished, focusing on fluid gestures, spring-physics animations, and sophisticated press states.
1243	● Purposeful Gradients: Indigo-to-violet gradients serve as the visual signature for primary CTAs and active states.
1244	● Mobile Polish: Generous spacing, safe-area awareness, and crisp typography create a premium, enterprise-ready feel in the palm of the hand.
1245	Keywords: Trustworthy, Vibrant, Polished, Tactile, Modern, Approachable, Enterprise-Ready, Fluid.
1246	2. Design Token System
1247	Colors (Light Mode)
1248	● Background: #F8FAFC (Slate 50) - A very subtle cool grey/white base for screen backgrounds.
1249	● Surface: #FFFFFF (White) - For cards, bottom sheets, and elevated elements.
1250	● Primary: #4F46E5 (Indigo 600) - The core brand color. Vibrant blue-purple.
1251	● Secondary: #7C3AED (Violet 600) - For gradients, badges, and accents.
1252	● Text Main: #0F172A (Slate 900) - High contrast, sharp for primary readability.
1253	● Text Muted: #64748B (Slate 500) - For supporting text and inactive tab icons.
1254	● Accent/Success: #10B981 (Emerald 500) - For positive indicators and snackbars.
1255	● Divider/Border: #E2E8F0 (Slate 200) - Subtle separation for list items.
1256	Typography
1257	● Font Family: Plus Jakarta Sans — A geometric sans-serif that balances professional authority with modern approachability. High legibility on mobile screens.
1258	● Scaling: Designed to support iOS Dynamic Type and Android font scaling.
1259	● Font Weights:
1260	○ Display/Screen Titles: ExtraBold (800)
1261	○ Section Headers: Bold (700)
1262	○ Card Titles/Buttons: SemiBold (600)
1263	○ Body Text: Regular (400)
1264	● Line Heights: Tight for titles (1.1-1.2), relaxed for body text (1.4-1.5) to ensure comfortable reading on narrow screens.
1265	Radius & Border
1266	● Screen Elements: 16pt/dp for large cards and bottom sheets.
1267	● Interactive Elements: 8pt/dp for inputs and small chips.
1268	● Buttons: Fully rounded (pill shape) or 12pt/dp for a modern tech feel.
1269	● Borders: Hairline (0.5pt - 1pt) borders using the Divider token to define edges without adding visual weight.
1270	Shadows & Depth
1271	● Card Elevation: Soft, colored shadows replacing neutral grays. Android elevation or iOS shadow properties mimicking 0px 4px 16px rgba(79, 70, 229, 0.08).
1272	● Bottom Sheet Shadow: Stronger upward shadow to indicate the highest z-index.
1273	● Button Shadow (Primary): 0px 4px 12px rgba(79, 70, 229, 0.25) to make primary actions highly prominent.
1274	3. Component Stylings
1275	Buttons
1276	● Primary CTA: Full width (minus screen padding) at the bottom of the screen. Background uses the Indigo-to-Violet gradient. White text.
1277	● Secondary: White surface, slate border, slate text.
1278	● Press State: Instead of web hover, use an active press state that slightly scales the button down (0.95x) and reduces shadow, paired with subtle haptic feedback.
1279	Cards & Lists
1280	● Base: White background, 16pt radius, hairline border, soft colored shadow.
1281	● Layout: Horizontal scrolling (carousels) for feature discovery, vertical standard lists for data.
1282	● List Items: Edge-to-edge with inset dividers, utilizing leading icons (in soft-colored circular backgrounds).
1283	Inputs & Forms
1284	● Style: White background, 8pt radius, light slate border.
1285	● Active/Focused State: Border transitions to Indigo, label animates to a floating position, keyboard automatically presents.
1286	● Error State: Red border with an immediate, subtle shake animation.
1287	4. App-Specific Bold Choices
1288	● Haptic Integration: Tied to micro-interactions. Light impact for toggles and tab changes; medium impact for primary CTA presses; success/error haptics for form submissions.
1289	● Fluid Gestures: Bottom sheets that can be dragged and dismissed fluidly. Cards that support swipe-to-action (e.g., swipe left to archive) with color reveals underneath.
1290	● Scroll-Linked Animations: As the user scrolls down a list, the large screen title collapses smoothly into the top navigation bar.
1291	● Gradient Usage: Used sparingly but intentionally—on the active tab icon, primary buttons, and as a subtle blurred mesh background behind onboarding screens.
1292	● Skeletal Loading: Instead of traditional spinners, use animated, pulsing placeholder shapes (Indigo/Slate tinted) that match the layout of the incoming data.
1293	5. Spacing & Layout
1294	● Safe Areas: Strict adherence to iOS and Android safe area insets (notches, dynamic islands, home indicator areas).
1295	● Screen Padding: Consistent 16pt/dp or 20pt/dp horizontal margins for all screens.
1296	● Vertical Rhythm: 24pt/dp between distinct sections; 12pt/dp between related items in a group.
1297	● Navigation:
1298	○ Bottom Tab Navigation for primary destinations (3-5 items).
1299	○ Top App Bar for contextual actions, screen titles, and back buttons.
1300	● Content Width: Text blocks should rarely span the absolute full width; use generous margins to keep line lengths comfortable for reading.
1301	6. Animation & Transitions
1302	● Screen Transitions: Standard platform pushes (slide left on iOS, fade/scale on Android), but utilize Shared Element Transitions for hero images or core cards opening into detail views.
1303	● Press Animations: Scale-down (scale: 0.97) on press down, spring back on release.
1304	● Easing: Avoid linear animations. Use spring physics for layout changes and ease-out for opacities.
1305	7. Iconography & Touch Targets
1306	● Library: Lucide-react-native (or equivalent SVG system).
1307	● Style: 2px stroke width, rounded caps and joins for a friendly, modern feel.
1308	● Touch Targets: Crucial for mobile. Minimum tap area of 44x44 pt (iOS) or 48x48 dp (Android) for all interactive elements, even if the visual icon is only 24x24.
1309	● Active States: Navigation icons transition from outlined (inactive) to filled/gradient (active).
1310	8. Accessibility & Best Practices
1311	● Dynamic Text: UI must not break when users increase their system font size. Text must wrap or truncate gracefully.
1312	● Contrast: All text meets WCAG AA standards. Slate 900 on Slate 50 background is highly compliant.
1313	● Screen Readers: Ensure all image assets and icon buttons have descriptive accessibilityLabel (iOS) and contentDescription (Android).
1314	● Dark Mode Readiness: While this spec is light-mode first, tokens should be structured to easily invert (e.g., Slate 50 becomes Slate 900, gradients become slightly muted).
1315	Sketch（素描/手绘风）
1316	有机的不稳定边框、手写排版、纸张纹理和俏皮的不完美。每个元素都是用记号笔和铅笔在纹理纸上勾勒出来的。
1317	1. 原型设计与早期创意提案 (Low-Fidelity Prototyping)
1318	2. 创意品牌、艺术与独立文化项目
1319	3. 教育、绘本与儿童类产品
1320	4. 游戏化 UI 与 叙事解谜游戏
1321	Design Philosophy
1322	The Hand-Drawn mobile design style celebrates authentic imperfection and human touch within the palm of the hand. It rejects the sterile precision of typical mobile UI in favor of organic, playful irregularity that evokes a portable sketchbook, a pocket notebook, or a collection of sticky notes.
1323	Core Principles:
1324	● No Straight Lines: Every View and TouchableOpacity uses complex borderRadius logic or SVG masks to create wobbly edges that reject geometric perfection.
1325	● Tactile Texture: Use background overlays or tiled images to simulate physical media like grain, paper, or notebook grids, making the screen feel like a physical surface.
1326	● Playful Tilt: Elements utilize small transform: [{ rotate: '-1deg' }] properties to break the rigid mobile grid and create casual energy.
1327	● Handwritten Typography: Exclusively use handwritten fonts (Kalam, Patrick Hand). Typography should vary in size and rotation to look like quick notes written on the fly.
1328	● Intentional Messiness: Embrace slight overlaps and asymmetrical margins that make the app feel spontaneous rather than manufactured.
1329	Design Token System
1330	Colors (Single Palette - Light Mode)
1331	● Background: #fdfbf7 (Warm Paper)
1332	● Foreground: #2d2d2d (Soft Pencil Black)
1333	● Muted: #e5e0d8 (Old Paper / Erased Pencil)
1334	● Accent: #ff4d4d (Red Correction Marker)
1335	● Border: #2d2d2d (Pencil Lead)
1336	● Secondary Accent: #2d5da1 (Blue Ballpoint Pen)
1337	Typography
1338	● Headings: Kalam-Bold - High visual weight, felt-tip marker style.
1339	● Body: PatrickHand-Regular - Highly legible but distinctly human.
1340	Radius & Border
1341	● Wobbly Borders: Since React Native doesn't support the slash / syntax for borderRadius, use unique values for each corner (e.g., borderTopLeftRadius: 15, borderTopRightRadius: 25, borderBottomLeftRadius: 20, borderBottomRightRadius: 10).
1342	● Border Width: Bold and visible. borderWidth: 2 minimum; borderWidth: 3 for primary actions.
1343	Shadows & Effects
1344	○ Standard: Offset { x: 4, y: 4 } with #2d2d2d.
1345	● Paper Texture: Use a repeating pattern background image or a very subtle radial-gradient SVG overlay across the entire screen.
1346	Component Stylings
1347	Buttons (TouchableOpacity)
1348	● Shape: Irregular wobbly rectangle.
1349	● Normal State: * White background, borderWidth: 3, Pencil Black text.
1350	○ Hard offset shadow view behind it.
1351	● Pressed State (activeOpacity={1}):
1352	○ Main button transform: [{ translateX: 4 }, { translateY: 4 }].
1353	Cards/Containers
1354	● Base Style: White background, wobbly border, slight rotation (-1deg or 1deg).
1355	● Decoration Types:
1356	Inputs (TextInput)
1357	● Style: Full box with wobbly borderRadius.
1358	● Font: PatrickHand-Regular.
1359	● Focus State: Border color changes to Blue Ballpoint (#2d5da1) with a slight increase in borderWidth.
1360	● Placeholder: Muted Pencil (#2d2d2d60).
1361	Layout Strategy
1362	● Overflow: Allow decorative elements (like a hand-drawn star) to bleed slightly off the edge of the screen.
1363	Non-Genericness (Bold Choices)
1364	● Hand-Drawn Icons: Use icons that look like they were drawn with a 0.5mm fineliner (thick strokes, unclosed loops).
1365	● Wavy Dividers: Replace standard horizontal rules with a hand-drawn squiggly line SVG.
1366	Effects & Animation
1367	● Snappy Transitions: Use LayoutAnimation.configureNext(LayoutAnimation.Presets.spring) for all layout changes to give a bouncy, physical feel.
1368	Mobile-First Strategy (React Native)
1369	Neumorphism（新拟物化）
1370	通过单色背景上的双阴影拉伸和插入元素。柔软、触感好、物理接地，可接近性极佳。
1371	1. 极简主义硬件控制与智能家居
1372	2. 追求审美感的工具类 App
1373	3. 金融与健康监测看板（非密集型）
1374	4. 品牌营销与展示型页面
1375	Design Philosophy (React Native / Mobile)
1376	Unique Visual Signatures (Mobile Specific):
1377	● Dual-Shadow Layering: Since React Native's shadowColor only supports one direction, use nested Viewcomponents or react-native-shadow-2 to achieve the dual-light effect.
1378	● Haptic Feedback: Every neumorphic interaction (Press/Release) must be accompanied by light haptic feedback (ImpactFeedbackStyle.Light).
1379	● Physical Press: Active states should use transform: [{ scale: 0.97 }] to simulate material compression.
1380	Design Token System (The DNA)
1381	Colors (Light Mode - Cool Monochromatic)
1382	● Text Primary: #3D4852 (7.5:1 contrast).
1383	● Text Muted: #6B7280 (4.6:1 contrast).
1384	● Accent: #6C63FF (Used for active toggles or primary CTAs).
1385	● Shadow Light: rgba(255, 255, 255, 0.6) (Top-Left).
1386	● Shadow Dark: rgba(163, 177, 198, 0.7) (Bottom-Right).
1387	Typography
1388	● Font Family: Use System (San Francisco/Roboto) or PlusJakartaSans-Bold.
1389	● Sizing: * Heading: 24pt-32pt, Bold.
1390	○ Body: 16pt, Medium.
1391	○ Caption: 12pt, Regular.
1392	● Letter Spacing: -0.5 for headings to enhance the modern look.
1393	Radius (React Native borderRadius)
1394	● Large Container: 32
1395	● Standard Button/Input: 16
1396	● Pill/Search Bar: 999
1397	Shadows & Effects (The Physics)
1398	Note: React Native requires specific shadow properties for iOS and elevation for Android. For high-fidelity Neumorphism, use a wrapping implementation.
1399	Extruded (Convex - Resting)
1400	● Outer Shadow (Dark): shadowOffset: { width: 6, height: 6 }, shadowOpacity: 1, shadowRadius: 10, shadowColor: 'rgba(163, 177, 198, 0.7)'
1401	● Inner Shadow (Light): shadowOffset: { width: -6, height: -6 }, shadowOpacity: 1, shadowRadius: 10, shadowColor: 'rgba(255, 255, 255, 0.6)'
1402	Inset (Concave - Pressed/Input)
1403	● Visual: backgroundColor: '#E0E5EC', plus internal borders of 1px with a darker shade at the top.
1404	Component Styling (React Native)
1405	Buttons
1406	● Base: height: 56, borderRadius: 16, justifyContent: 'center', alignItems: 'center'.
1407	● Default State: Extruded dual shadow.
1408	● Haptics: Trigger Haptics.impactAsync on onPressIn.
1409	Cards
1410	● Base: padding: 24, borderRadius: 32, backgroundColor: '#E0E5EC'.
1411	Inputs
1412	● Style: height: 50, borderRadius: 16, paddingHorizontal: 16.
1413	● Depth: Must be Inset (Concave) to look like a physical slot.
1414	● Focus: Border color changes to #6C63FF with a thin 1.5px width.
1415	Animation & Micro-interactions
1416	● Framework: Use React Native Reanimated or LayoutAnimation.
1417	● Transitions: Duration: 250ms, Easing: Bezier(0.4, 0, 0.2, 1).
1418	● Interaction: * Scale: Buttons shrink by 2-3% when pressed.
1419	Layout & Accessibility
1420	● Safe Area: Always wrap in SafeAreaView.
1421	● Touch Targets: Minimum 48x48 for all interactive elements.
1422	● Spacing: Use a 8pt grid system (8, 16, 24, 32, 48).
1423	● Contrast: Ensure text color maintains WCAG AA compliance against the #E0E5EC background.
1424	Anti-Patterns (Do Not Do)
1425	● No Pure White Backgrounds: The screen background MUST be #E0E5EC.
1426	● No Sharp Edges: Avoid borderRadius < 12.
1427	● No Flat Borders: Do not use borderWidth: 1 as a substitute for depth unless in a focus state.