name: Thinklogi Design System
description: Mobile-first decision feed with tactile choice cards, warm paper surfaces, teal progress, and yellow choice badges.
colors:
pageBg: "#ece7df"
pageBgAlt: "#dbe8e6"
frame: "#f8f7f4"
ink: "#161719"
textMuted: "#626866"
meta: "#67706d"
card: "#fffdfa"
darkCard: "#101114"
teal: "#38d0b2"
tealSoft: "#d6eee9"
tealBorder: "#b5d7d0"
yellow: "#f7cc5b"
chip: "#f0eee8"
typography:
body-md: { fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 14px, fontWeight: 400, lineHeight: 1.45, letterSpacing: 0 }
eyebrow: { fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 12px, fontWeight: 750, lineHeight: 1.2, letterSpacing: 0 }
title-lg: { fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 23px, fontWeight: 800, lineHeight: 1.1, letterSpacing: 0 }
card-title: { fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif", fontSize: 22px, fontWeight: 800, lineHeight: 1.18, letterSpacing: 0 }
rounded: { chip: 7px, md: 8px }
spacing: { xs: 3px, sm: 6px, md: 10px, lg: 14px, xl: 18px, bottomNav: 86px }
components:
phoneFrame: "430px max mobile frame with fixed-height feed and warm paper background."
choiceCard: "Image-backed dark card with bottom gradient overlay and hold progress meter."
choiceBadge: "Yellow square badge for A or B identity."
goalPill: "Teal-soft pill with border for current goal context."Overview
Thinklogi is a mobile-first decision feed. The interface is built around tactile choice cards and a press-hold voting model, so hierarchy must make the current decision and two choices immediately legible.
Colors
Warm paper backgrounds frame the product. Dark choice cards create contrast for image-led decisions. Teal marks goals and hold progress; yellow marks choice identity. Chips use a quiet beige-gray so metadata does not compete with the vote cards.
Typography
Use the Inter/system stack. Titles are compact but bold. Eyebrows are uppercase and small. Descriptive copy is muted and uses a 1.45 line-height for mobile readability.
Layout
The source layout centers a phone-width frame with top bar, scrolling screen, and bottom-safe padding. The choice stack uses two rows and changes row proportions while holding. Maintain stable dimensions so holding a card feels intentional rather than jumpy.
Elevation & Depth
Depth comes from background contrast, card borders, image overlays, and progress. Avoid additional shadows; the feed already has strong image contrast.
Shapes
Use 8px for cards, pills, overlays, and badges. Small metadata chips can use 7px. Do not introduce fully rounded mobile pills except where interaction state requires it.
Components
Choice cards must support image cover, gradient overlay, title, muted description, choice id, and a bottom hold meter. Goal pills and decision metadata should stay compact. Empty states reuse the same card surface.
Do's and Don'ts
Do keep the decision card and two choices in the first interaction path. Do preserve the yellow choice id and teal hold meter. Don't add marketing hero sections. Don't let copy or badges cover the visual subject of a choice card.