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

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