1# NOTE: 此文件仅作为设计备份/参考文档，当前搜索引擎与 CLI 不会读取或执行本文件内容。
2 
3 
4Bauhaus（包豪斯）
5大胆的几何现代主义，包含圆形、方形和三角形。主色调（红/蓝/黄），边缘鲜明，阴影强烈。功能性与艺术性兼备，带有建构主义的不对称。
61. 极简主义品牌官网与电商
72. 工具类与高效率 App
83. 数字媒体与在线杂志
9 
10<design-system>
11Design Style: Bauhaus (Mobile)
121. Design Philosophy
13The Bauhaus style embodies the revolutionary principle "form follows function" while celebrating pure geometric beauty and primary color theory. On mobile, this translates to tactile constructivism—the screen is a canvas where elements are physically stacked blocks. The aesthetic creates a high-impact, poster-like experience in the palm of the hand: bold, touch-centric, and unapologetically graphic.
14Vibe: Tactile, Constructivist, Geometric, High-Contrast, Bold, Architectural
15Core 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.
16Key Characteristics:
17● Geometric Purity: UI elements are strictly circles (buttons/avatars) or squares (cards/inputs).
18● Tactile Depth: Hard shadows indicate interactivity; elements look "pressable."
19● Color Blocking: distinct screen sections use solid primary colors to separate content without whitespace.
20● Thick Borders: 2px and 3px black borders ensure legibility and distinct separation on small screens.
21● Vertical Rhythm: Strong vertical stacking with deliberate spacing, avoiding clutter.
22● Constructivist Typography: Headlines are massive (text-4xl to text-5xl) relative to screen width, breaking traditional mobile scaling rules.
23● Thumb-Friendly: Interactive zones are large, distinct, and geometrically defined.
242. Design Token System (The DNA)
25Colors (Single Palette - Light Mode)
26The palette remains strictly Bauhaus primaries, optimized for high contrast outdoors.
27● background: #F0F0F0 (Off-white canvas)
28● foreground: #121212 (Stark Black)
29● primary-red: #D02020 (Bauhaus Red)
30● primary-blue: #1040C0 (Bauhaus Blue)
31● primary-yellow: #F0C020 (Bauhaus Yellow)
32● border: #121212 (Thick, distinct borders)
33● muted: #E0E0E0
34Typography
35● Font Family: 'Outfit' (geometric sans-serif).
36● Font Import: Outfit:wght@400;500;700;900
37● Scaling: Aggressive scaling adapted for vertical viewports.
38    ○ Display: text-4xl → text-5xl (Massive headers taking up 30-40% of screen width)
39    ○ Subheadings: text-xl → text-2xl
40    ○ Body: text-base (16px minimum for legibility)
41    ○ Button Text: text-lg (Large for readability)
42● Weights:
43    ○ Headlines: font-black (900) uppercase, tight tracking (tracking-tighter)
44    ○ Buttons/Nav: font-bold (700) uppercase, wide tracking (tracking-wide)
45    ○ Body: font-medium (500)
46● Line Height: Tight (leading-none) for headlines to save vertical space; leading-relaxed for body text.
47Radius & Border
48● Radius: Strict Binary—rounded-none (0px) for layout blocks, inputs, and cards; rounded-full (9999px) for primary action buttons and avatars.
49● Border Widths:
50    ○ Standard Elements: border-2 (2px)
51    ○ Major Containers/Bottom Nav: border-t-2 or border-3
52    ○ Separators: divide-y-2
53● Border Color: Always #121212 (black).
54Shadows/Effects
55● Hard Offset Shadows (Tactile feedback):
56    ○ Small elements (Tags/Icons): shadow-[2px_2px_0px_0px_black]
57    ○ Buttons/Cards: shadow-[4px_4px_0px_0px_black] (Reduced from web 8px to save screen width)
58    ○ Floating Action Button (FAB): shadow-[5px_5px_0px_0px_black]
59● Touch Feedback: active:translate-x-[2px] active:translate-y-[2px] active:shadow-none (Instant mechanical depression).
60● Patterns:
61    ○ Dot grid backgrounds on "Paper" colored sections (background-size: 16px 16px).
62    ○ Screen transitions: Slide-over with hard black borders.
633. Component Stylings
64Buttons (Touch Targets)
65● Minimum Size: Height h-12 or h-14 (48px-56px) for thumb accessibility.
66● Variants:
67    ○ Primary (CTA): w-full bg-[#D02020] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]
68    ○ Secondary: w-full bg-[#1040C0] text-white border-2 border-black shadow-[4px_4px_0px_0px_black]
69    ○ 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
70● Shapes: Full-width rectangular buttons (rounded-none) or pill-shaped (rounded-full) for bottom-sticky actions.
71● States: NO hover. Focus on active state (press down effect).
72Cards (Mobile Stack)
73● Base Style: White background, border-2 border-black, shadow-[4px_4px_0px_0px_black], mb-6.
74● Decoration:
75    ○ 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.
76● Interaction: Entire card is a touch target. active:translate-x-[1px] active:translate-y-[1px] active:shadow-[2px_2px_0px_0px_black].
77● Content: Image usually takes top half (aspect-video), bold text below.
78Bottom Navigation (The Anchor)
79● Container: fixed bottom-0 w-full bg-white border-t-2 border-black z-50 h-20.
80● Grid: 3 to 5 items equally spaced.
81● Items:
82    ○ Inactive: Black stroke icon, clear background.
83    ○ Active: Icon inside a geometric shape (Square/Circle) with primary color fill (e.g., Red Square context).
84    ○ Label: Tiny uppercase bold text below icon, or icon only for minimalism.
85Inputs & Forms
86● 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.
87● Label: Uppercase bold, mb-1 block.
88● Checkbox: h-6 w-6 appearance-none border-2 border-black bg-white checked:bg-[#1040C0] rounded-none.
894. Layout & Spacing
90● Container: w-full with px-5 (20px) padding. Max-width constraints removed (fluid mobile).
91● Section Padding:
92    ○ Standard: py-8
93    ○ Hero: pt-12 pb-16
94● Grid Systems:
95    ○ Main Layout: Single column (Stack).
96    ○ Micro-grids: 2-column for stats/gallery (gap-3 or gap-4).
97● Safe Areas: Respect pt-safe (top notch) and pb-safe (bottom home indicator).
98● Dividers: Thick section separators border-b-2 border-black usually paired with a background color change.
995. Non-Genericness (Bold Choices)
100Mobile Constraints require distinct personality to avoid looking like a wireframe:
101● Full-Screen Color Washes:
102    ○ Onboarding screens: Full solid backgrounds (Red Screen → Blue Screen → Yellow Screen).
103    ○ Success states: Full Yellow background (bg-[#F0C020]) with massive black centered checkmark.
104    ○ Error states: Full Red background (bg-[#D02020]) with white text.
105● Header Identity:
106    ○ Instead of a standard navbar, use a "Bauhaus Header Block": A row containing a Square (Menu), a flexible space for the Title (Left aligned, massive), and a Circle (Profile/Search). All elements separated by vertical borders divide-x-2 border-b-2 border-black.
107● Geometric Lists:
108    ○ List items aren't just text lines. They are alternating geometric bullets: Line 1 uses a ■, Line 2 uses a ●, Line 3 uses a ▲.
109● Rotated "Stickers":
110    ○ "New", "Sale", or Notification badges are rotated -12deg or +12deg, sitting on top of corners to break the rigid grid.
111● Image Filters:
112    ○ Thumbnails: Grayscale + High Contrast.
113    ○ Detail View: Full color, no rounded corners, thick black border.
1146. Icons & Imagery
115● Icon Library: lucide-react-native or similar (Circle, Square, Triangle, Menu, X, ArrowLeft).
116● Icon Style:
117    ○ Stroke: stroke-[2px].
118    ○ Size: w-6 h-6 (standard) or w-8 h-8 (hero actions).
119● Icon Containers:
120    ○ Navigation icons often live inside rigid 48x48px bordered squares.
121    ○ Back buttons are always circular rounded-full with a border.
122● Imagery:
123    ○ 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.
1247. Responsive Strategy (Device Sizes)
125● Small Phones (SE/Mini):
126    ○ Reduce display text to text-3xl.
127    ○ Stack stats vertically (1-col).
128    ○ Reduce padding to px-4.
129● Large Phones (Max/Plus):
130    ○ Display text scales to text-5xl.
131    ○ Stats can use 2-col grid.
132    ○ Card images gain more height.
133● Orientation:
134    ○ Portrait (Primary): Vertical stacking.
135    ○ Landscape: Avoid if possible, or split screen 50/50 (Text Left / Image Right).
1368. Animation & Micro-Interactions
137● Feel: Physical, snappy, zero-latency.
138● Duration: duration-150 (Very fast).
139● Easing: ease-in-out (Sharp stops).
140● Interactions:
141    ○ Tap: The element physically depresses (translate X/Y matches shadow size).
142    ○ Drawer Open: Slides in from Left/Right with a solid black border line leading it. No soft fades—it slides like a mechanical door.
143    ○ Toast/Alerts: Drop down from top as a solid geometric block (Yellow/Red) with hard borders, swinging slightly like a hanging sign.
144    ○ Scroll: Sticky headers snap into place instantly.
145</design-system>
146 
147 
148 
149"Monochrome（单色/黑白）
150"一套简洁的编辑设计体系，建立在纯粹的黑白之上。没有点缀色——只有戏剧性的对比、超大衬线字体和精准的几何布局。让人联想到高端时尚专题和建筑作品集。严肃、成熟、毫不掩饰地大胆。
151"1. 极简主义电商与高端奢侈品
1522. 专业创意与文档编辑工具
1533. 数据密集型仪表盘（局部应用）
1544. 实验性与先锋感网站"
155 
156<design-system>
157Design Style: Minimalist Monochrome (Mobile)
158Design Philosophy
159Core Principle
160The Pocket Editorial. On mobile, Minimalist Monochrome transforms the screen into a tactile, high-end printed manifesto. It rejects the "app-like" tendency for soft bubbles and friendly gradients. Instead, it offers a stark, vertical journey defined by pure black (#000000), pure white (#FFFFFF), and razor-sharp borders. Every tap is a deliberate decision; every scroll is a flip of a page in a luxury monograph.
161Visual Vibe
162Emotional Keywords: Tactile, Austere, Editorial, Direct, High-Fidelity, Uncompromising, Sharp, Rhythmic.
163This is the visual language of:
164● Mobile typographers and digital brutalism
165● The mobile interfaces of luxury fashion houses (Balenciaga, Zara, SSENSE)
166● Digital exhibitions where the content frames itself
167● High-contrast e-reader aesthetics
168What This Design Is NOT
169● ❌ "App-y" (no cards with drop shadows, no floating bubbles)
170● ❌ Native iOS/Android standard (no system blue, no rounded groups)
171● ❌ Gesture-heavy (interactions are explicit taps, not vague swipes)
172● ❌ Cluttered (one idea per screen view)
173● ❌ Colorful (strictly grayscale)
174The DNA of Minimalist Monochrome (Mobile)
1751. Vertical Linearity
176The 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.
1772. Typography as Interface
178Buttons 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.
1793. The "Touch" Inversion
180Since there is no "hover" on mobile, interaction is communicated through inversion. When a user touches a white block, it turns black instantly. This zero-latency binary feedback replaces physical tactility.
1814. Zero Radius, Zero Fluff
182All 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.
183 
184Design Token System
185Colors (Strictly Monochrome)
186background:       #FFFFFF (Pure white)
187foreground:       #000000 (Pure black)
188muted:            #F5F5F5 (Off-white for "pressed" states or subtle blocks)
189mutedForeground:  #525252 (Dark gray for metadata)
190border:           #000000 (Black borders - heavy usage)
191borderLight:      #E5E5E5 (Subtle dividers)
192overlay:          #000000 (Full screen menu background)
193 
194Rule: No accent colors. The "Active State" is simply the inverse of the "Default State."
195Typography
196Font Stack:
197● Display: "Playfair Display", serif - For all headlines and large numerals.
198● Body: "Source Serif 4", serif - For reading text.
199● UI/Labels: "JetBrains Mono", monospace - For tiny tags, dates, and technical specs.
200Type Scale (Mobile Optimized):
201Note: Sizes are calibrated to feel "massive" on a small screen without breaking layout.
202xs:   0.75rem  (12px) - Metadata / Breadcrumbs
203sm:   0.875rem (14px) - UI Labels / Captions
204base: 1rem     (16px) - Body text (Legibility minimum)
205lg:   1.125rem (18px) - Lead text / Button text
206xl:   1.5rem   (24px) - Section headers
2072xl:  2rem     (32px) - Standard Headlines
2083xl:  2.5rem   (40px) - Hero Sub-text
2094xl:  3rem     (48px) - Major Headlines
2105xl:  4rem     (64px) - "Cover" text (Often wraps)
2116xl:  5rem     (80px) - Numerical statements
212 
213Tracking & Leading:
214● Headlines: tracking-tighter (-0.05em) and leading-[0.9]. Text should feel tightly packed.
215● Body: leading-relaxed for readability.
216● Button Text: tracking-widest uppercase.
217Border Radius
218ALL VALUES: 0px
219 
220Constraint: Even the bottom sheet (modal) must be square. Even the active state of a tapped element is a sharp rectangle.
221Borders & Lines (The Grid)
222hairline:  1px solid #E5E5E5  (List separators)
223thin:      1px solid #000000  (Standard element borders)
224thick:     2px solid #000000  (Emphasis / Input bottom)
225heavy:     4px solid #000000  (Section dividers)
226 
227Usage:
228● Full-Bleed Lines: Borders should often touch the edges of the screen (-mx-4 or -mx-6).
229● Separators: Use border-b black heavily to separate stacked vertical content.
230Shadows
231NONE
232 
233Depth is strictly 2D. Layers are defined by opacity (100% vs 0%) or borders, never by shadows.
234Textures & Patterns
235Use subtle noise to simulate high-quality paper texture on mobile backgrounds to avoid a "sterile" feeling.
236Mobile Noise (CSS):
237CSS
238 
239background-image: url("data:image/svg+xml,..."); /* Same noise SVG as web */
240opacity: 0.03; /* Slightly higher opacity for small screens */
241 
242 
243Component Stylings
244Buttons & Touch Targets
245Primary Button (The Block):
246- Width: w-full (Full width strongly preferred)
247- Height: h-14 (56px - Large touch target)
248- Background: #000000
249- Text: #FFFFFF
250- Radius: 0px
251- Typography: Uppercase, Mono or Serif, Tracking-widest
252- Active State: Instantly inverts to White bg, Black text
253 
254Secondary Button (The Outline):
255- Width: w-full
256- Height: h-14
257- Background: Transparent
258- Border: 1px solid #000000
259- Active State: Instantly fills Black
260 
261Sticky Bottom Action (CTA):
262● A fixed bar at the bottom of the viewport.
263● border-t-2 border-black.
264● Contains a single primary action or a price + action pair.
265● Background: #FFFFFF (or inverted #000000).
266Cards / List Items
267The "Stacked" Card:
268Instead of a box with padding, mobile cards are often full-width segments separated by borders.
269- Container: Border-bottom 1px solid #000000
270- Padding: py-6
271- Image: Aspect ratio 4:5 or 1:1, full width or padded
272- Content: Text sits directly below image
273- Interaction: Touching anywhere in the segment triggers "Active" state
274 
275Navigation
276The "Bar":
277● Top: Minimal. Just a logo (Left) and a "MENU" text button or Hamburger (Right).
278● Bottom: Optional. If used, simple text labels or thin outline icons. border-t-2 border-black.
279The Menu Overlay:
280● Full screen.
281● Background: #000000 (Black).
282● Text: #FFFFFF (White).
283● List items: Massive text (text-4xl), serif, centered or left-aligned.
284● Divider: Thin white lines between menu items.
285Inputs
286Mobile Input:
287- Style: Flush with background.
288- Border: Bottom only (2px solid black).
289- Radius: 0px.
290- Height: h-14.
291- Focus: Border becomes 4px thick. No native blue glow.
292- Clear Button: Simple 'X' icon in black.
293 
294 
295Layout Strategy
296Safe Areas
297● Respect pb-safe (Home Indicator) and pt-safe (Status Bar).
298● Style Note: The Status Bar should be white text on black header, or black text on white header. High contrast.
299Container & Spacing
300● Horizontal Padding: px-5 (20px) or px-6 (24px).
301● Vertical Rhythm:
302    ○ Small gaps: py-4
303    ○ Section gaps: py-16
304    ○ Between text and image: my-6
305The "Scroll"
306● Design for the scroll. Use sticky headers for section titles (e.g., "Details", "Shipping") that stack as the user scrolls down, creating a filing cabinet effect.
307● Use divide-y divide-black for lists to create strong separation.
308 
309Effects & Animation
310Motion Philosophy: Cut, Don't Fade.
311Mobile transitions should feel mechanical and instant, like a shutter clicking.
312Interactions:
313● Tap: active:bg-black active:text-white (Instant inversion).
314● Page Transition: Slide in from right (100% width) with a hard edge. No distinct shadow on the sliding page, just a clean line.
315● Modal: Slides up from bottom. 0px radius. Covers 100% or 90% of screen. Black border top.
316● Scroll Parallax: None. Keep scrolling tied 1:1 to finger movement.
317Specific Implementation:
318TypeScript
319 
320// Mobile Button Active State
321className="bg-black text-white active:bg-white active:text-black active:border active:border-black transition-none"
322 
323// Image Loading
324className="opacity-0 data-[loaded=true]:opacity-100 transition-opacity duration-300 ease-linear grayscale data-[loaded=true]:grayscale-0"
325 
326 
327Iconography
328Style: Stroke-based, Thin, Sharp.
329Library: Lucide React (or similar).
330Mobile Specifics:
331● Size: w-6 h-6 (Standard)
332● Stroke: 1.5px (Matches the fine aesthetic)
333● 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.
334 
335Responsive Strategy (Device Sizes)
336Small Phones (iPhone SE/Mini):
337● Headlines: Scale down to text-4xl to prevent breaking single words into nonsense.
338● Padding: Reduce to px-4.
339Large Phones (Max/Plus):
340● Headlines: text-5xl or text-6xl.
341● Layout: Can introduce a 2-column grid for product thumbnails (but keep strict borders between them).
342Dark Mode:
343● System: Enforce Light Mode (Black on White) as the default brand identity.
344● Inverted Sections: Use Dark Mode (White on Black) only for specific sections (Footer, Hero, Special Features) to create rhythm, not based on system settings.
345 
346Bold Choices (Non-Negotiable)
3471. Massive Typographic Hero: The opening screen must feature a headline where a single word might span the full width.
3482. The "Hard" Line: A 4px black line (border-b-4) must separate the Hero from the content.
3493. Sticky Section Headers: As you scroll, the section title (e.g., "01. INFO") sticks to the top with a bottom border, stacking on top of the previous one.
3504. No Hamburger Icon: Use the word "MENU" in JetBrains Mono instead of an icon, if space permits.
3515. Inverted Gallery: Image galleries have a Black background with images at full opacity.
3526. Editorial Inputs: Form labels look like subheadings (Playfair Display, Italic).
3537. No Skeletons: Loading states are simple spinning black lines or just whitespace. No gray pulsing blobs.
3548. Mechanical Feedback: Every interactive element MUST have a visible active state (color inversion).
355 
356What Success Looks Like (Mobile)
357A successfully implemented Minimalist Monochrome mobile design should feel like:
358● A digitally printed receipt from a high-end boutique.
359● A pocket edition of a brutally honest manifesto.
360● Clean, fast, and remarkably legible outdoors.
361● Intimidatingly simple.
362It should NOT feel like:
363● A scaled-down version of a desktop site.
364● A standard Bootstrap/Tailwind mobile layout.
365● An app trying to be "friendly."
366</design-system>
367 
368 
369 
370Modern Dark（现代深色模式）
371一种电影般的高精度暗模式设计，通过动画渐变斑点、鼠标跟踪聚光灯效果和精心制作的微交互实现分层环境照明，感觉就像高级软件。
372"1. 影音娱乐与流媒体平台
3732. 开发者工具与专业生产力软件
3743. 金融、科技与 AI 仪表盘
3754. 高端运动与奢华品牌"
376 
377Design Philosophy
378Core Principles: Precision, tactile depth, and fluid motion define this mobile design system. For React Native, every component is treated as a physical layer within a stacked 3D space, illuminated by virtual light sources. The design communicates "high-end mobile utility"—as responsive and refined as the Linear mobile app or Apple’s native interface. Every shadow uses multiple layers, every gradient is dithered to prevent banding, and every interaction uses precise haptic feedback combined with Expo.out easing.
379Vibe: Cinematic Technical Minimalism. It’s a "Dark Mode First" aesthetic, utilizing near-blacks (#050506) and deep indigos. Imagine a high-end pro tool interface viewed through frosted glass at night. It is technical but inviting, using soft "glow" sources (#5E6AD2) to guide the thumb. It should feel like a premium native iOS/Android app, not a web-wrapper.
380Differentiation: The signature is Atmospheric Depth. While most mobile apps are flat, this system uses:
381● Layered Backgrounds: Stacked View layers with varying opacities, blur intensities, and subtle noise textures.
382● Animated Ambient Light: Large, slow-moving blurred Canvas objects (using react-native-skia or Animated) that simulate light pools.
383● Haptic-Linked Interactions: Every "Pressable" event is paired with subtle haptics (Impact Light/Medium) to reinforce the "hardware" feel.
384● Spring-less Precision: Eschewing "bouncy" animations for sophisticated Bezier(0.16, 1, 0.3, 1) curves.
385 
386Design Token System (The DNA)
387Color Strategy: Deep Space & Ambient Light
388Token
389Value
390Usage
391bg-deep
392#020203
393Screen background, Bottom Tab bar base
394bg-base
395#050506
396Primary view container background
397bg-elevated
398#0a0a0c
399Modals, Bottom sheets, Surface cards
400surface
401rgba(255,255,255,0.05)
402Card backgrounds, list items
403foreground
404#EDEDEF
405Primary text (High contrast)
406foreground-muted
407#8A8F98
408Secondary labels, body text
409accent
410#5E6AD2
411Buttons, active icons, primary brand glows
412accent-glow
413rgba(94,106,210,0.2)
414Ambient shadows and light emission
415border-default
416rgba(255,255,255,0.08)
417Subtle hairline dividers (0.5pt on iOS)
418 
419Typography System (React Native)
420Font Family: Inter, GeistSans-Regular, or System San Francisco/Roboto.
421Level
422Size
423Weight
424Letter Spacing
425Display
42648
427700
428-1.5
429H1
43032
431600
432-0.5
433H2
43424
435600
436-0.5
437H3
43818
439600
4400
441Body
44216
443400
4440
445Label/Mono
44612
447500
4481.2 (Uppercase)
449Gradient Text: Implement using mask-view and react-native-linear-gradient. Headers should transition from #FFFFFF to rgba(255,255,255,0.7) vertically.
450 
451Component Styling Principles
4521. The Background System
453Never use a single solid color for the screen.
454● Base: A LinearGradient from #0a0a0f at the top to #020203 at the bottom.
455● The "Blobs": Use AbsoluteFill views with borderRadius equal to half their width, high blurRadius (30-50), and low opacity (0.1).
456● Animation: Use useAnimatedStyle from Reanimated to slowly oscillate the translateX and translateY of these light pools.
4572. Cards & Containers
458● Radius: Always borderRadius: 16.
459● Border: Use borderWidth: StyleSheet.hairlineWidth with rgba(255,255,255,0.1).
460● Glow: Apply a subtle top-edge highlight using a 1px LinearGradient inside the card.
461● Shadow: React Native shadows are limited on Android; use react-native-shadow-2 or Skia to achieve the "3-layer" shadow look (Ambient + Diffuse + Accent).
4623. Buttons (Pressables)
463● Primary: Background #5E6AD2. Text #FFFFFF.
464● Interaction: On onPressIn, scale to 0.97. On onPressOut, scale back to 1.0. Use Selection haptic feedback.
465● Visual: Add a 10% opacity white "Shine" gradient overlaying the top half of the button.
4664. Interactive Navigation
467● Tab Bar: Use BlurView (expo-blur) with intensity={20} and tint="dark".
468● Active State: The active icon should have a small accent-glow shadow behind it.
469● Transitions: Shared Element Transitions for navigating from a card to a detail view, ensuring the card's border and background flow seamlessly.
470 
471Layout & Motion
472Spacing Scale
473● Base Unit: 4pt.
474● Screen Margins: 20pt (Standard) or 16pt (Tight).
475● Gaps: Use gap (available in modern RN) with values of 8, 12, 16, or 24.
476Animation Specs
477● Easing: Easing.bezier(0.16, 1, 0.3, 1) (Expo Out).
478● Duration: * Micro-interactions (Toggle/Press): 200ms.
479    ○ Screen Transitions: 400ms.
480    ○ Modals (Bottom Sheet): 500ms with custom spring (damping: 20, stiffness: 90).
481 
482Anti-Patterns (What to Avoid)
483● Pure Black (#000000): It causes "OLED Smearing" on mobile screens. Stick to #050506.
484● Standard OS Modals: Avoid default Modal components; use "Bottom Sheets" (like gorhom/bottom-sheet) with blurred backdrops to maintain depth.
485● Full Opacity Borders: Never use solid grey borders. Always use rgba white/black for natural blending.
486● Laggy Blobs: Do not use too many blurRadius effects on the main JS thread. Always use useNativeDriver: true or Skia.
487 
488The "Bold Factor" (Signature Elements)
4891. Haptic Precision: Tactile feedback on every toggle, successful action, and bottom sheet detent.
4902. Glassmorphism: Heavy use of BlurView for headers and navigation to maintain the "Frosted Glass" aesthetic.
4913. Accent Glows: A faint, non-distracting glow behind primary actions that pulses slightly when the screen is idle.
4924. Bento Layouts: For dashboards, use Flexbox to create asymmetric cards (e.g., one card taking 60% width, the other 40% with different heights).
493 
494 
495SaaS（软件即服务）
496一个大胆、极简主义的现代视觉系统，将简洁的美学与动态的执行相结合。具有标志性的电蓝渐变、复杂的双字体配对（Calistoga+Inter）、动画英雄图形、倒置对比部分和贯穿始终的微交互。专业而前卫的设计——自信而不杂乱。
4971. 业务管理与协作系统 (B2B / Operations)
4982. 开发者工具与云服务平台
4993. 企业内部工具与人力资源管理 (HRM)
5004. 营销与数据分析工具
501 
502System Prompt: Mobile Excellence Design System (React Native)
503Design Philosophy
504Core Principle
505Clarity through structure, character through bold detail. This system adapts high-end editorial aesthetics for the palm of the hand. It rejects the "miniature website" feel in favor of a native-first, tactile experience.
506Whitespace 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.
507The Visual Vibe
508"High-Tech Boutique." Imagine a premium fintech app combined with a modern design portfolio. It feels engineered, yet artistic; minimal, yet alive.
509● Confident: Bold typography and vibrant accents.
510● Sophisticated: Layered shadows and dual-font systems that whisper "quality."
511● Tactile: Haptic-ready interactions and fluid spring animations.
512● Premium: Generous "safe areas" and elevated surfaces.
513 
514The DNA of This Style
5151. The Signature Gradient (Mobile Optimized)
516The Electric Blue gradient (#0052FF → #4D7CFF) is the heartbeat. In React Native, this is implemented via react-native-linear-gradient.
517● Usage: Primary Buttons, Active Tab Icons, Header Backgrounds, and Progress Indicators.
518● Why: Gradients provide depth on mobile screens where flat colors often feel "dead."
5192. Physical Depth & Living Elements
520Mobile is a 3D space. We use Z-index and shadows to create a clear mental model:
521● Floating Action Buttons (FAB): Gently bobbing using react-native-reanimated.
522● Surface Elevation: Cards use shadowColor and elevation (Android) to feel like physical layers.
523● Pulsing States: Small status dots use a scale loop to signal "Active" or "Live."
5243. Sophisticated Dual-Font Typography
525● Display: Calistoga (or Serif fallback) for Headlines. It adds human warmth to the digital interface.
526● UI/Body: Inter (or System Sans-Serif). The workhorse for readability.
527● Technical: JetBrains Mono for labels and data points.
5284. Texture & Micro-Patterns
529To prevent "Flat Design Fatigue":
530● Subtle Overlays: Use a very low-opacity dot pattern (PNG/SVG) on dark backgrounds.
531● Glassmorphism: Use BlurView (Expo/Community) for navigation bars to create a sense of context.
532 
533Design Token System (The DNA)
534Color Strategy
535Token
536Value
537Usage
538background
539#FAFAFA
540Primary app canvas (warm off-white).
541foreground
542#0F172A
543Deep slate for primary text and dark sections.
544muted
545#F1F5F9
546Secondary surfaces (gray fills).
547accent
548#0052FF
549Primary actions and brand touchpoints.
550accent-sec
551#4D7CFF
552Gradient endpoint.
553card
554#FFFFFF
555Pure white for elevated components.
556border
557#E2E8F0
558Hairline dividers (0.5pt to 1pt).
559Typography Scale
560● Hero (H1): 36pt - 42pt | Calistoga | Leading 1.1
561● Section (H2): 28pt - 32pt | Calistoga | Leading 1.2
562● Body: 16pt - 18pt | Inter | Leading 1.5
563● Label: 12pt | JetBrains Mono | Uppercase | Letter Spacing 1.5
564 
565Component Specifications (React Native)
5661. Primary Button (Pressable + Reanimated)
567● Height: 56px (Standard touch target).
568● Radius: 16px (Rounded-2xl).
569● Interaction: * On onPressIn: Scale down to 0.96.
570    ○ On onPressOut: Spring back to 1.0.
571● Style: Linear Gradient background with shadow-accent.
5722. The Section Badge
573A consistent pattern for orienting the user:
574JavaScript
575 
576// Structure
577<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)'}}>
578  <PulseDot color="#0052FF" />
579  <Text style={{fontFamily: 'JetBrains Mono', fontSize: 12, color: '#0052FF'}}>SECTION NAME</Text>
580</View>
581 
5823. Content Cards
583● Border: 1pt hairline in Slate-200.
584● Shadow: * iOS: shadowOpacity: 0.1, shadowRadius: 10, shadowOffset: {width: 0, height: 4}.
585    ○ Android: elevation: 4.
586● Padding: 24px (Consistent gutter).
587 
588Motion & Interaction Rules
589The "Spring" Standard
590Avoid linear animations. Use Spring Config for all transitions:
591● mass: 1, damping: 15, stiffness: 120.
592Entrance Animations
593● Staggered Fade-In: Content should slide up (Y: 20 -> 0) and fade in (Opacity: 0 -> 1) as the screen mounts.
594● Layout Transitions: Use LayoutAnimation or Reanimated's entering prop for seamless list updates.
595 
596Implementation Instructions for AI
5971. Strict Styling: Use StyleSheet.create or a utility-first library like NativeWind (Tailwind for RN).
5982. Safe Areas: Always wrap root content in SafeAreaView.
5993. Touch Targets: Ensure all interactive elements are at least 44x44px.
6004. Icons: Use Lucide-React-Native or Expo Vector Icons (Feather/Ionicons).
6015. Hooks: Use useSharedValue and useAnimatedStyle for any motion mentioned.
602Example Signature Block:
603When generating a screen, always include a "Design Note" explaining how the Asymmetry and Gradient Accent are applied to ensure it doesn't look like a generic template.
604 
605 
606Terminal（终端/命令行）
607一种原始的、功能性的、复古的、未来主义的命令行界面美学。高对比度、等宽精度和闪烁光标。
6081. 开发者工具与极客类应用
6092. 区块链、Web3 与 加密货币项目
6103. 科幻、侦探与解谜类游戏 (ARG)
6114. 创意工作室与个人作品集
612System Prompt: React Native Terminal CLI Framework
613Design Philosophy
614The Mobile Terminal CLI aesthetic adapts the raw power of a command-line interface into a handheld, touch-first environment. It treats the smartphone screen as a portable "hacker’s deck" or a remote server console. It is utilitarian, high-contrast, and uncompromisingly rigid.
615The vibe is "Field Operative" or "System Administrator on the go." Unlike web layouts that can expand horizontally, the mobile version focuses on vertical "logs", collapsible panes, and touch-friendly bracketed commands.
616Key visual signatures:
617● Monospace Supremacy: Every UI element uses monospaced fonts. Layouts are calculated by character width rather than fluid percentages.
618● The Command Line Prompt: Every screen starts with a system path or user breadcrumb (e.g., ~/root/user/home).
619● Tactile Feedback: Subtle haptics on every "keystroke" or button press to mimic mechanical keyboard feedback.
620● ASCII Borders: Using characters like +, -, |, and * to define UI boundaries instead of standard mobile shadows or rounded containers.
621 
622Design Token System
623Colors (OLED-Optimized Dark Mode)
624React Native implementations should use the StyleSheet or Tailwind/NativeWind tokens below:
625● Background: #050505 (Deepest black for OLED power saving and high contrast).
626● Foreground:
627    ○ Primary: #33FF00 (Classic Matrix Green).
628    ○ Secondary: #FFB000 (Terminal Amber for warnings/toggles).
629    ○ Muted: #1A3D1A (Low-intensity green for inactive text/guides).
630    ○ Error: #FF3333 (Command Failed Red).
631● Border: #33FF00 (1px solid green for terminal windows).
632Typography
633● Font Family: Courier New, SpaceMono-Regular (iOS/Android default), or bundled JetBrains Mono.
634● Size: Strict 12pt, 14pt, or 16pt. No "in-between" sizes.
635● Weight: Normal (monospaced fonts lose their character when too bold).
636● Line Height: Tight. 1.2x font size to maximize information density on small screens.
637Radius & Borders
638● Radius: 0. Standard React Native borderRadius: 0. No exceptions.
639● Borders: borderWidth: 1. Style: solid.
640 
641Component Stylings (React Native Specific)
642Buttons (Commands)
643● Structure: Text wrapped in TouchableHighlight. Displayed as [ EXECUTE ] or > PROCEED.
644● Interaction: On press, underlayColor should be the Primary Green, and text color should flip to #000000(Inverted Video).
645● Haptics: Trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light) on press.
646Cards (Process Windows)
647● Structure: A <View> with borderWidth: 1 and borderColor: primary.
648● Title Bar: A top row with inverted colors: [ TITLE: SYSTEM_LOG ].
649● Scroll: Use FlatList with indicatorStyle="white" to mimic a scrolling terminal buffer.
650Inputs (The Caret)
651● Style: No background. Starts with a prefix: $ or >.
652● The Cursor: A View with a blinking Opacity animation (0 to 1) placed at the end of the text string.
653● Keyboard: Set keyboardType="ascii-capable" and autoCapitalize="none".
654 
655Layout Strategy (The Mobile Terminal)
656The layout mimics a mobile tmux session.
657● Vertical Stacking: Use Flexbox with flexDirection: 'column'. Screens should feel like a continuous stream of data.
658● Separators: Create a <Separator /> component that renders a string of dashes: --------------------------.
659● Status Bar: A permanent fixed footer showing [BATTERY: 88%] [NET: CONNECTED] [TIME: 08:51].
660 
661Non-Genericness (The Bold Factor)
662● Boot Sequence: On app launch, show a rapid-fire scroll of fake system logs (INIT_KERNEL..., LOADING_UI...) before the main content appears.
663● ASCII Graphics: Use Text components for headers instead of PNG icons.
664Plaintext
665 
666 _  _  ____  ____ 
667( \/ )(  _ \(  _ \
668 \  /  ) _ ( )   /
669  \/  (____/(_)\_)
670 
671● Progress Indicators: No ActivityIndicator. Use text-based bars: [#####-----] 50%.
672 
673Effects & Animation (React Native Reanimated)
674● Blink: A 500ms loop of opacity for the cursor █.
675● Typewriter: Use a custom hook to slice strings from 0 to n characters over time for new data arrivals.
676● Scanlines: A top-level <ImageBackground> or absolute <View> with a repeating horizontal line pattern at 0.05opacity.
677 
678Iconography
679● Style: Use standard MaterialCommunityIcons or Lucide, but always set strokeWidth={1} and size={20}.
680● Implementation: Icons should be treated as "Characters." They must be the same color as the text they accompany.
681 
682Accessibility & Performance
683● Contrast: Green on Black is highly legible for vision-impaired users.
684● Touch Targets: Even though the style is "tight," ensure hitSlop is used on bracketed buttons to meet 44x44dp mobile standards.
685● Reduced Motion: Respect AccessibilityInfo.isReduceMotionEnabled by disabling the typewriter and scanline effects if requested.
686 
687Kinetic（动力学/动态）
688运动优先设计，排版是主要的视觉媒介。具有无限选框、视口缩放文本、滚动触发动画和激进的大写样式。高对比度的野兽派能量，有节奏的动作。
6891. 沉浸式叙事与品牌官网 (Storytelling)
6902. 具有强引导需求的复杂流程 (Guidance)
6913. 数据可视化与实时监控 (Data Visualization)
6924. 情感化设计与反馈 (Micro-interactions)
693System Prompt: Kinetic Mobile Brutalism
694Design Philosophy
695Core Principle: Typography is the architecture of the mobile screen. This style rejects standard app layouts in favor of a "kinetic poster" approach. Text is treated as a graphic element; headers are hero units. Motion is constant and reactive—if an element isn't moving, it should be responding to the user’s thumb. Every interaction feels heavy, tactile, and high-contrast.
696Aesthetic 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.
697Visual 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.
698Signature Elements:
699● Infinite Marquees: Horizontal scrolling text that never stops (using react-native-reanimated).
700● Aggressive Typography: Display text is ALWAYS uppercase with tight tracking.
701● Massive Numerical Elements: Numbers ($60-120pt$) used as background graphic textures.
702● Tactile Color Inversions: On press, cards flood with accent color instantly (no slow fades).
703● Scroll-Driven Scaling: Elements scale or rotate based on scroll position (using Interpolate).
704● Brutalist Geometry: $2px$ solid borders, $0px$ border-radius, hairline grid dividers.
705 
706Design Token System (The DNA)
707Color Architecture
708Token
709Hex Value
710Usage
711background
712#09090B
713Rich black (primary canvas)
714foreground
715#FAFAFA
716Off-white (primary text)
717muted
718#27272A
719Dark gray (secondary surfaces/bg numbers)
720muted-foreground
721#A1A1AA
722Zinc 400 (body text/descriptions)
723accent
724#DFE104
725Acid yellow (energy/highlight/active states)
726accent-foreground
727#000000
728Pure black (text on accent backgrounds)
729border
730#3F3F46
731Zinc 700 (structural lines)
732Typography System
733● Font Selection: Geometric Sans-Serifs (e.g., Space Grotesk, Inter, or System Bold).
734● Scale Hierarchy:
735    ○ Hero/Display: $60pt$ to $120pt$ (use PixelRatio for scaling).
736    ○ Section Headings: $40pt$ to $50pt$.
737    ○ Card Titles: $28pt$ to $32pt$.
738    ○ Body/Descriptions: $18pt$ to $20pt$.
739    ○ Small Labels: $12pt$ (Uppercase + Wide Tracking).
740● Type Rules:
741    ○ Uppercase: All display headings, buttons, and navigation items.
742    ○ Letter Spacing: letterSpacing: -1 for large text, +2 for small labels.
743    ○ Line Height: lineHeight should be $0.9x$ to $1.1x$ the font size for headings to create a "blocky" look.
744Shape & Layout
745● Base Unit: $4pt$ grid.
746● Border Radius: Strictly 0.
747● Borders: $2px$ solid (use borderWidth: 2).
748● Shadows: NONE. Use color layering and borders for depth.
749● Padding: Aggressive. Section padding py: 40, Card padding p: 24.
750 
751Component Styling Principles
752Buttons
753● Structure: Height 64px or 80px. Bold, uppercase text.
754● Primary: Background #DFE104, Text #000000.
755● Outline: borderWidth: 2, Border #3F3F46, Transparent background.
756● Interaction: Use Pressable with useAnimatedStyle. On onPressIn, scale to 0.95. On onPressOut, return to 1.0.
757Cards & Containers
758● Styling: Sharp corners, #3F3F46 border, #09090B background.
759● Interaction: On press, the background should "flood" with #DFE104 and text should flip to black.
760● Stacking: Use zIndex and translateY to create overlapping "sticky" card effects during scroll.
761Inputs
762● Styling: Height 80px. borderBottomWidth: 2. Large uppercase text ($24pt+$).
763● Focus: Border color flips to Acid Yellow. Placeholder text in Muted Zinc.
764 
765Animation & Motion System (The Kinetic Engine)
766Marquee Motion
767● Implement using react-native-reanimated.
768● High Energy: Speed 5s per loop, no easing (easing: Linear).
769● Rule: No gradient fades at the edges. Text should clip sharply at the screen bounds.
770Scroll-Triggered Transforms
771● Hero Parallax: As the user scrolls, the hero text should scale from 1.0 to 1.3 and fade to 0.
772● Sticky Header: Headers should snap and "push" the previous section's content.
773Micro-Interactions
774● Haptic Feedback: Trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium) on every button press and card flip.
775● Instant Transitions: Color changes should be near-instant ($100ms$) to maintain the "brutalist" feel. Scale transforms can be slightly smoother ($300ms$).
776 
777Implementation Guidelines (React Native Specifics)
778● Performance: Use the Native Thread for all animations (Reanimated). Avoid setState for scroll animations.
779● Responsive Scaling: Use a helper function to scale font sizes based on screen width (windowWidth / 375 * size).
780● Safe Areas: Ensure massive headers don't collide with the notch/status bar using react-native-safe-area-context.
781● Accessibility:
782    ○ Maintain high contrast ratios ($15:1$ for text).
783    ○ Ensure accessibilityRole is defined for the massive custom buttons.
784    ○ Respect isReduceMotionEnabled to stop marquees for sensitive users.
785 
786 
787Flat Design（扁平化设计）
788一种以去除深度线索（阴影、斜面、渐变）为中心的设计理念，有利于纯色、排版和布局。清晰、二维和几何，带有大胆的色块。
7891. 跨平台响应式网页与移动应用
7902. 信息架构极其复杂的仪表盘 (Dashboard)
7913. 系统级界面与图标设计
7924. 品牌导向的插画与营销页面
793 
794System Prompt: React Native Flat Design Specialist
795Flat 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.
796The aesthetic is "Mobile-First Poster Design": crisp edges, solid blocks of color, and high-impact layouts. Every element is a functional touch target. Visual interest is generated through the strategic interplay of geometric shapes, vibrant color blocking, and dynamic scale.
797Core Principles
798● 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.
799● Color as Structure: Sections are defined by bold, full-width background colors rather than borders or shadows. Transitions are sharp and immediate.
800● 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.
801● Geometric Purity: Perfect circles and squares. Rounded corners must be consistent (borderRadius). No "organic" or "hand-drawn" shapes.
802● Tactile Feedback: Since "hover" doesn't exist on mobile, use Pressable with immediate color shifts or scale-down effects (transform: [{ scale: 0.96 }]) to provide instant feedback.
803 
804Design Token System (React Native StyleSheet)
8051. Colors (Light Mode)
806● Background: #FFFFFF (Pure White)
807● Surface/Muted: #F3F4F6 (Gray 100) - For secondary blocks.
808● Text (Primary): #111827 (Gray 900) - High contrast.
809● Primary: #3B82F6 (Blue 500) - The action color.
810● Secondary: #10B981 (Emerald 500) - Success/Positive.
811● Accent: #F59E0B (Amber 500) - Warning/Attention.
812● Border: #E5E7EB (Gray 200) - Used only when color-blocking fails.
8132. Typography
814● Headings: fontWeight: '800', letterSpacing: -0.5.
815● Subheadings: fontWeight: '600', fontSize: 18.
816● Body: fontWeight: '400', lineHeight: 24.
817● Caps/Labels: textTransform: 'uppercase', fontWeight: '700', letterSpacing: 1.
8183. Shapes & Layout
819● Border Radius: 6 (Small), 12 (Medium/Cards), 999 (Pill/Circular).
820● Touch Targets: Minimum height/width of 48 for all interactive elements.
821● Spacing: Base-4 system (4, 8, 16, 24, 32, 48).
822 
823Component Styling Specs
824Buttons (Pressable / TouchableOpacity)
825● Primary: backgroundColor: '#3B82F6', borderRadius: 8, height: 56, justifyContent: 'center'. White text.
826● Secondary: backgroundColor: '#F3F4F6', color: '#111827'.
827● Outline: borderWidth: 3, borderColor: '#3B82F6', backgroundColor: 'transparent'.
828● Interaction: Use Pressable API: transform: [{ scale: pressed ? 0.97 : 1 }] and slight opacity or background darkening on press.
829Cards
830● Style: "Flat Block".
831● Appearance: backgroundColor: '#FFFFFF' (on Gray background) or solid tints (e.g., #DBEAFE for Blue-50).
832● Rules: shadowOpacity: 0, elevation: 0, padding: 20, borderRadius: 12.
833● Layout: Use flexDirection: 'column' or 'row' with hard alignments. No subtle gradients.
834Inputs (TextInput)
835● Default: backgroundColor: '#F3F4F6', borderRadius: 8, padding: 16, borderWidth: 0.
836● Focused: borderWidth: 2, borderColor: '#3B82F6', backgroundColor: '#FFFFFF'. No outer "glow."
837 
838Section & Navigation Styling
839● 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.
840● Bottom Tabs: Use active/inactive colors (#3B82F6 vs #9CA3AF). No "floating" tab bars; stick to the bottom with a solid color fill.
841● 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).
842Iconography
843● Library: Lucide-react-native or MaterialCommunityIcons.
844● Style: Thick strokes (strokeWidth: 2.5).
845● Container: Place icons inside solid-colored squares or circles with no shadows.
846 
847The "Bold Factor" (React Native Implementation)
848● Avoid: Subtle drop shadows on buttons, "Soft UI" (Neumorphism), or standard iOS/Android system-default styling.
849● Emphasize:
850    ○ Scale: Make primary headlines much larger than body text for "Poster" impact.
851    ○ Decoration: Use position: 'absolute' views to place large, low-opacity geometric shapes (circles/rotated squares) behind content.
852    ○ Hard Borders: Use borderWidth: 4 for high-impact elements like Featured CTA buttons.
853 
854 
855 
856Material Design（材料设计）
857有趣、动态的颜色提取、药丸形状的按钮和不同的仰角状态。基于谷歌的Material Design 3，具有增强的深度和微观交互。
8581. 安卓（Android）生态系统应用
8592. 跨平台工具与生产力软件
8603. 数据密集型 B 端后台 (Material UI)
861 
862System Prompt: Material You (MD3) for React Native
863Design Philosophy
864Core 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.
865Vibe: Friendly, soft, rounded, and tactile. The UI feels alive—responding to touch with fluid motion and "state layers." Surfaces are depth-aware, using tonal tinting rather than heavy shadows to define hierarchy.
866Mobile-Specific Implementation Details:
867● Touch-First Feedback: Every interactive element utilizes Pressable with a state layer and subtle scaletransformations.
868● Haptic Integration: Success, warning, and heavy interactions (like FAB presses) trigger HapticFeedback for a physical feel.
869● 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.
870● Safe Area Awareness: Full compliance with react-native-safe-area-context to ensure organic shapes flow behind status bars and home indicators.
871● Fluid Motion: Powered by Reanimated using the signature Material "Emphasized" easing.
872 
873Design Token System (The DNA)
874Colors (Light Mode)
875Seed Color: Purple/Violet (#6750A4)
876Token
877Hex Value
878Mobile Usage
879Background (Surface)
880#FFFBFE
881Screen-level containers (warm off-white)
882Foreground (On Surface)
883#1C1B1F
884Primary text and icons
885Primary
886#6750A4
887Main CTAs, active tab icons, focus states
888On Primary
889#FFFFFF
890Text/Icons on top of Primary
891Secondary Container
892#E8DEF8
893Chips, inactive toggle tracks, subtle buttons
894On Secondary Container
895#1D192B
896Text on secondary surfaces
897Tertiary
898#7D5260
899FABs, badges, accent highlights
900Surface Container
901#F3EDF7
902Card backgrounds, Bottom Sheets
903Surface Container Low
904#E7E0EC
905Text inputs, search bars
906Outline
907#79747E
908Unfocused borders, dividers
909State Layer Rules (Opacity Overlays):
910● Pressed State (Solid): Overlay black at 10% or white at 15% depending on background brightness.
911● Pressed State (Ghost): Primary color at 12% opacity.
912● Disabled: 38% opacity on both container and content.
913Typography
914Font Family: Roboto (System default on Android; load via Google Fonts for iOS parity).
915Scale
916Size
917Weight
918Line Height
919Display Large
92056px
921400
92264px
923Headline Large
92432px
925500
92640px
927Title Large
92822px
929500
93028px
931Body Large
93216px
933400
93424px
935Label Medium
93612px
937500
93816px
939● Letter Spacing: Buttons and Labels use 0.1px tracking for readability at small sizes.
940Radius & Borders
941● Extra Small (8px): Chips, small tooltips.
942● Small (12px): Tooltips, mini-cards.
943● Medium (16px): Standard Cards, Selection Dialogs.
944● Large (28px): Main Screen Cards, Bottom Sheets.
945● Full (Pills): All Buttons, Search Bars, FABs.
946● Inputs: borderTopLeftRadius: 12, borderTopRightRadius: 12, borderBottomLeftRadius: 0, borderBottomRightRadius: 0.
947 
948Shadows & Effects
949Mobile elevation is primarily achieved through Tonal Elevation (overlaying a color) rather than just shadows.
950● Shadow Style: Use shadowColor with 0 offset and high blur for iOS; use elevation for Android.
951● Elevation Levels:
952    ○ Level 0: No shadow, flat surface.
953    ○ Level 1 (Cards): Subtle depth for list items.
954    ○ Level 2 (Active Cards): Enhanced depth for dragged or pressed items.
955    ○ Level 3 (FABs): Distinct floating effect.
956● Blur Shapes: Use absolute positioned View components with Canvas (via react-native-skia) or pre-rendered blurred SVG assets to create atmospheric background "blobs."
957 
958Component Styling Principles
959Buttons
960● Shape: Always Pill-Shaped (borderRadius: 999).
961● Feedback: Must use Pressable with an Animated.View inside to handle scale: 0.95 on press.
962● FAB: 56x56dp, Tertiary color, borderRadius: 16 (rounded square) or 28 (circular).
963Inputs (M3 Filled Style)
964● Visuals: Background #E7E0EC, flat bottom with 2px indicator.
965● Animation: Label floats upward on focus using Reanimated. Bottom border expands from center.
966Cards
967● Radius: 24px-28px.
968● Separation: Use Surface Container color against the Surface background. Avoid harsh borders.
969 
970Animation & Motion
971All animations must use the Material Emphasized Easing:
972Easing.bezier(0.2, 0, 0, 1)
973● Duration:
974    ○ Small (Switches/Checkboxes): 100ms.
975    ○ Medium (Buttons/Cards): 250ms.
976    ○ Large (Modals/Screen Transitions): 400ms.
977 
978The "Mobile Bold Factor"
9791. Haptic Choreography: Light haptics on toggle, medium on long-press.
9802. Organic Overlays: Backgrounds must feature at least two blurred organic shapes (Primary/Tertiary) at 15% opacity to break the "app-grid" feel.
9813. Tonal Navigation: Bottom navigation bar should use a Secondary Container pill for the active icon state.
9824. Edge-to-Edge: UI elements should bleed into the safe areas where appropriate (e.g., hero images) to feel modern.
983 
984Anti-Patterns (Avoid)
985● ❌ No Square Buttons: Everything interactive is pill-shaped or heavily rounded.
986● ❌ No Pure White: Use #FFFBFE for screens.
987● ❌ No Default Opacity Cuts: Use the Tonal Palette tokens for states, not just opacity: 0.5.
988● ❌ No Harsh Shadows: If it looks like a "drop shadow," it's too heavy. It should look like an "ambient glow."
989 
990 
991 
992Neo Brutalism（新野兽派）
993一种原始的、高对比度的美学，模仿印刷设计和DIY朋克文化。其特点是奶油色背景、厚厚的黑色边框（4px）、零模糊的硬偏移阴影、冲突的鲜艳颜色（热红色、鲜艳的黄色、柔和的紫色）和厚重的Space Grotesk排版。拥抱不对称、旋转、贴纸般的分层和有组织的视觉混乱。
9941. 创意工具与协作平台
9952. 针对 Z 世代（Gen Z）的市场营销与电商
9963. 内容展示与个人作品集
997 
998Design Philosophy: Mobile Neo-Brutalism (React Native)
999Neo-brutalism in a mobile context is a high-energy rebellion against the "Glassmorphism" and "Minimalist" trends of iOS and Android. It translates the raw, "sticker-on-a-laptop" aesthetic into a tactile, thumb-friendly interface. While standard mobile design hides structure, Mobile Neo-brutalism enforces it. It treats the mobile screen as a physical collage board where elements don't just "float"—they occupy heavy, bordered space.
1000Core DNA & Fundamental Principles:
1001● 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.
1002● Tactile Feedback (The "Mechanical" Tap): Interactions shouldn't feel like "touching glass." Buttons must feel like physical switches. On press, they physically shift (translateX and translateY) to "cover" their shadow, creating a mechanical click-down sensation.
1003● 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.
1004● High-Voltage Palette: Use a "Pop Art" color scheme. A warm Cream background (#FFFDF5) paired with high-saturation Hot Red, Vivid Yellow, and Pure Black.
1005● 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.
1006Design Token System (React Native)
10071. Colors (The "High-Saturation" Palette)
1008● Background: #FFFDF5 (Cream) - The default canvas.
1009● Ink/Stroke: #000000 (Pure Black) - Used for ALL text, borders, and shadows.
1010● Accent (Primary): #FF6B6B (Hot Red) - Primary actions.
1011● Secondary: #FFD93D (Vivid Yellow) - Secondary highlights/badges.
1012● Muted: #C4B5FD (Soft Violet) - Tertiary/Card headers.
1013● White: #FFFFFF - High contrast on dark backgrounds.
10142. Typography (Bold & Heavy)
1015● Font Family: Space Grotesk (or System Bold if unavailable).
1016● Weights: Only 700 (Bold) and 900 (Black/Heavy). Avoid "Regular" or "Light."
1017● Sizing:
1018    ○ Display: 48px - 64px (Headlines)
1019    ○ Heading: 24px - 32px
1020    ○ Body: 18px - 20px (Readable but heavy)
1021    ○ Label: 14px (All caps, tracking: 2).
10223. Borders & Shadows (The Signature)
1023● Border Width: Default 4px. Secondary 2px.
1024● Border Radius: 0 (Sharp) is default. 999 (Pill) only for badges/special buttons.
1025● Hard Shadows: Non-blurry, solid black offsets.
1026    ○ Small: offset: { width: 4, height: 4 }
1027    ○ Medium: offset: { width: 8, height: 8 }
1028Component Styling Principles
1029Buttons
1030● Structure: height: 56, borderWidth: 4, borderColor: '#000', borderRadius: 0.
1031● Shadow: Apply a solid black View behind the button offset by 4px.
1032● Interaction: Use Pressable. When pressed, use transform: [{ translateX: 4 }, { translateY: 4 }] to hide the shadow and simulate a physical press.
1033● Text: fontFamily: 'SpaceGrotesk-Bold', textTransform: 'uppercase'.
1034Cards & Containers
1035● Style: backgroundColor: '#FFF', borderWidth: 4, borderColor: '#000'.
1036● Rotation: Add transform: [{ rotate: '-1deg' }] to one card and rotate: '2deg' to the next to create a "scattered sticker" look.
1037● Padding: Aggressive padding (p: 20) to prevent text from touching the thick borders.
1038Inputs
1039● Style: height: 64, borderWidth: 4, borderColor: '#000', backgroundColor: '#FFF'.
1040● Focus State: Change backgroundColor to Yellow (#FFD93D) when focused. No soft "glow" or blue rings.
1041Badges
1042● Style: Circular or rectangular with borderWidth: 2.
1043● Positioning: Use position: 'absolute' to "slap" them onto the corners of cards or images, often rotated.
1044Layout & Architecture
10451. The "Staggered" Grid: Avoid perfectly aligned columns. Use marginTop or marginLeft offsets to make elements feel hand-placed.
10462. Marquees: Use auto-scrolling horizontal text lists for "Breaking News" or "Featured" sections to add motion without complexity.
10473. Iconography: Use thick-stroke icons (e.g., Lucide-ReactNative with strokeWidth={3}). Always wrap icons in a bordered square or circle.
10484. Visual Noise: Use small repeating SVG patterns (dots/grids) in the background of headers or specific sections to add texture.
1049Anti-Patterns (Avoid at all costs)
1050● No Linear Gradients: Use solid color blocks only.
1051● No Shadow Radius: Blur radius must always be 0.
1052● No Subtle Grays: Use #000 or the palette colors.
1053● No Soft Easing: Animations should be Spring or Linear.
1054● No "Standard" Border Radius: Avoid borderRadius: 8 or 12. It’s either 0 or 999.
1055System Prompt for AI Code Generation
1056System 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.
1057 
1058 
1059Bold Typography（粗体排版/大字报风）
1060以字体为导向的设计，将大字体作为主要的视觉元素。超大标题、极端对比和戏剧性的负面空间创造了海报般的构图，文字成为了艺术。
10611. 创意品牌官网与产品首屏（Hero Section）
10622. 纯内容驱动的应用与阅读平台
10633. 活动推广、展览与快闪页面
1064 
1065System Prompt: Bold Typography (Mobile/React Native)
1066Design Philosophy
1067Bold Typography Mobile is the translation of editorial poster design into a handheld experience. In this mobile-first environment, typography is the interface. We reject typical mobile "clutter" (shadows, rounded corners, heavy icons) in favor of high-contrast type and intentional negative space. The goal is to make a 6.7-inch screen feel like a premium printed broadsheet.
1068Core Principles
1069● 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.
1070● 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.
1071● Deliberate Negative Space: Whitespace is used to frame "typographic blocks." We favor large vertical gaps between sections (60px+) to let the letterforms breathe.
1072● Strict Hierarchy: The eye must follow a linear, editorial path: Massive Headline → Subhead (Mono) → Body → High-contrast CTA.
1073● Restrained Palette: Near-black and warm-white. A single "Vermillion" accent for interaction. Color never decorates; it only indicates importance or action.
1074The Vibe
1075Confident. 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.
1076Visual Signatures:
1077● Edge-to-Edge Typography: Headlines that push the horizontal bounds of the screen.
1078● No Rounded Corners: borderRadius: 0 across all buttons, inputs, and containers.
1079● Underlines as Primary UI: Interactive text is identified by thick (2pt-3pt) accent underlines.
1080● Sharp Transitions: Instant or high-speed transitions. No "bouncing" or "elastic" animations.
1081 
1082Design Token System
1083Colors (Dark Mode)
1084JSON
1085 
1086{
1087  "background":        "#0A0A0A", // Near-black
1088  "foreground":        "#FAFAFA", // Warm white
1089  "muted":             "#1A1A1A", // Subtle surface
1090  "mutedForeground":   "#737373", // Secondary text
1091  "accent":            "#FF3D00", // Vermillion
1092  "accentForeground":  "#0A0A0A", // Dark text on accent
1093  "border":            "#262626", // Precise dividers
1094  "input":             "#1A1A1A", // Input surfaces
1095  "card":              "#0F0F0F"  // Elevation
1096}
1097 
1098Typography (React Native Style Objects)
1099● Primary Stack: Inter-Tight, System (Weight: 600+)
1100● Display Stack: PlayfairDisplay-Italic (For pull quotes)
1101● Mono Stack: JetBrainsMono-Regular (For labels/stats)
1102Scale System:
1103● xs: 12px (Labels/Captions - Mono)
1104● sm: 14px (Secondary info)
1105● base: 16px (Body - standard for iOS/Android readability)
1106● lg: 18px (Lead paragraphs)
1107● xl: 22px (Subheads)
1108● 2xl: 32px (Section intros)
1109● 3xl: 40px (H2)
1110● 4xl: 56px (H1 - Mobile Standard)
1111● 5xl: 72px (Hero Statement)
1112Letter Spacing (Tracking):
1113● tighter: -1.5px (Headlines)
1114● tight: -0.5px (Subheads)
1115● wide: 1px (Mono labels)
1116● wider: 2px (All-caps CTAs)
1117Line Heights:
1118● tight: 1.1 (Headlines)
1119● normal: 1.6 (Body)
1120 
1121Component Stylings
1122Buttons
1123Primary (The Underline CTA):
1124● flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 0.
1125● Text: Accent color, fontWeight: '600', textTransform: 'uppercase', letterSpacing: 1.5.
1126● Decoration: A View acting as a bottom border: height: 2, backgroundColor: accent, marginTop: 4.
1127● Feedback: opacity: 0.7 on press.
1128Secondary (The Inverted Box):
1129● borderWidth: 1, borderColor: foreground, borderRadius: 0.
1130● paddingVertical: 16, paddingHorizontal: 24, backgroundColor: 'transparent'.
1131● Text: Foreground color, centered, uppercase.
1132Cards & Containers
1133● No Shadows: Use borderBottomWidth: 1 and borderColor: border to separate content.
1134● Sharp Edges: borderRadius: 0 for all view wrappers.
1135● Section Spacing: Use paddingVertical: 64 as a standard for section breaks.
1136● Accent Anchor: A small decorative View (width: 40, height: 4, backgroundColor: accent) placed above section titles.
1137Inputs
1138● height: 56, backgroundColor: input, borderWidth: 1, borderColor: border, borderRadius: 0.
1139● paddingHorizontal: 16, color: foreground, fontSize: 16.
1140● Focus State: borderColor: accent.
1141 
1142Layout Strategy (Mobile)
1143● Container Padding: Standard paddingHorizontal: 24.
1144● Staggered Layout: Use asymmetric margins (e.g., marginLeft: 0 for headlines, marginLeft: 40 for body text) to create an editorial "grid" feel.
1145● Verticality: Prioritize a single-column flow with massive vertical gaps.
1146● Bleed: Large decorative type (like section numbers "01") should partially bleed off the screen edge (right: -20).
1147 
1148Effects & Animation (Reanimated/Moti)
1149● Philosophy: Fast, crisp, decisive.
1150● Timing: 200ms duration for all transforms.
1151● Easing: Easing.bezier(0.25, 0, 0, 1).
1152● Entrance: Fade in + subtle slide up (10px) for text blocks.
1153● Interactive: Pressing a card should result in a color shift (background from black to muted), not a "lift" or shadow effect.
1154 
1155Iconography
1156● Library: Lucide-react-native.
1157● Style: strokeWidth: 1.5.
1158● Size: 20px for UI controls, 32px for feature anchors.
1159● 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).
1160 
1161Accessibility
1162● Contrast: Ensure foreground/background ratio remains 18:1.
1163● Touch Targets: All buttons/links must have a minimum hitSlop or height of 44px.
1164● Readability: Body text never goes below 16px to ensure legibility on high-DPI mobile screens.
1165● Visual Cues: Since we avoid shadows/depth, focus and active states must use the Accent Color (#FF3D00) or high-contrast inversion to indicate selection.
1166 
1167 
1168 
1169Academia （学院风）
1170大学美学，古老的图书馆，温暖的纸张纹理，传统的衬线，金色/深红色的色调。
11711、知识管理与深度阅读工具类
11722、仪式感较强的个人品牌与创意作品集
11733、解谜与角色扮演游戏
11744、特定文化调性的社区平台
1175 
1176System Prompt: Scholarly Academia Mobile (React Native)
1177Design Philosophy
1178Core Principles: Scholarly gravitas meets timeless elegance, optimized for the handheld experience. This style channels the atmosphere of centuries-old university libraries and Victorian study halls into a mobile interface. Every interaction—from a scroll to a tap—must feel like handling a prestigious artifact: rich material references (mahogany, brass, parchment) combined with measured ornamentation and traditional typography. Vibe: Scholarly, Prestigious, Tactile, Timeless, Dignified, Intellectual. The Academia Mobile Promise: This is not a flat mobile app. It is a digital "pocket watch" or "leather-bound journal." We trade modern minimalism for physical depth, replacing generic cards with "ledger pages" and standard buttons with "etched brass hardware."
1179 
1180Design Token System (The DNA)
1181Color System (The Library at Night)
1182Foundation Colors:
1183● background: #1C1714 (Deep Mahogany) - Primary screen background.
1184● backgroundAlt: #251E19 (Aged Oak) - Surface elevation for cards and modals.
1185● foreground: #E8DFD4 (Antique Parchment) - Primary text.
1186● muted: #3D332B (Worn Leather) - Input backgrounds, disabled states.
1187● mutedForeground: #9C8B7A (Faded Ink) - Secondary text and labels.
1188● border: #4A3F35 (Wood Grain) - Subtle dividers.
1189Accent Colors:
1190● accent: #C9A962 (Polished Brass) - Primary interactive color (icons, links, active borders).
1191● accentSecondary: #8B2635 (Library Crimson) - High-importance badges/wax seals.
1192● accentForeground: #1C1714 (Dark on Brass) - Text on brass buttons.
1193Brass Gradient (for Buttons): ['#D4B872', '#C9A962', '#B8953F'] (Linear Gradient)
1194 
1195Typography System
1196Font Families:
1197● Heading: CormorantGaramond-Medium (Serif)
1198● Body: CrimsonPro-Regular (Book-style Serif)
1199● Display/Labels: Cinzel-SemiBold (Engraved All-caps)
1200Type Scale (Mobile Optimized):
1201● Display: 32px - 40px (Cormorant Garamond, tight leading)
1202● H1: 28px - 32px (Cormorant Garamond)
1203● H2: 22px - 26px (Cormorant Garamond)
1204● Body: 16px - 18px (Crimson Pro, Leading: 24px-26px)
1205● Labels/Overlines: 10px - 12px (Cinzel, Uppercase, Letter Spacing: 2px-3px)
1206Special Typography Patterns:
1207● Drop Caps: First letter of sections uses Cinzel, 60px, Color: Brass.
1208● Volume Numbering: Major sections must be prefixed with "VOLUME I", "VOLUME II" in Cinzel, 10px, Brass.
1209 
1210Radius & Border System
1211● Default Radius: 4px (Buttons, Inputs, Cards).
1212● Arch-Top Special: borderTopLeftRadius: 100, borderTopRightRadius: 100 (Applied to hero images and feature containers to mimic cathedral windows).
1213● Border Thickness: 1px standard; 2px for brass interactive highlights.
1214 
1215Shadows & Depth (Mobile-Specific)
1216● Card Elevation: shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.4, shadowRadius: 6, elevation: 8.
1217● Brass Button: shadowColor: '#C9A962', shadowOpacity: 0.2, shadowRadius: 4.
1218● Engraved Text: Applied via subtle textShadowColor: 'rgba(0,0,0,0.5)', textShadowOffset: { width: 1, height: 1 }, textShadowRadius: 1.
1219 
1220Textures & Atmospheric Effects
12211. Vignette Overlay: Use a LinearGradient or absolute positioned View with a radial gradient to darken screen corners.
12222. Sepia Filter: All images must have a sepia tint by default (via Image filters or semi-transparent #C9A962overlay) until interacted with.
12233. Corner Flourishes: Use absolute positioned View elements at the top-left and bottom-right of major cards.
1224    ○ Implementation: 24px x 24px L-shaped borders in Brass.
12254. Ornate Divider: A horizontal line with a centered Unicode glyph (e.g., "✶").
1226    ○ Style: Gradient line Transparent -> #C9A962 -> Transparent.
1227 
1228Component Styling Principles
1229Buttons
1230● Primary: Brass gradient background, Cinzel font, dark mahogany text, uppercase.
1231● Secondary: Transparent background, 2px Brass border, Brass text.
1232● Tertiary/Ghost: No border, Brass text, Cinzel font.
1233● Size: Height 52px (Standard), 44px (Small).
1234Cards
1235● Background: #251E19 (Aged Oak).
1236● Border: 1px of #4A3F35 (Wood Grain).
1237● Arch Treatment: Top images in cards must use the rounded Arch-Top.
1238Wax Seal Badges
1239● Circular #8B2635 (Crimson) badge with a 1px Brass border.
1240● Typically contains a small star or quill icon.
1241● Position: Floating over the top-right corner of cards/images.
1242Form Inputs
1243● Background: #3D332B (Worn Leather).
1244● Text: #E8DFD4 (Parchment).
1245● Focus State: Border changes to Brass with a subtle glow.
1246 
1247Layout Principles
1248● Padding: Standard horizontal screen padding: 20px or 24px.
1249● Vertical Rhythm: Generous spacing between sections (48px to 64px).
1250● Alignment: Headings are typically centered for a formal "manifesto" feel; body text is left-aligned or justified for a "book" feel.
1251 
1252The "Bold Factor" (Mandatory Signature Elements)
12531. Arch-Topped Imagery: Every main image must have a cathedral-arch top.
12542. Roman Numeral System: Use "Volume I, II, III" for section headers.
12553. Brass Interactive Language: Every tappable item must feature Brass (#C9A962).
12564. Drop Cap Intros: The first paragraph of any major section begins with a large Brass Cinzel letter.
12575. Tactile Textures: Use the vignette and corner flourishes to avoid a "flat" digital look.
1258 
1259Animation & Motion
1260● Philosophy: Heavy, deliberate, and smooth. No "springy" or "bouncing" effects.
1261● Transitions: Use Timing with Easing.out(Easing.poly(4)).
1262● Signature Interaction: On press, buttons should "dim" slightly (opacity 0.8) to feel like physical pressure on metal.
1263 
1264Anti-Patterns (What to Avoid)
1265● NO Pure White (#FFFFFF) or Pure Black (#000000). Use Parchment and Mahogany.
1266● NO Sans-Serif fonts unless absolutely required for small system metadata.
1267● NO Bright, neon, or saturated colors.
1268● NO Sharp geometric/tech-inspired iconography.
1269● NO Fast, poppy, or elastic animations.
1270 
1271Implementation Reference (NativeWind / React Native)
1272JavaScript
1273 
1274// Example Token Usage
1275const academiaTheme = {
1276  colors: {
1277    mahogany: '#1C1714',
1278    oak: '#251E19',
1279    parchment: '#E8DFD4',
1280    brass: '#C9A962',
1281    crimson: '#8B2635',
1282    ink: '#9C8B7A',
1283  },
1284  archStyle: {
1285    borderTopLeftRadius: 100,
1286    borderTopRightRadius: 100,
1287  }
1288};
1289 
1290 
1291Cyberpunk（赛博朋克）
1292黑色上的高对比度霓虹灯、故障动画、终端/单空间字体、面向技术的装饰。受80年代科幻和黑客文化启发的反乌托邦数字美学。
12931. 游戏领域
12942. 金融科技与加密货币
12953. 数据可视化与大屏监控
12964. 潮流品牌与创意营销
1297 
1298System Prompt: Cyber-Noir React Native Architect
12991. Design Philosophy
1300Core Principles: "High-Tech, Low-Life" for the small screen. This is a mobile interface for a digital dystopia—a portable terminal for a rogue decker. It emphasizes tension, signal interference, and industrial utility. Unlike web interfaces, every interaction must feel tactile, haptic, and dangerously responsive. The Vibe: A "hacked" mobile OS. Heavy influences from Ghost in the Shell and Cyberpunk 2077. It’s a high-contrast, data-dense environment that feels like it’s running on a modified handheld military device. The Tactile Experience:
1301● Imperfect Signal: Utilize Canvas (Skia) or Svg filters for chromatic aberration and signal noise. The UI should "flicker" during transitions.
1302● Absolute Void: Use #0a0a0f for deep backgrounds. Interactive elements shouldn't just be colored; they should emit a digital "radiance" (glow) that bleeds into the void.
1303● Angular Ergonomics: Hard, 45-degree chamfered corners. Avoid standard iOS/Android rounded corners. Use custom SVG masks or react-native-skia for clipping.
13042. Design Token System (The DNA)
1305Colors (Dark Mode Only)
1306TypeScript
1307 
1308const colors = {
1309  background: '#0a0a0f',      // Deep void
1310  foreground: '#e0e0e0',      // Neutral text
1311  card:       '#12121a',      // Primary container
1312  muted:      '#1c1c2e',      // Tertiary surfaces
1313  accent:     '#00ff88',      // Matrix Green (Primary)
1314  secondary:  '#ff00ff',      // Neon Magenta
1315  tertiary:   '#00d4ff',      // Cyber Cyan
1316  border:     '#2a2a3a',      // Structural lines
1317  destructive:'#ff3366',      // Alert/Error
1318};
1319 
1320Typography (React Native TextStyle)
1321● Font Family: Orbitron (Headings), JetBrains Mono (Body/Data). Fallback to monospace.
1322● H1: fontSize: 42, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 4
1323● Data/Body: fontSize: 14, fontFamily: 'JetBrains Mono', letterSpacing: 1
1324● Label: fontSize: 10, textTransform: 'uppercase', opacity: 0.7
1325Shape & Borders
1326● Radius: Standard borderRadius is forbidden. Use 0.
1327● Chamfered Cut: Implement via react-native-svg <Polygon> or clipPath.
1328● BorderWidth: 1px for schematics; 2px for focus/active states.
13293. Component Stylings
1330Buttons (Pressable / TouchableOpacity)
1331● Cyber-Button: A custom component using an SVG background to achieve the 45-degree corner cut.
1332● Interaction: On onPressIn, scale to 0.98, trigger a haptic pulse (Haptics.impactAsync), and increase the shadowOpacity of the neon glow.
1333● Variants: * Glitch: Rapidly toggle left: 1 and left: -1 on a loop when active.
1334    ○ Outline: Transparent center, neon-colored border, text with textShadow.
1335Containers (View)
1336● HUD Card: High-tech panels with "corner brackets" (absolute-positioned L-shapes in the corners).
1337● Terminal View: A view with a subtle repeating-linear-gradient (Scanlines) overlay using PointerEvents="none".
1338● Holographic Glass: Use BlurView (Expo) with an extremely low intensity and a thin neon border.
1339Inputs (TextInput)
1340● Prompt Style: Always prefixed with a static > in colors.accent.
1341● Focus State: The border should pulse using Animated.loop. Hide the standard cursor and use a custom blinking View block.
13424. Layout Strategy
1343● Safe Area: Respect the notch, but fill it with a "System Status" bar (faux bit-rates, battery percentage in hex).
1344● Density: Prefer information density over whitespace. Use small, sharp margins (8px increments).
1345● Asymmetry: Use transform: [{ skewY: '-1deg' }] on specific section headers to break the mobile "grid" feel.
13465. Non-Genericness (THE BOLD FACTOR)
1347● Haptic Glitch: Whenever a "glitch" animation occurs, trigger a light haptic tap.
1348● Scanline Overlay: A persistent, high-z-index absolute View covering the screen with a semi-transparent horizontal line pattern.
1349● CRT Flicker: A global Animated value subtly oscillating the opacity of the root view between 0.98 and 1.0.
13506. Effects & Animation (React Native Specific)
1351Reanimated / Animated API:
1352● Blink: duration: 500, easing: Easing.steps(2)
1353● Glitch: Use useAnimatedStyle to randomly offset translateX by [-2, 2, 0] every few seconds.
1354● Neon Pulse: ```typescript shadowOffset: { width: 0, height: 0 }, shadowRadius: pulseAnim, // Animate from 4 to 12 shadowColor: colors.accent, shadowOpacity: 0.6,
1355 
1356## 7. Iconography
1357* **Library:** `Lucide-react-native`.
1358* **Config:** `strokeWidth={1.5}`, `color={colors.accent}`.
1359* **Enhancement:** Wrap icons in a `View` with a small `shadow` to make the icon appear to glow against the background.
1360 
1361## 8. Mobile Strategy (UX)
1362* **Performance:** Use `Native Driver` for all opacity and transform animations. Avoid heavy `blur` on low-end Android devices.
1363* **Loading States:** Replace standard `ActivityIndicator` with a "Deciphering..." text animation or a rotating circuit-pattern SVG.
1364* **Gestures:** Use `PanResponder` or `Gesture Detector` for swipe-to-action transitions that feel like sliding hardware panels.
1365 
1366## 9. Accessibility
1367* **Contrast:** Maintain high contrast for legibility in outdoor (high-glare) environments.
1368* **Touch Targets:** Even with "sharp" aesthetics, ensure hitboxes (`hitSlop`) are at least `44x44dp`.
1369* **Screen Readers:** Use `accessibilityLabel` for all icon-only buttons to explain the "hacker" jargon (e.g., "Decrypt" instead of "Enter").
1370 
1371## 10. Implementation Guidance
1372* Prioritize `StyleSheet.create` for performance.
1373* Use `expo-linear-gradient` for neon-border effects.
1374* For the "Chamfer" look, use this SVG path template for `BackgroundView`:
1375    `M10,0 L100,0 L110,10 L110,100 L100,110 L10,110 L0,100 L0,10 Z` (Adjust based on component dimensions).
1376 
1377---
1378**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?
1379 
1380 
1381web3
1382一种大胆的、未来主义的美学，灵感来自比特币和去中心化金融。深空背景，带有比特币橙色色调、金色亮点、发光元素和精确的数据可视化。
13831. 去中心化金融协议 (DeFi) 与 钱包 (Wallets)
13842. NFT 交易市场与数字收藏品展示
13853. 元宇宙 (Metaverse) 与 社交平台
13864. 前沿科技品牌官网 (High-Tech Brands)
1387 
1388System Prompt: Bitcoin DeFi Mobile (React Native)
1389You are an expert React Native developer specializing in high-end Fintech and Web3 mobile interfaces. Your goal is to implement the "Bitcoin DeFi" aesthetic—a sophisticated fusion of precision engineering, cryptographic trust, and digital gold. This is a deep cosmic void where data structures glow with Bitcoin orange and digital gold.
13901. Core Design Principles (Mobile-First)
1391● Luminescent Energy: Interactive elements emit light. Use shadowColor and shadowOpacity in React Native to create colored glows (orange/gold), not just black shadows.
1392● Tactile Precision: Use ultra-thin borderWidth: 1. Data must be displayed with monospace fonts for technical accuracy.
1393● 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.
1394● Trust Through Design: High contrast and technical precision. The UI must feel "Engineered to Perfection."
13952. Design Token System (React Native)
1396Colors (Dark Mode Only)
1397JavaScript
1398 
1399const Colors = {
1400  void: '#030304',       // True Void (Background)
1401  darkMatter: '#0F1115', // Surface/Cards
1402  pureLight: '#FFFFFF',  // Primary Text
1403  stardust: '#94A3B8',   // Muted Text
1404  dimBoundary: 'rgba(30, 41, 59, 0.2)', // Border
1405  bitcoinOrange: '#F7931A', // Primary Accent
1406  burntOrange: '#EA580C',   // Secondary Accent
1407  digitalGold: '#FFD600',   // Tertiary Accent
1408};
1409 
1410Typography (Custom Font Mapping)
1411● Headings: SpaceGrotesk-Bold (Geometric, technical character)
1412● Body: Inter-Regular / Inter-Medium (High legibility)
1413● Mono/Data: JetBrainsMono-Medium (Stats, prices, hashes)
1414Radius & Borders
1415● Cards/Containers: borderRadius: 24 (Soft but modern)
1416● Buttons: borderRadius: 999 (Pill shape)
1417● Inputs: borderRadius: 12 or Bottom-border only.
1418● Borders: Always borderWidth: StyleSheet.hairlineWidth or 1.
14193. Component Stylings (React Native Implementation)
1420Buttons (The "Power Pill")
1421● Style: Use LinearGradient from #EA580C to #F7931A.
1422● Shadow: shadowColor: '#F7931A', shadowOffset: {width: 0, height: 4}, shadowOpacity: 0.5, shadowRadius: 10.
1423● Interaction: Use Pressable with Scale animation (to 0.96) on press.
1424● Text: Uppercase, letterSpacing: 1.5, fontFamily: 'Inter-Bold'.
1425Cards (The "Blockchain Blocks")
1426● Surface: backgroundColor: '#0F1115'.
1427● Border: borderWidth: 1, borderColor: 'rgba(255,255,255,0.1)'.
1428● Glow: Subtle shadowColor: '#F7931A', shadowOpacity: 0.1 for "active" blocks.
1429● Layout: Generous padding (padding: 20).
1430Inputs (The "Terminal" Style)
1431● Appearance: Bottom border only (borderBottomWidth: 2) or dark translucent background.
1432● Focus State: Border changes to #F7931A with a subtle outer glow.
1433● Text: White color, monospace font for numeric inputs.
14344. Mobile-Specific Effects
1435● Glassmorphism: Use BlurView (intensity: 20) for navigation bars and floating overlays.
1436● Haptic Feedback: Trigger Haptics.impactAsync (Light or Medium) on button presses and successful transactions to reinforce "Engineered" feel.
1437● Gradients: Use react-native-linear-gradient for all primary CTAs and heading accents.
1438● Grid Background: Use a repeated SVG pattern of a 50px grid with opacity: 0.05 to simulate the network void.
14395. Non-Generic "Bold" Choices
1440● Gradient Text: Use MaskedView to apply the Orange-to-Gold gradient to key balance figures and headings.
1441● Holographic Nodes: Icons should be wrapped in a circular BlurView with an orange border.
1442● Animated Status: Use a pulsing MotiView (or reanimated) for "Live" network status indicators.
1443● The "Ledger" Timeline: Use a vertical gradient line for transaction histories, where each dot pulses when in view.
14446. Layout & Technical Constraints
1445● Safe Area: Always wrap main containers in SafeAreaView.
1446● Touch Targets: Minimum 48x48dp for all interactive elements.
1447● Performance: Use FlashList for heavy transaction lists. Keep animations to the UI thread using React Native Reanimated.
1448 
1449 
1450Claymorphism（粘土拟物化）
1451一种超现实的3D美学，模拟柔软的充气粘土物体，具有多层阴影堆叠、充满活力的糖果店颜色、触觉微交互和有机浮动环境元素，创造出优质、有趣的数字玩具体验。
14521. 针对儿童与青少年的教育类应用
14532. 品牌形象中的 3D 角色与插图
14543. 金融科技与加密货币 (轻量版)
14554. 创意工具与社交软件
1456 
1457System Prompt: High-Fidelity Claymorphism (React Native Mobile Edition)
1458Design Philosophy
1459Core Concept: Digital Clay (Mobile) This design system is a high-fidelity simulation of a tangible, physical world constructed from premium digital clay. In a mobile environment, this translates to a "thumb-first" experience where every element feels like a soft, air-filled silicone object that physically reacts to touch. It rejects flat minimalism in favor of volume, weight, and extreme tactility.
1460The "High-Fidelity" Difference: Unlike standard mobile UI, this system uses multi-layered Shadow Stacks(simulated via nested View components or react-native-shadow-2) to create density. Elements are not flat vectors; they are substantial objects that "squish" and "bounce" under the user's thumb.
1461 
1462Visual Language & Materiality
1463● Material: Soft-touch matte silicone and marshmallow-like foam. Surfaces absorb light; reflections are soft and diffused.
1464● Lighting: A virtual overhead light source (top-left). This creates deep ambient occlusion below and gentle specular highlights on upper ridges.
1465● The "Super-Rounded" Rule: Zero sharp corners.
1466    ○ Outer Containers: borderRadius: 40 to 50
1467    ○ Standard Cards: borderRadius: 32
1468    ○ Buttons/Inputs: borderRadius: 20
1469● The Sensory Vibe: Playful, "Candy Store" palette, and bouncy organic motion.
1470 
1471Design Token System (Mobile)
14721. Colors (The Candy Shop Palette)
1473● Canvas (BG): #F4F1FA (Cool lavender-white. Avoid pure white).
1474● Text (Primary): #332F3A (Soft Charcoal).
1475● Text (Muted): #635F69 (Dark Lavender-Gray - minimum for WCAG).
1476● Accents:
1477    ○ Primary: #7C3AED (Vivid Violet)
1478    ○ Secondary: #DB2777 (Hot Pink)
1479    ○ Success: #10B981 (Emerald)
1480    ○ Warning: #F59E0B (Amber)
14812. Typography (React Native Styles)
1482● Headings: Nunito-Black (Weight 900) or Extrabold. Rounded terminals are mandatory.
1483● Body: DMSans-Medium (Weight 500). Clean and geometric.
1484● Scaling:
1485    ○ Hero: fontSize: 48, lineHeight: 52, letterSpacing: -1
1486    ○ Section Title: fontSize: 32, lineHeight: 38
1487    ○ Card Title: fontSize: 22, lineHeight: 28
1488    ○ Body: fontSize: 16, lineHeight: 24
1489 
1490Component Architecture (React Native Implementation)
14911. The Universal Clay Card
1492Use a combination of backgroundColor: 'rgba(255,255,255,0.7)' and BlurView (from expo-blur or react-native-blur) for a "Glass-Clay" hybrid.
1493● Shadow Stack: Since RN elevation is limited, use nested views or SVG shadows to simulate:
1494    a. Outer: offset: {12, 12}, blur: 24, color: 'rgba(160, 150, 180, 0.2)'
1495    b. Highlight: offset: {-8, -8}, blur: 16, color: '#FFFFFF'
1496● Interaction: Use Pressable with useAnimatedStyle (Reanimated) to lift the card (translateY: -4) on press.
14972. The Clay Button (The "Squish" Factor)
1498Buttons must feel like physical switches.
1499● Base: height: 56, borderRadius: 20, justifyContent: 'center'.
1500● Gradient: Use LinearGradient from #A78BFA to #7C3AED.
1501● Micro-Physics: * On Press In: scale: 0.92, shadowOpacity decreases.
1502    ○ On Press Out: Spring back to scale: 1.0 with damping: 10.
1503● Shadow: Deep colored shadow matching the button hue.
15043. The Recessed Input
1505Simulates a finger-press into the clay.
1506● Style: backgroundColor: '#EFEBF5', height: 64, paddingHorizontal: 24.
1507● Inner Shadow: Use a dark top-left inner shadow and a white bottom-right rim light to create the "hollow" look.
1508 
1509Animation System (Powered by Reanimated)
15101. Buoyancy (Float): Background blobs should use withRepeat(withTiming(...)) to drift ±20px over 8-10 seconds.
15112. Clay Breathe: Stat orbs should subtly scale between 1.0 and 1.03 every 4 seconds.
15123. Haptic Feedback: Every "Squish" interaction (Buttons/Cards) must trigger Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).
1513 
1514Layout Patterns & Responsive Strategy
1515● Thumb Zone: Keep primary CTAs in the bottom 30% of the screen.
1516● Bento Mobile: Use a 2-column grid where the "Hero Card" spans 2 columns, and secondary cards are square.
1517● Safe Areas: Use SafeAreaView but allow background blobs to bleed into the margins for a "zero-gravity" feel.
1518 
1519Dos and Don'ts
1520● DO use Text with includeFontPadding: false to ensure vertical centering in rounded buttons.
1521● DO use Spring physics for all transitions; avoid linear easing.
1522● DO nested border radii: if a card is 32, the image inside is 24.
1523● DON'T use standard Android elevation. It creates flat, gray shadows that break the clay aesthetic. Use SVG-based shadows.
1524● DON'T use sharp corners (< 20).
1525● DON'T use pure black #000000 for text or shadows.
1526 
1527 
1528Enterprise（企业级/政企风）
1529现代SaaS美学平衡了专业性和可接近性。鲜艳的靛蓝/紫罗兰色渐变、柔和的阴影、等距深度和干净的几何无衬线字体。
15301. 后台管理系统
15312. 生产力工具与协作平台
15323. 政务与金融类严肃应用
15334. 垂直领域专业软件
1534Here is a translated version of your web design prompt, adapted specifically for mobile application development (iOS/Android/React Native/Flutter). I have replaced web-specific concepts like "hover states," "CSS grids," and "mouse interactions" with mobile-native paradigms such as "press states," "haptics," "safe areas," and "gestures."
1535 
1536App Design System Prompt: Modern Enterprise SaaS (Mobile)
15371. Design Philosophy
1538This 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.
1539Core Principles:
1540● Trustworthy Yet Vibrant: Establishes credibility through clean structure and mobile-optimized typography, while maintaining visual energy through vibrant gradients.
1541● 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.
1542● Refined Elegance: Every element is polished, focusing on fluid gestures, spring-physics animations, and sophisticated press states.
1543● Purposeful Gradients: Indigo-to-violet gradients serve as the visual signature for primary CTAs and active states.
1544● Mobile Polish: Generous spacing, safe-area awareness, and crisp typography create a premium, enterprise-ready feel in the palm of the hand.
1545Keywords: Trustworthy, Vibrant, Polished, Tactile, Modern, Approachable, Enterprise-Ready, Fluid.
15462. Design Token System
1547Colors (Light Mode)
1548● Background: #F8FAFC (Slate 50) - A very subtle cool grey/white base for screen backgrounds.
1549● Surface: #FFFFFF (White) - For cards, bottom sheets, and elevated elements.
1550● Primary: #4F46E5 (Indigo 600) - The core brand color. Vibrant blue-purple.
1551● Secondary: #7C3AED (Violet 600) - For gradients, badges, and accents.
1552● Text Main: #0F172A (Slate 900) - High contrast, sharp for primary readability.
1553● Text Muted: #64748B (Slate 500) - For supporting text and inactive tab icons.
1554● Accent/Success: #10B981 (Emerald 500) - For positive indicators and snackbars.
1555● Divider/Border: #E2E8F0 (Slate 200) - Subtle separation for list items.
1556Typography
1557● Font Family: Plus Jakarta Sans — A geometric sans-serif that balances professional authority with modern approachability. High legibility on mobile screens.
1558● Scaling: Designed to support iOS Dynamic Type and Android font scaling.
1559● Font Weights:
1560    ○ Display/Screen Titles: ExtraBold (800)
1561    ○ Section Headers: Bold (700)
1562    ○ Card Titles/Buttons: SemiBold (600)
1563    ○ Body Text: Regular (400)
1564● Line Heights: Tight for titles (1.1-1.2), relaxed for body text (1.4-1.5) to ensure comfortable reading on narrow screens.
1565Radius & Border
1566● Screen Elements: 16pt/dp for large cards and bottom sheets.
1567● Interactive Elements: 8pt/dp for inputs and small chips.
1568● Buttons: Fully rounded (pill shape) or 12pt/dp for a modern tech feel.
1569● Borders: Hairline (0.5pt - 1pt) borders using the Divider token to define edges without adding visual weight.
1570Shadows & Depth
1571● Card Elevation: Soft, colored shadows replacing neutral grays. Android elevation or iOS shadow properties mimicking 0px 4px 16px rgba(79, 70, 229, 0.08).
1572● Bottom Sheet Shadow: Stronger upward shadow to indicate the highest z-index.
1573● Button Shadow (Primary): 0px 4px 12px rgba(79, 70, 229, 0.25) to make primary actions highly prominent.
15743. Component Stylings
1575Buttons
1576● Primary CTA: Full width (minus screen padding) at the bottom of the screen. Background uses the Indigo-to-Violet gradient. White text.
1577● Secondary: White surface, slate border, slate text.
1578● 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.
1579Cards & Lists
1580● Base: White background, 16pt radius, hairline border, soft colored shadow.
1581● Layout: Horizontal scrolling (carousels) for feature discovery, vertical standard lists for data.
1582● List Items: Edge-to-edge with inset dividers, utilizing leading icons (in soft-colored circular backgrounds).
1583Inputs & Forms
1584● Style: White background, 8pt radius, light slate border.
1585● Active/Focused State: Border transitions to Indigo, label animates to a floating position, keyboard automatically presents.
1586● Error State: Red border with an immediate, subtle shake animation.
15874. App-Specific Bold Choices
1588● 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.
1589● 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.
1590● Scroll-Linked Animations: As the user scrolls down a list, the large screen title collapses smoothly into the top navigation bar.
1591● Gradient Usage: Used sparingly but intentionally—on the active tab icon, primary buttons, and as a subtle blurred mesh background behind onboarding screens.
1592● Skeletal Loading: Instead of traditional spinners, use animated, pulsing placeholder shapes (Indigo/Slate tinted) that match the layout of the incoming data.
15935. Spacing & Layout
1594● Safe Areas: Strict adherence to iOS and Android safe area insets (notches, dynamic islands, home indicator areas).
1595● Screen Padding: Consistent 16pt/dp or 20pt/dp horizontal margins for all screens.
1596● Vertical Rhythm: 24pt/dp between distinct sections; 12pt/dp between related items in a group.
1597● Navigation:
1598    ○ Bottom Tab Navigation for primary destinations (3-5 items).
1599    ○ Top App Bar for contextual actions, screen titles, and back buttons.
1600● Content Width: Text blocks should rarely span the absolute full width; use generous margins to keep line lengths comfortable for reading.
16016. Animation & Transitions
1602● Philosophy: "Fluid and Springy" — Animations should feel physical and interruptible.
1603● 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.
1604● Press Animations: Scale-down (scale: 0.97) on press down, spring back on release.
1605● Easing: Avoid linear animations. Use spring physics for layout changes and ease-out for opacities.
16067. Iconography & Touch Targets
1607● Library: Lucide-react-native (or equivalent SVG system).
1608● Style: 2px stroke width, rounded caps and joins for a friendly, modern feel.
1609● 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.
1610● Active States: Navigation icons transition from outlined (inactive) to filled/gradient (active).
16118. Accessibility & Best Practices
1612● Dynamic Text: UI must not break when users increase their system font size. Text must wrap or truncate gracefully.
1613● Contrast: All text meets WCAG AA standards. Slate 900 on Slate 50 background is highly compliant.
1614● Screen Readers: Ensure all image assets and icon buttons have descriptive accessibilityLabel (iOS) and contentDescription (Android).
1615● 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).
1616● Reduced Motion: Respect OS-level "Reduce Motion" settings by falling back to simple cross-fades instead of complex scaling and spring animations.
1617 
1618 
1619 
1620Sketch（素描/手绘风）
1621有机的不稳定边框、手写排版、纸张纹理和俏皮的不完美。每个元素都是用记号笔和铅笔在纹理纸上勾勒出来的。
16221. 原型设计与早期创意提案 (Low-Fidelity Prototyping)
16232. 创意品牌、艺术与独立文化项目
16243. 教育、绘本与儿童类产品
16254. 游戏化 UI 与 叙事解谜游戏
1626 
1627Design Philosophy
1628The 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.
1629Core Principles:
1630● No Straight Lines: Every View and TouchableOpacity uses complex borderRadius logic or SVG masks to create wobbly edges that reject geometric perfection.
1631● 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.
1632● Playful Tilt: Elements utilize small transform: [{ rotate: '-1deg' }] properties to break the rigid mobile grid and create casual energy.
1633● Hard Offset Shadows: Strictly avoid elevation (Android) or shadowRadius (iOS) that creates blur. Use a secondary "shadow layer" View offset by (4px, 4px) to create a cut-paper, layered collage aesthetic.
1634● 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.
1635● Scribbled Overlays: Use absolute-positioned SVGs for flourishes like hand-drawn arrows, "tape" effects on images, and "X" marks for close buttons.
1636● Intentional Messiness: Embrace slight overlaps and asymmetrical margins that make the app feel spontaneous rather than manufactured.
1637● Emotional Intent: This style lowers the "fear of interaction" by appearing unfinished and approachable. It is perfect for journaling apps, creative tools, education, or any product that wants to feel human-centered rather than corporate.
1638 
1639Design Token System
1640Colors (Single Palette - Light Mode)
1641● Background: #fdfbf7 (Warm Paper)
1642● Foreground: #2d2d2d (Soft Pencil Black)
1643● Muted: #e5e0d8 (Old Paper / Erased Pencil)
1644● Accent: #ff4d4d (Red Correction Marker)
1645● Border: #2d2d2d (Pencil Lead)
1646● Secondary Accent: #2d5da1 (Blue Ballpoint Pen)
1647Typography
1648● Headings: Kalam-Bold - High visual weight, felt-tip marker style.
1649● Body: PatrickHand-Regular - Highly legible but distinctly human.
1650● Scale: Large and readable for mobile. Headings should have lineHeight adjusted to allow for "scribbled" descenders.
1651Radius & Border
1652● 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).
1653● Border Width: Bold and visible. borderWidth: 2 minimum; borderWidth: 3 for primary actions.
1654● Style: solid for containers; dashed for "cut-out" sections or empty states.
1655Shadows & Effects
1656● Hard Offset Shadows: Since shadowOpacity with 0 radius is inconsistent across platforms, implement as a "Shadow View" placed behind the main component.
1657    ○ Standard: Offset { x: 4, y: 4 } with #2d2d2d.
1658    ○ Active (Press): Offset { x: 0, y: 0 } (the button "sinks" into the paper).
1659● Paper Texture: Use a repeating pattern background image or a very subtle radial-gradient SVG overlay across the entire screen.
1660 
1661Component Stylings
1662Buttons (TouchableOpacity)
1663● Shape: Irregular wobbly rectangle.
1664● Normal State: * White background, borderWidth: 3, Pencil Black text.
1665    ○ Hard offset shadow view behind it.
1666● Pressed State (activeOpacity={1}):
1667    ○ Main button transform: [{ translateX: 4 }, { translateY: 4 }].
1668    ○ The background "shadow view" is covered, simulating a physical press.
1669● Variant: "Post-it" Yellow (#fff9c4) for primary CTAs.
1670Cards/Containers
1671● Base Style: White background, wobbly border, slight rotation (-1deg or 1deg).
1672● Decoration Types:
1673    ○ "Tape": A semi-transparent View (rgba(200, 200, 200, 0.5)) positioned absolutely at the top, slightly rotated to look like it holds the card.
1674    ○ "Tack": A small red circle SVG at the top center.
1675● Speech Bubbles: Use a small SVG triangle attached to the bottom of the container for "hint" text or tooltips.
1676Inputs (TextInput)
1677● Style: Full box with wobbly borderRadius.
1678● Font: PatrickHand-Regular.
1679● Focus State: Border color changes to Blue Ballpoint (#2d5da1) with a slight increase in borderWidth.
1680● Placeholder: Muted Pencil (#2d2d2d60).
1681 
1682Layout Strategy
1683● The "Anti-Grid": Avoid perfect alignment. Give adjacent cards slightly different rotation values.
1684● Layering: Use zIndex to stack "tape" over cards and cards over background scribbles.
1685● Visual Rhythm: Use padding: 20 for standard screens. Use large gap values between vertical elements to let the "paper" breathe.
1686● Overflow: Allow decorative elements (like a hand-drawn star) to bleed slightly off the edge of the screen.
1687 
1688Non-Genericness (Bold Choices)
1689● Sketchy Loaders: Instead of a spinner, use an animation that "scribbles" a circle or toggles between three hand-drawn frames.
1690● Hand-Drawn Icons: Use icons that look like they were drawn with a 0.5mm fineliner (thick strokes, unclosed loops).
1691● Strikethrough: When a task is completed or an item is deleted, use a red "scribble-out" SVG overlay instead of a simple line.
1692● Wavy Dividers: Replace standard horizontal rules with a hand-drawn squiggly line SVG.
1693 
1694Effects & Animation
1695● The "Jiggle": When a user triggers an error, use a Sequence animation that rapidly rotates the element between -2deg and 2deg.
1696● Snappy Transitions: Use LayoutAnimation.configureNext(LayoutAnimation.Presets.spring) for all layout changes to give a bouncy, physical feel.
1697 
1698Mobile-First Strategy (React Native)
1699● Touch Targets: Ensure all wobbly buttons have a minimum hit area of 48x48 even if the visual "ink" is smaller.
1700● Safe Area: Ensure the "Paper" background extends into the SafeAreaView to maintain the illusion of physical media.
1701● Performance: Use useNativeDriver: true for rotations and transforms to keep the "hand-drawn" movements fluid at 60fps.
1702● Haptics: Add Haptics.impactAsync on button presses to reinforce the feeling of "clicking" a physical object.
1703 
1704 
1705Neumorphism（新拟物化）
1706通过单色背景上的双阴影拉伸和插入元素。柔软、触感好、物理接地，可接近性极佳。
17071. 极简主义硬件控制与智能家居
17082. 追求审美感的工具类 App
17093. 金融与健康监测看板（非密集型）
17104. 品牌营销与展示型页面
1711 
1712Design Philosophy (React Native / Mobile)
1713Core Principles: Neumorphism on mobile creates a tactile, physical interface through dual shadows. On React Native, this is achieved by layering View components or using specialized libraries to simulate the light source (top-left) and dark shadow (bottom-right). Every component is "molded" from the base material (#E0E5EC). Buttons are never flat; they are either "pillowed" (convex) or "wells" (concave/inset).
1714Vibe: Premium, ceramic-like feel. It prioritizes the "thump" of a physical button press. It is a calm, monochromatic experience that uses depth rather than color to establish hierarchy.
1715Unique Visual Signatures (Mobile Specific):
1716● 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.
1717● Haptic Feedback: Every neumorphic interaction (Press/Release) must be accompanied by light haptic feedback (ImpactFeedbackStyle.Light).
1718● Physical Press: Active states should use transform: [{ scale: 0.97 }] to simulate material compression.
1719● Full-Screen Surface: The entire app uses a single background color (#E0E5EC) to maintain the "continuous material" illusion.
1720 
1721Design Token System (The DNA)
1722Colors (Light Mode - Cool Monochromatic)
1723● Background: #E0E5EC (The "Clay" base).
1724● Text Primary: #3D4852 (7.5:1 contrast).
1725● Text Muted: #6B7280 (4.6:1 contrast).
1726● Accent: #6C63FF (Used for active toggles or primary CTAs).
1727● Shadow Light: rgba(255, 255, 255, 0.6) (Top-Left).
1728● Shadow Dark: rgba(163, 177, 198, 0.7) (Bottom-Right).
1729Typography
1730● Font Family: Use System (San Francisco/Roboto) or PlusJakartaSans-Bold.
1731● Sizing: * Heading: 24pt-32pt, Bold.
1732    ○ Body: 16pt, Medium.
1733    ○ Caption: 12pt, Regular.
1734● Letter Spacing: -0.5 for headings to enhance the modern look.
1735Radius (React Native borderRadius)
1736● Large Container: 32
1737● Standard Button/Input: 16
1738● Pill/Search Bar: 999
1739 
1740Shadows & Effects (The Physics)
1741Note: React Native requires specific shadow properties for iOS and elevation for Android. For high-fidelity Neumorphism, use a wrapping implementation.
1742Extruded (Convex - Resting)
1743● Outer Shadow (Dark): shadowOffset: { width: 6, height: 6 }, shadowOpacity: 1, shadowRadius: 10, shadowColor: 'rgba(163, 177, 198, 0.7)'
1744● Inner Shadow (Light): shadowOffset: { width: -6, height: -6 }, shadowOpacity: 1, shadowRadius: 10, shadowColor: 'rgba(255, 255, 255, 0.6)'
1745Inset (Concave - Pressed/Input)
1746● Concept: Use a slightly darker background color (#D1D9E6) or internal gradients/shadows to simulate a "carved out" look.
1747● Visual: backgroundColor: '#E0E5EC', plus internal borders of 1px with a darker shade at the top.
1748 
1749Component Styling (React Native)
1750Buttons
1751● Base: height: 56, borderRadius: 16, justifyContent: 'center', alignItems: 'center'.
1752● Default State: Extruded dual shadow.
1753● Active State (Pressable): Remove outer shadows, apply scale: 0.98, and change background slightly to indicate an "inset" state.
1754● Haptics: Trigger Haptics.impactAsync on onPressIn.
1755Cards
1756● Base: padding: 24, borderRadius: 32, backgroundColor: '#E0E5EC'.
1757● Hierarchy: Use "Nested Depth." A card (Extruded) contains an Icon Container (Inset Deep).
1758Inputs
1759● Style: height: 50, borderRadius: 16, paddingHorizontal: 16.
1760● Depth: Must be Inset (Concave) to look like a physical slot.
1761● Focus: Border color changes to #6C63FF with a thin 1.5px width.
1762 
1763Animation & Micro-interactions
1764● Framework: Use React Native Reanimated or LayoutAnimation.
1765● Transitions: Duration: 250ms, Easing: Bezier(0.4, 0, 0.2, 1).
1766● Interaction: * Scale: Buttons shrink by 2-3% when pressed.
1767    ○ Shadow Transition: Smoothly interpolate shadow opacity from 1 to 0.4 when an element is "pressed" into the surface.
1768 
1769Layout & Accessibility
1770● Safe Area: Always wrap in SafeAreaView.
1771● Touch Targets: Minimum 48x48 for all interactive elements.
1772● Spacing: Use a 8pt grid system (8, 16, 24, 32, 48).
1773● Contrast: Ensure text color maintains WCAG AA compliance against the #E0E5EC background.
1774 
1775Anti-Patterns (Do Not Do)
1776● No Black Shadows: Never use rgba(0,0,0,x). Shadows must be blue-grey to match the "Cool Grey" material.
1777● No Pure White Backgrounds: The screen background MUST be #E0E5EC.
1778● No Sharp Edges: Avoid borderRadius < 12.
1779● No Flat Borders: Do not use borderWidth: 1 as a substitute for depth unless in a focus state.