设计系统色彩令牌定义与使用指南

"{\n \"tokens\": {\n \"colors\": {\n \"primary\": \"#3B82F6\",\n \"text\": \"#111827\",\n \"muted\": \"#6B7280\",\n \"border\": \"#E5E7EB\",\n \"surface\": \"#FFFFFF\",\n \"background\": \"#F9FAFB\"\n },\n \"typography\": {\n \"title\": { \"fontSize\": \"16px\", \"fontWeight\": \"500\" },\n \"body\": { \"fontSize\": \"14px\", \"fontWeight\": \"400\" }\n },\n \"rounded\": {\n \"md\": \"8px\",\n \"lg\": \"12px\"\n },\n \"spacing\": {\n \"sm\": \"8px\",\n \"md\": \"16px\",\n \"lg\": \"24px\"\n }\n },\n \"component\": \"ProductsPage\",\n \"layout\": { \"display\": \"grid\", \"columns\": 3, \"gap\": \"{spacing.md}\" },\n \"padding\": \"{spacing.lg}\",\n \"backgroundColor\": \"{colors.background}\",\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"Products\",\n \"style\": {\n \"fontSize\": \"24px\",\n \"fontWeight\": \"600\",\n \"color\": \"{colors.text}\",\n \"textAlign\": \"center\",\n \"marginBottom\": \"{spacing.lg}\"\n }\n },\n {\n \"component\": \"ProductCard\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Icon\",\n \"name\": \"fa-solid fa-cloud\",\n \"size\": \"24px\",\n \"color\": \"{colors.primary}\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"Cloud Document\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Enables real-time co-editing for documents, making collaboration seamless.\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"{typography.body.fontWeight}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Read more →\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.primary}\"\n }\n }\n ]\n },\n {\n \"component\": \"ProductCard\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Icon\",\n \"name\": \"fa-solid fa-envelope\",\n \"size\": \"24px\",\n \"color\": \"{colors.primary}\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"Corporate Email\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Provides professional, secure, and reliable email hosting.\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"{typography.body.fontWeight}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Read more →\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.primary}\"\n }\n }\n ]\n },\n {\n \"component\": \"ProductCard\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Icon\",\n \"name\": \"fa-solid fa-comment\",\n \"size\": \"24px\",\n \"color\": \"{colors.primary}\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"Instant Messaging\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"A secure internal messaging tool based on corporate structure, supporting group chats, read receipts, and quick file sharing.\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"{typography.body.fontWeight}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Read more →\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.primary}\"\n }\n }\n ]\n },\n {\n \"component\": \"ProductCard\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Icon\",\n \"name\": \"fa-solid fa-video\",\n \"size\": \"24px\",\n \"color\": \"{colors.primary}\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"Audio and Video Conferencing\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Delivers HD and stable online meetings\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"{typography.body.fontWeight}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Read more →\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.primary}\"\n }\n }\n ]\n },\n {\n \"component\": \"ProductCard\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Icon\",\n \"name\": \"fa-solid fa-file\",\n \"size\": \"24px\",\n \"color\": \"{colors.primary}\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"Contract Management\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Realize electronic contract management throughout the entire lifecycle, from drafting, approval, signing to archiving.\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"{typography.body.fontWeight}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Read more →\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.primary}\"\n }\n }\n ]\n },\n {\n \"component\": \"ProductCard\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Icon\",\n \"name\": \"fa-solid fa-dollar-sign\",\n \"size\": \"24px\",\n \"color\": \"{colors.primary}\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"Cost Management\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Automate employee reimbursement and corporate payment processes to achieve budget control and compliance management.\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"{typography.body.fontWeight}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Read more →\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.primary}\"\n }\n }\n ]\n },\n {\n \"component\": \"ProductCard\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Icon\",\n \"name\": \"fa-solid fa-clipboard-check\",\n \"size\": \"24px\",\n \"color\": \"{colors.primary}\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"Document Management\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Facilitates the online drafting, approval, sealing, circulation, and archiving of official government documents.\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"{typography.body.fontWeight}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Read more →\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.primary}\"\n }\n }\n ]\n },\n {\n \"component\": \"ProductCard\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Icon\",\n \"name\": \"fa-solid fa-users\",\n \"size\": \"24px\",\n \"color\": \"{colors.primary}\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"HR Management\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"A digital HRMS that covers the entire employee lifecycle from hiring to onboarding, performance, and offboarding.\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"{typography.body.fontWeight}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Read more →\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.primary}\"\n }\n }\n ]\n },\n {\n \"component\": \"ProductCard\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Icon\",\n \"name\": \"fa-solid fa-briefcase\",\n \"size\": \"24px\",\n \"color\": \"{colors.primary}\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"Project Management\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Unifies the management of project goals, tasks, resources, and timelines to ensure successful delivery.\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"{typography.body.fontWeight}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Read more →\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.primary}\"\n }\n }\n ]\n },\n {\n \"component\": \"ProductCard\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Icon\",\n \"name\": \"fa-solid fa-calendar\",\n \"size\": \"24px\",\n \"color\": \"{colors.primary}\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"Meeting Management\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Provides end-to-end management for meetings, from scheduling and notifications to agendas and minutes.\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"{typography.body.fontWeight}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Read more →\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.primary}\"\n }\n }\n ]\n },\n {\n \"component\": \"Button\",\n \"backgroundColor\": \"{colors.primary}\",\n \"borderRadius\": \"{rounded.lg}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"alignItems\": \"center\", \"justifyContent\": \"center\", \"width\": \"100%\" },\n \"children\": [\n {\n \"component\": \"Icon\",\n \"name\": \"fa-solid fa-arrow-right\",\n \"size\": \"20px\",\n \"color\": \"#FFFFFF\",\n \"style\": { \"marginBottom\": \"{spacing.sm}\" }\n },\n {\n \"component\": \"Text\",\n \"content\": \"More Solution\",\n \"style\": {\n \"fontSize\": \"18px\",\n \"fontWeight\": \"600\",\n \"color\": \"#FFFFFF\",\n \"marginBottom\": \"{spacing.sm}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Explore all products and services\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"#FFFFFF\",\n \"marginBottom\": \"{spacing.sm}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"Learn More →\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"#FFFFFF\"\n }\n }\n ]\n }\n ]\n}"