DESIGN — Look and Feel

Brand spelling

Always Cetking (not CETking, not CETKing) in anything students see.

Mood

A place where fun kids hang out AND are all growing. Playful, warm, calm. Not a stern exam factory.

Theme

Decided 4 Oct 2026: pure white + light grey, replacing the warm cream. Cards are white on a light grey page; text is dark grey with a muted grey for secondary lines. Mobile first. Every page uses the same pill nav (SiteNav), the shared PrimaryButton, and colour tokens from app/globals.css (never hard-coded colours).

Current tokens in app/globals.css are still the old cream set (bg #faf7f0, ink #0f0f14, muted #6b6a63). They switch to white + light grey as step 1 of the card-system build (see CARD-SYSTEM.md).

Cards

All content is shown as cards. Sizes, rules, lifecycles, page layouts, privacy and build order are in CARD-SYSTEM.md. Read it before building any Universe page.

Companions (all six are blob mascots)

Each one has its own silhouette, colour and eye shape, drawn in CODE (SVG outline + soft clay-texture filter), not picture files. They stay sharp at any size, are tiny, and can be animated or recoloured.

Names, colours, gradients and which shape each bot uses live only in config/companions.config.ts (BOTS). The outlines and eyes live in the SHAPES table in components/CompanionCharacter.tsx, keyed by shape name. To rename or recolour a bot, edit the settings file; to give a bot a different existing shape, change its shape there.

Rule: eyes are always plain white pills (a different shape per bot) and no bot has a mouth.

Known contrast note: white pills on yellow (Veda) and light blue (Mocky) are the weakest. Use darker eyes there if they look washed out on a phone.

Home page (current)

• Translucent pill top bar: Oracle icon + "Cetking" left, 3-line button right. Tap: a menu card of all six bots (icon + name + role) with a Join us button.
• Hero: Oracle large and pulsing, "Welcome home", headline "Your Learning Universe", subtitle "Most Advanced & Powerful Learning Platform with 6 Cetking AI Ecosystems". No CTA buttons in the hero.
• Right under the text: six bots standing on one baseline, always animating. Tap one: it springs to the middle with name, tagline and Enter; tap again to open its page.
• Footer: "Cetking.com your learning home." + overlapping avatar stack + "5,314 users of 2026 batch" (count is hard-coded until Supabase is live; avatars are bots, never fake student photos).

Student home (/app)

Pill nav, Oracle greeting card ("Welcome home."), three placeholder stat tiles (Streak, Mocks, Rank, no live data yet), then the five specialist companions as white cards (bot, name, role, arrow). Target layout after login is in CARD-SYSTEM.md section 6 (one hero, three rows, one nudge; streak moves to the profile).

Bot pages (/quant /verbal /logic /mocks /admissions)

All five use one shared layout (components/BotSubPage.tsx → CompanionPage.tsx): pill nav, big bot, role chip tinted in the bot's colour, "Meet ", tagline, the white tabbed island, the About card, and the six-bot lineup as footer. Subject pages use the same four tabs (Classes | Videos | Books | Practice) from components/subjectTabs.ts; Mocky has Login | Try for free | Battle. Inside the white card the bot is a small 44px signature in the bottom-right corner (half size since 5 Oct 2026). To change the layout of all five, edit the shared files.

Buttons — one shared component

Use components/ui/PrimaryButton.tsx for every primary action. Do not hand-roll CTA buttons. Every card has exactly one primary action (CARD-SYSTEM.md).

• Dark satin pill (min 48px, 24px side padding, 17px/600 sentence-case label, one 20px icon, 10px gap), 1px rim at 36% white, 1px top highlight at 16%, 6px dark recessed track, shadow 0 8px 24px.
• States: hover (rim brightens 200ms), pressed (down 1px, 120ms, smaller shadow), loading (spinner, same width, blocks double taps), success (check + text, only after it really succeeded), error (message + retry), disabled (muted), keyboard focus ring.
• Labels are clear actions: "Start mock", "Mark attendance", "View profile", "Save changes". Never "Click here" or "OK".
• Check contrast against the real page background, not just the opacity values.

Motion

See MOTION.md. Under 250ms, ease-out, no overshoot on UI, anchored transform origin, reduced-motion fades, transform and opacity only. Mascot loops and bounces are the deliberate exception.

Known gaps

• Blinking and glancing not done yet.
• Bot pages and /app have no live data yet; "Join us" and all bot buttons lead to /app until OTP login is plugged in.
• Theme tokens still cream until the card kit is built.
• Any pink written directly into page styles (from when Oracle was pink) may remain and should be checked, for example the .gradient-text class in globals.css still blends blue, purple and pink.