v2.0 · 2026 · iOS-Quality

Design Bible
& System

Apple-quality glassmorphism. Day & night modes. 40 apps, one DNA. Every token, rule, and component you need to build fast and stay consistent.

40Apps
2Modes
50Rules
∞Scale
01 · Mode System

Day & Night Modes

Not a color flip — a full surface recalibration. Toggle the button above to feel it live.

🌙
Night Mode
Deep navy. Dimmed whites. Amber glows.
Revenue Today
1,284,500
☀️
Day Mode
Frosted milky glass on warm sky-grey.
Revenue Today
1,284,500

Token Mapping — Night vs Day

TokenNightDayNote
--bg-base#0C1C30#E8EDF5Dimmed ↔ Brightened
--glass-ultrawhite/6%white/72%Dark thin → Light milky
--text-bodywhite/72%black/60%Half-white feel, both modes
--text-primarywhite/100%black/88%Max contrast for headings
--amber#D87D09#D87D09🔒 Never changes
--blurblur(20px)blur(20px)🔒 Never changes
/* ── Mode implementation — paste into every app ── */ /* 1. Add data-mode to <html>: <html data-mode="light"> */ /* 2. Init on load — default to light mode */ (function() { const saved = localStorage.getItem('camel-mode'); document.documentElement.setAttribute('data-mode', saved || 'light'); })(); /* 3. Toggle function */ function toggleMode() { const next = document.documentElement.getAttribute('data-mode') === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-mode', next); localStorage.setItem('camel-mode', next); document.getElementById('mlbl').textContent = next === 'dark' ? '🌙' : '☀️'; } /* 4. All color tokens live in CSS — no JS color logic needed */
02 · Foundation

Color System

Immutable amber. Adaptive surfaces. White-alpha text — never hex greys.

Base Navy
#0C1C30
bg-base · Night
Warm Amber
#D87D09
🔒 Primary CTA · Immutable
Sky Grey
#E8EDF5
bg-base · Day
iOS Green
#30D158
Success · Live · Up
iOS Red
#FF453A
Error · Offline · Down
iOS Yellow
#FFD60A
Warning · Cached · Pending

Text Hierarchy — White Alpha (not hex slate)

Heading Title
--text-primary · white/100% · Poppins 700 · Page titles, hero
Body description text. Comfortable, readable, warm.
--text-body · white/72% · Outfit 400 · Body, descriptions
Secondary label or subtitle
--text-secondary · white/48% · Outfit 500 · Labels, subtitles
Placeholder / hint text
--text-tertiary · white/28% · Outfit 400 · Placeholders
04:22 UTC · v2.0
--text-caption · white/20% · Mono · Timestamps, meta
03 · Typography

Type System

Three fonts. Poppins for headings, Outfit for UI text, mono for data.

Display Heading
Poppins 700 · -1px tracking · --text-primary · Page titles, hero, app name
Section Title
Poppins 600 · -1px · --text-primary · Section headers
Card / Modal Header
Poppins 600 · --text-primary · Card titles
Body copy for descriptions, onboarding, instructions. Not slate-300 hex — white at 72% opacity. Softer than headings but still clearly legible.
Outfit 400 · 16px · --text-body (white/72%) · Body, descriptions
Secondary label · subtitle · metadata row
Outfit 500 · 14px · --text-secondary (white/48%)
1,284,500 TZS · +4.7%
JetBrains Mono 600 · ALL numbers, currency, % · key values in --text-primary, units in amber
LAST SYNC · 04:22:07 UTC · v2.0.1
JetBrains Mono 400 · ALL CAPS · --text-caption · timestamps, version, meta
04 · Inputs

Input System

16px minimum prevents iOS zoom. Correct inputmode gives the right keyboard every time — number pad for amounts, @ for email, decimal for rates.

type="text" · autocomplete="name"
type="email" → shows @ key on mobile
type="tel" → numeric keypad on iOS/Android
TZS
inputmode="numeric" → number pad, no spinner arrows
%
inputmode="decimal" → decimal pad on iOS
type="search" → Search / Go button on keyboard
type="password" · autocomplete → password managers
type="url" → shows .com key on iOS
/* ── CamelTech Input Rules ── RULE 1: font-size NEVER below 16px → prevents iOS auto-zoom RULE 2: Use inputmode for keyboard, type for semantics RULE 3: Pair autocomplete for password managers & autofill RULE 4: Currency → inputmode="numeric" NOT type="number" (avoids spinner arrows, allows Intl.NumberFormat formatting) */ /* Currency */ <input type="text" inputmode="numeric" pattern="[0-9,]*" style="font-size:16px" /> /* Email → @ key on iOS */ <input type="email" inputmode="email" autocomplete="email" /> /* Decimal rates */ <input type="text" inputmode="decimal" /> /* Phone */ <input type="tel" inputmode="tel" autocomplete="tel" />
05 · Components

Component Library

Build once in @camel-ui. Import everywhere. Never rewrite from scratch.

Buttons
Status Badges
LIVE CACHED OFFLINE PENDING SYNCING
MonoStat Cards
Revenue MTD
1,284,500
▲ +12.4%
Active Users
3,841
▲ +8.1%
Avg Session
4m 22s
▼ -2.3%
Toast Notifications
✅  Saved — TZS 150,000
❌  Connection failed. Retry?
🔔  Update available — v2.1.0
Skeleton Loaders
Error Boundary Fallback
⚠️
Component failed to load

Your data is safe. This section couldn't render.

06 · Motion

Animation System

Controlled. Spring-based. Premium = less motion, done perfectly. Hover the cards below.

🚀
Fade Up on Load
y:20→0 · opacity:0→1 · spring
✨
Hover Glow + Scale
scale(1.018) · amber shadow
📋
Stagger Lists
staggerChildren: 0.08s
⬆️
Button Press
active: scale(0.97) · 80ms
07 · App Identity

Product Accent System

Amber is the brand. Secondary accent is each app's personality. Related but distinct.

Finance
#10B981 · Emerald
Transport
#0EA5E9 · Sky
Media / Music
#A855F7 · Purple
Dev Tools
#22D3EE · Cyan
Kalendafy
#14B8A6 · Teal
KwePaJua
#6366F1 · Indigo
Food / Life
#F97316 · Orange
Health
#EC4899 · Pink
Agriculture
#84CC16 · Lime
Education
#EAB308 · Yellow
08 · Data Viz

Chart System

Revenue · 7 Days
MonTueWedThuFriSatSun
Recharts Config
<AreaChart>
  fill: #D87D09 @ 20% opacity
  stroke: #D87D09
  strokeWidth: 2.5
  type: "monotone"
  // No CartesianGrid
  // Tooltip: glass card
</AreaChart>
09 · Tokens

Tailwind + CSS Tokens

Copy these into every new app untouched.

<!-- Google Fonts — paste in <head> of every app --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
// tailwind.config.js — CamelTech base module.exports = { theme: { extend: { colors: { navy:"#0C1C30", amber:"#D87D09" }, fontFamily: { display:["Poppins"], body:["Outfit"], mono:["JetBrains Mono"], }, boxShadow: { amber:"0 0 28px rgba(216,125,9,0.32)", card:"0 2px 20px rgba(0,0,0,0.45)", }, }}, };
/* globals.css — CamelTech CSS tokens */ :root, [data-mode="dark"] { --bg-base: #0C1C30; --glass-ultra: rgba(255,255,255,0.06); --glass-border: rgba(255,255,255,0.10); --text-primary: rgba(255,255,255,1.00); --text-body: rgba(255,255,255,0.72); /* ← NOT slate-300 hex */ --text-secondary:rgba(255,255,255,0.48); --text-tertiary: rgba(255,255,255,0.28); --text-caption: rgba(255,255,255,0.20); --amber: #D87D09; /* 🔒 immutable */ --input-font: 16px; /* 🔒 prevents iOS zoom */ } [data-mode="light"] { --bg-base: #E8EDF5; --glass-ultra: rgba(255,255,255,0.72); --glass-border: rgba(0,0,0,0.07); --text-primary: rgba(0,0,0,0.88); --text-body: rgba(0,0,0,0.60); --text-secondary:rgba(0,0,0,0.40); --text-tertiary: rgba(0,0,0,0.28); --text-caption: rgba(0,0,0,0.20); }
10 · Checklist

The 50-Rule Checklist

Copy to every new app. Tick as you build. Click to toggle.

🎨 Colors & Surfaces (1–10)
Background is #0C1C30 (night) or #E8EDF5 (day) — no other bg colors
All primary CTAs use Amber #D87D09 — no exceptions
Cards: --glass-ultra + backdrop-blur + --glass-border
Dual mode: data-mode="dark|light" on <html> tag
Mode persists in localStorage('camel-mode')
App reads prefers-color-scheme on first load as default
Text uses white/black alpha variables — no hex slate colours
All card hovers: amber glow + scale(1.018) translateY(-3px)
Selected/active states: amber border-color
Table rows alternate glass-thin + transparent; hover glass-hover
✍️ Typography (11–20)
Poppins loaded from Google Fonts — headings only
Outfit loaded from Google Fonts — all body and UI text
JetBrains Mono loaded — ALL numbers, currency, %, timestamps
Zero numbers shown in sans-serif — ever
All numbers via Intl.NumberFormat (1,284,500 ✓ not 1284500 ✗)
Heading uses Poppins 700, letter-spacing -1px at display size
Body text is --text-body (white/72%) — softer than heading but readable
Section labels: mono ALL CAPS, amber, 2px letter-spacing
Timestamps: --text-caption mono, never bold, never large
Use Poppins for headings and Outfit for interface text — avoid mixing extra sans-serif families
📱 Inputs & Forms (21–28)
All inputs: font-size: 16px minimum — prevents iOS zoom
Email field: type="email" → surfaces @ key on mobile
Phone: type="tel" inputmode="tel" → numeric keypad
Currency: inputmode="numeric" not type="number"
Decimal/rate: inputmode="decimal" → decimal pad on iOS
Password: autocomplete="current-password" → enables password managers
Focus state: amber border + 3px amber ring — never default blue
Currency inputs have styled prefix (TZS / $ / KES) in side box
⚡ Motion (29–36)
Framer Motion installed — spring-based transitions throughout
Page load: fade-up y:20→0, opacity:0→1, stiffness 300
Lists use staggerChildren: 0.08s between items
Buttons: hover scale(1.04), active scale(0.97)
No bouncy elastic animations on financial or data displays
Skeleton shimmer always before data loads — zero blank screens
Scroll-triggered reveals on all sections below fold
Mode toggle: .35s ease on all color/background properties
🧱 Engineering (37–44)
Components imported from @camel-ui — never rewritten
GlassCard, AmberButton, MonoStat, StatusBadge, SkeletonLoader all present
Error boundaries wrap all major sections
Toast system for success/error feedback — no alert()
tailwind.config.js uses shared cameltech tokens
Google Fonts in <head> with display=swap on all three fonts
Mobile-first — tested at 320px, 375px, 430px before desktop
No broken UI in any state — loading, error, empty all handled
🔑 UX & Identity (45–50)
App has unique icon, name, and secondary accent color from accent system
Navigation: glass pill navbar (desktop) or bottom tab bar (mobile-first)
Currency in locale format — TZS for Tanzania, format via Intl.NumberFormat
Timestamps: relative + exact in mono ("2h ago · 14:32")
Empty states: illustration or icon + amber CTA — never just blank/text
App feels premium, trustworthy, and unmistakably CamelTech ✅
Checklist Progress
0 / 50
Start building →