FLOWNET TECH's color system is anchored in technology blue, conveying innovation, trust, and forward-thinking. All colors are managed via CSS Variables, supporting Light / Dark dual themes.FLOWNET TECH 的色彩系统以科技蓝为核心，传递创新、可信赖与前沿的品牌调性。所有颜色均通过 CSS Variables 管理，支持 Light / Dark 双主题。
FLOWNET Blue
#0f54ff · rgb(15, 84, 255)
--flownet-blue / --primary
FLOWNET Light Blue
#1eaaff · rgb(30, 170, 255)
--flownet-light-blue
Accent Purple辅助紫
#7A7FEE · rgb(122, 127, 238)
Secondary accent
Foreground前景色
#111827 · rgb(17, 24, 39)
--foreground (light)
Muted次要灰
#6b7280 · rgb(107, 114, 128)
--muted
Card / Secondary
#f3f4f6 · rgb(243, 244, 246)
--card / --secondary
Dark Background暗色背景
#101112 · rgb(16, 17, 18)
--background (dark)
Dark Card暗色卡片
#272829 · rgb(39, 40, 41)
--card (dark)
Primary Gradient主渐变
linear-gradient(135deg, #0f54ff, #1eaaff)
Reversed Gradient反向渐变
linear-gradient(135deg, #1eaaff, #0f54ff)
02 — Typography
Outfit Type SystemOutfit 字体系统
The entire site uses Outfit from Google Fonts — modern, geometric, and friendly. H1/H2 use lighter weights for elegance; H3 and buttons use 600 weight for hierarchy.全站使用 Google Fonts 的 Outfit 字体，风格现代、几何感强，兼具科技感与友好感。H1/H2 使用较轻字重突出优雅，H3 及按钮使用 600 字重增强层次。
Heading 160px · Weight 500 line-height: 1.2
Pioneering Innovation
Heading 248px · Weight 400 line-height: 1.2
Research & Development
Heading 324px · Weight 600 line-height: 1.4
Product Development & Innovation
Body Text16px · Weight 400 line-height: 1.7
FLOWNET TECH is a technology startup founded in New Jersey, driven by a singular mission: to discover and build transformative products and services that enhance people's lives.FLOWNET TECH 是一家扎根新泽西的科技创业公司，致力于发现和构建改善人们生活的变革性产品与服务。我们借助 AI 的力量加速创新，将大胆的想法变为现实。
Small / Caption14px · Weight 400 line-height: 1.5
Flutter · Dart · Mobile Development · React · TypeScript · Payment Integration
02b — Chinese Typography中文字体
Chinese Font System中文字体方案
FLOWNET TECH serves bilingual users (e.g., NJ Driver Test Prep App). Chinese fonts must balance tech aesthetics and readability. Noto Sans SC is the primary recommendation — its geometric style pairs perfectly with Outfit.FLOWNET TECH 面向中美双语用户群体（如新泽西驾考宝典 App），中文字体需兼顾科技感与可读性。推荐使用思源黑体作为主力中文字体，与 Outfit 风格高度契合。
Noto Sans SC
Source Han Sans — Primary CJK Font思源黑体 — 标题 & 正文首选
驱动明日创新
A geometric sans-serif that pairs seamlessly with Outfit. Free via Google Fonts, supports 7 weights, and covers all Simplified Chinese characters. Ideal for UI, marketing, and product surfaces.FLOWNET TECH 是一家扎根新泽西的科技创业公司，致力于发现和构建改善人们生活的变革性产品与服务。我们借助 AI 的力量加速创新，将大胆的想法变为现实。
Google FontsPairs with Outfit与 Outfit 风格匹配7 Weights7 种字重Web / iOS / Android
Noto Serif SC
Source Han Serif — Long-form Content思源宋体 — 长文 & 编辑场景
探索无限可能
For formal, culturally-rich content — blog posts, policy statements, or brand stories — Noto Serif SC provides elegant Chinese serif typography suited for long-form reading.当需要表达更正式、更有文化厚度的内容时——例如博客文章、政策说明或品牌故事——思源宋体提供了优雅的衬线中文排版，适合长篇阅读场景。
Google FontsSerif / Formal衬线 / 正式场景Blog / Docs博客 / 文档
PingFang SC
Apple System Chinese Font苹方 — Apple 平台系统字体
新泽西驾考宝典
Built into all Apple platforms (iOS, macOS). Zero loading overhead. The ideal Chinese fallback for NJ Driver App on iOS, ensuring a native experience.苹方是 Apple 全平台内建的中文字体，iOS / macOS 用户无需加载即可渲染。适合作为 NJ Driver App 在 iOS 端的中文 fallback 字体，确保原生体验。
Apple built-inApple 系统内建iOS primaryiOS App 首选No loading无需额外加载
Microsoft YaHei
Windows System Chinese Font微软雅黑 — Windows 平台系统字体
全方位备考助手
Built into Windows. Essential fallback for web content targeting Windows users. Clear glyphs with excellent screen rendering for cross-platform consistency.微软雅黑是 Windows 系统内建中文字体，Web 端面向 Windows 用户时的重要 fallback。字形清晰，屏显效果优异，确保跨平台一致性。
Windows built-inWindows 系统内建Web fallbackNo loading无需额外加载
Theme switching via CSS Variables, supporting next-themes system / light / dark modes. Dark mode cards include a noise-texture overlay for visual depth.通过 CSS Variables 切换 Light/Dark 主题，支持 next-themes 的 system / light / dark 三种模式。Dark 模式的 Card 带有 noise-texture 叠加效果。
Light Mode
Your Developer-first Growth Partner开发者优先的 增长伙伴
Background #FFFFFF · Text #111827
FlutterReactAI
Dark Mode
Your Developer-first Growth Partner开发者优先的 增长伙伴
Background #101112 · Text #D9D9D9
FlutterReactAI
04 — Shape & Spacing形状与间距
Border Radius System系统
Border radius is based on --radius: 0.75rem. Cards use 1.5rem large radius, buttons use calc(var(--radius) - 2px), and pill badges use 9999px.圆角半径基于 --radius: 0.75rem，Card 使用 1.5rem 大圆角，Button 使用 calc(var(--radius) - 2px)，pill badge 使用 9999px。
Small
calc(radius - 4px)
≈ 8px
Default
--radius: 0.75rem
12px
Card / Large
1.5rem
24px
05 — Iconography图标风格
Icon System图标系统
Uses Lucide React icon library — linear style, stroke-width: 2. Service icons are placed in gradient circle containers (48px / gradient bg / white icon).使用 Lucide React 图标库，线性风格，stroke-width: 2。服务图标放在渐变圆形背景中（48px / gradient bg / white icon）。
💡
Innovation Research创新研究
🚀
Product Development产品开发
⚙️
Tech Integration技术集成
📧
Contact / CTA
06 — CSS Variables
Full Variable Reference完整变量表
All CSS custom properties extracted from flownet.tech (:root and .dark mode). Copy directly into new projects or design systems.以下是从 flownet.tech 提取的所有 CSS 自定义属性（:root 和 .dark 模式），可直接复制用于新项目或设计系统。
Variable
Light Mode
Dark Mode
--background
#ffffff
#101112
--foreground
#111827
#d9d9d9
--primary
#0f54ff
--primary-foreground
#ffffff
--card
#f3f4f6
#272829
--card-foreground
#111827
#ffffff
--secondary
#f3f4f6
#272829
--muted
#6b7280
#a1a1aa
--border
#d1d5db
#2a2a2a
--ring
#0f54ff
--radius
0.75rem (12px)
--flownet-blue
#0f54ff
--flownet-light-blue
#1eaaff
--font-outfit
"Outfit", sans-serif
--font-cn
"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif
07 — Usage Guidelines使用规范
Brand Usage Rules品牌使用规范
Core principles for maintaining visual consistency across all touchpoints.保持品牌视觉一致性的核心原则。
DORecommended推荐做法
Always use Outfit for Latin text, Noto Sans SC for Chinese始终使用 Outfit 字体处理英文，Noto Sans SC 处理中文
Primary color: FLOWNET Blue #0f54ff; gradients for CTA/emphasis主色使用 FLOWNET Blue #0f54ff，渐变作为 CTA / 强调
Card border-radius: 24px (1.5rem) for consistent modern lookCard 圆角统一 24px (1.5rem)，保持柔和现代感
Use noise-texture overlay in Dark mode for depthDark 模式使用 noise-texture 叠加营造质感
Gradient text via background-clip: text technique渐变文字使用 background-clip: text 技术
DON'TAvoid避免做法
Don't use Inter / Roboto / Arial for brand content不要在品牌元素中使用 Inter / Roboto / Arial
Don't use Light Blue alone as primary in large areas不要单独大面积使用 Light Blue 替代主色
Don't use low-contrast text on light backgrounds不要在浅色背景上使用低对比度文字
Don't use sharp corners (border-radius: 0) on cards不要使用直角 (border-radius: 0) 卡片
Don't use pure black #000000 in Dark mode不要在 Dark 模式中使用纯黑 #000000 背景
Don't use SimSun as a Chinese UI font (poor screen rendering)不要使用宋体 / SimSun 作为中文 UI 字体（屏显效果差）
Don't stretch or distort the Logo / brand assets不要拉伸或变形 Logo / 品牌元素
08 — Technical Stack技术栈
Technology Implementation技术实现
The full technology stack powering FLOWNET TECH's products — from the company website to cross-platform mobile apps, cloud infrastructure, analytics, and distribution channels.驱动 FLOWNET TECH 产品的完整技术栈——涵盖官网、跨平台移动应用、云基础设施、数据分析及分发渠道。
🌐
Website官方网站
Next.js App Router with React & TypeScript. Tailwind CSS v3.4 for utility-first styling, next-themes for Light/Dark mode switching, Radix UI for accessible primitives.使用 Next.js App Router + React & TypeScript 构建。Tailwind CSS v3.4 提供原子化样式，next-themes 实现主题切换，Radix UI 提供无障碍组件原语。
Next.jsReactTypeScriptTailwindRadix UI
📱
Mobile Apps移动应用开发
Cross-platform mobile development with Flutter & Dart. Unified codebase for iOS and Android. Powers NJ Driver Test Prep (njdriver.app) with EN/CN/ES multi-language support, paywall flows, and offline-first architecture.使用 Flutter & Dart 跨平台开发，iOS 和 Android 统一代码库。核心产品「新泽西驾考宝典」(njdriver.app) 支持中英西三语、付费墙流程及离线优先架构。
FlutterDartiOSAndroidOffline-first
🎨
Design System设计系统
Outfit + Noto Sans SC typography pairing. Lucide React icons. CSS Variables theming across Light/Dark. Consistent 24px card radius and gradient-based CTAs.Outfit + Noto Sans SC 字体搭配。Lucide React 图标库。CSS Variables 驱动 Light/Dark 双主题。统一 24px 卡片圆角与渐变 CTA 按钮。
OutfitNoto Sans SCLucideCSS Vars
☁️
Cloud & CDN云 & CDN
Alibaba Cloud for CDN/DCDN, OSS storage, and dynamic acceleration. Resource packages optimized for traffic patterns with growth buffers.使用阿里云 CDN / DCDN 加速、OSS 对象存储及动态加速。资源包按流量模式优化配置，预留 20% 增长缓冲。
Alibaba Cloud阿里云CDNOSSDCDN
📊
Analytics & Growth分析与增长
Firebase Analytics for user acquisition, retention, and monetization tracking. App Store Connect for download and revenue metrics. Paywall funnel and A/B testing for conversion optimization.Firebase Analytics 追踪用户获取、留存和变现。App Store Connect 监控下载和收入指标。付费墙漏斗与 A/B 测试持续优化转化率。
FirebaseApp Store ConnectA/B Testing
🏪
Distribution分发渠道
Apple App Store and Google Play as primary revenue channels. Multi-language ASO optimization (EN/CN/ES). In-app purchase and subscription management.Apple App Store 和 Google Play 作为主要收入渠道。三语 ASO 优化（英/中/西）。应用内购买与订阅管理。