AI小红书

Overview

AI小红书 is a content creation platform designed for social media creators and marketers seeking to generate polished, platform-native posts for Xiaohongshu (Little Red Book). The aesthetic is 'Functional Minimalism with Digital Clarity'—a clean, utilitarian interface that prioritizes form efficiency and rapid content composition. The UI employs a bright, neutral canvas (#F2F2F2 background, #FFFFFF containers) punctuated by a vivid electric blue primary accent (#0A64FE) that signals interactivity and AI-powered intelligence. The emotional response is one of capability and ease: users feel empowered to create without friction, guided by clear hierarchies and responsive feedback. The brand personality is direct, professional, and slightly energetic—it speaks to creators who value speed and precision without sacrificing quality.

Colors

The color system is built on a neutral foundation with strategic accent deployment. Primary (#0A64FE) is the signature brand blue, used exclusively for call-to-action buttons (the 90px 'AI生成' button at page bottom), interactive links, active states in segmented controls, and focus indicators. It conveys trust and AI capability. Secondary (#FF5000) and Tertiary (#FF9900) are warm accent colors reserved for membership promotions and status indicators—the membership banner uses #FF5000 ('立即开通') to create urgency without competing with primary actions. Error (#F43030) is applied to validation messages and required field indicators (the red asterisk on '创作内容*'). The surface stack uses cool grays: surface (#F2F2F2) as the page background, surface-container-lowest (#F8F8F8) for input backgrounds,

Typography

The type system is scaled for mobile-first clarity, with generous sizes reflecting the platform's Chinese-language audience and touch-friendly interaction model. Display (40px, 600 weight) anchors page titles; Headline-lg (34px, 600 weight) is used for navigation and major section headers; Body-lg (30px, 400 weight) governs textarea and large input content; Body-md (26px, 400 weight) handles standard labels and secondary text; Label-md (24px, 500 weight) is applied to button text and control labels; Label-sm (20px, 500 weight) is reserved for metadata and helper text. All typography uses the system font stack (-apple-system, PingFang SC, Droid Sans Fallback, Roboto, sans-serif) to ensure optimal rendering across iOS, Android, and web. Line-height is consistently generous (1.4–1.5 ratio) to

Layout

The layout follows a single-column, mobile-optimized grid with fixed-width container max of 1280px (though the design is primarily mobile-first). Content edge padding is 26px (--content-edge), creating a consistent gutter between the viewport edge and content. Module spacing uses 30px vertical gaps (--module-gap) to separate form sections, creating a rhythm that feels spacious without excessive whitespace. The sticky navigation bar (88px height) anchors the top, while the fixed bottom bar (90px button + 20px padding) ensures the primary CTA is always accessible. Internal component spacing follows the 8px unit grid: xs (4px) for micro-spacing within tags, sm (12px) for gaps between inline elements, md (24px) for padding within cards and inputs, lg (30px) for section separation. The textarea

Elevation & Depth

Depth in this system is achieved through subtle shadow layering and background color shifts rather than dramatic drop-shadows. Level 1 (Base): The page background is #F2F2F2, providing a neutral canvas. Level 2 (Standard Cards/Inputs): Module containers use #FFFFFF background with a 1px bottom border in #E5E5E5, creating a soft separation from the base. Inputs use #F8F8F8 background (surface-container-lowest) with no border, relying on color contrast for definition. Level 3 (Elevated/Modals): The modal sheet uses #FFFFFF background with a 12px 12px 0 0 border-radius and box-shadow: 0 3px 8px r

Shapes

The shape philosophy is 'Technical Precision'—sharp, minimal radii that convey efficiency and clarity. Small, sharp corners (2px, 4px) are used for micro-components: word-style tags (2px), attachment icons (4px), ratio preview borders (2px). Standard containers (cards, inputs, modals) use 4px border-radius, creating a subtle softness without sacrificing geometric clarity. Larger interactive elements use 12px (buttons, modal top corners) to signal importance and improve touch affordance. Segmented controls and count buttons use 27px border-radius (full pill shape) to create a distinct visual ca

Components

Action Elements The primary button (button-primary) is the dominant CTA: 90px height, 12px border-radius, #0A64FE background, #FFFFFF text, 32px font-size, 600 weight. It spans full width at the bottom of the page in a fixed bar. On active/press, the background shifts to #0859E4 (button-primary-active). When disabled, it becomes #CCCCCC with pointer-events: none. Transition: all 0.15s. Secondary buttons (button-secondary) are 54px height, 27px border-radius (pill), with transparent background, 1px #E5E5E5 border, and #666666 text. On active, the background becomes rgba(10, 100, 254, 0.06), border becomes #0A64FE, and text becomes #0A64FE. These are used for word-count options, ratio selection, and style choices.

Containers & Surfaces Module cards (card-module) have #FFFFFF backgro

Do's and Don'ts

**Do**

• Do use #0A64FE (primary) exclusively for CTAs, active states, and focus indicators—never for body text or backgrounds.
• Do maintain 26px horizontal padding (--content-edge) on all content to create consistent breathing room.
• Do apply 0.15s transitions to all interactive state changes (hover, active, focus) for responsive feedback.
• Do use the 27px pill-shaped border-radius for toggle-like controls (segmented buttons, word-count options) to visually distinguish them from static containers.
• Do size touch targets (buttons, inputs, controls) to a minimum of 48px height for comfortable mobile interaction.
• Do use rgba(10, 100, 254, 0.06) as the active/hover background tint for all secondary interactive elements to maintain visual cohesion.
• Do apply the system font stack (-apple-system, PingFang SC, Droid Sans Fallback, Roboto, sans-serif) to all text for optimal cross-platform rendering.

**Don't**

• Don't use secondary (#FF5000) or tertiary (#FF9900) colors for primary CTAs—reserve them for promotions and status indicators only.
• Don't apply shadows to interactive elements; use color shifts and border changes instead to maintain the flat, efficient aesthetic.
• Don't reduce padding below 24px inside containers or below 26px at content edges—the design relies on generous whitespace for clarity.
• Don't use border-radius values other than those defined in the scale (2px, 4px, 8px, 12px, 16px, 27px, 50%)—consistency is critical to the technical aesthetic.
• Don't apply text-shadow or complex typography effects; keep type clean and legible with simple color and weight changes.
• Don't mix font families—always use the system stack; custom fonts will break rendering on some devices.
• Don't disable buttons by reducing opacity; use the disabled state (#CCCCCC background, pointer-events: none) for clear affordance.