",
"css": ".ds-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px; min-width: 48px; } .ds-nav-item-active { background: rgba(228,98,18,0.05); border-radius: 16px; padding: 8px; } .ds-nav-label { font-family: 'DMSans-Bold', system-ui, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; } .ds-nav-label-active { color: #E46212; }"
}
],
"narrative": {
"northStar": "The Mobile Desk",
"overview": "A warm, approachable, human workspace in your pocket. Yaltopia feels like a capable desk you carry with you — organized, reliable, and unpretentious. The orange primary (#E46212) anchors the system with warmth and confidence; it's present but not overwhelming, like a trusted tool within reach. This system rejects corporate sterility (no navy-and-gray enterprise aesthetics) and consumer playfulness (no cartoonish illustrations or gamified elements). Every surface is flat with subtle borders — depth is communicated through clean edges and deliberate spacing, not shadows.",
"keyCharacteristics": [
"Flat surfaces, clean borders, no shadows at rest",
"Warm orange confidence without aggression",
"True white backgrounds, not tinted cream",
"DM Sans across the board — one family, multiple weights",
"Thumb-friendly mobile layout — primary actions in easy reach"
],
"rules": [
{ "name": "The Flat Edge Rule", "body": "Never use box-shadows on surfaces at rest. All depth is communicated through borders and spacing. The only shadows in the system are on the floating tab bar (ambient lift to distinguish the navigation layer from content).", "section": "colors" },
{ "name": "The One Orange Rule", "body": "The primary orange appears on ≤20% of any screen. Buttons, active tabs, and no more. If it covers more surface than that, the interface is shouting.", "section": "colors" },
{ "name": "The Single Family Rule", "body": "No second typeface. If the hierarchy needs more contrast, reach for weight (800 vs 400), not a new font. DM Sans's range from Regular to ExtraBold provides enough range.", "section": "typography" }
],
"dos": [
"Do use Burnt Orange (#E46212) sparingly — CTAs, active indicators, the scan FAB. Its rarity is the point.",
"Do use True White (#FFFFFF) backgrounds. No cream, beige, sand, or warm-tinted neutrals.",
"Do use DM Sans across the entire app — weight contrast creates hierarchy.",
"Do use flat surfaces with borders for depth. No shadows on cards, buttons, or containers.",
"Do use uppercase labels only for short badges and section labels (9px, 700 weight, wide tracking).",
"Do follow the shadcn/ui convention: CSS custom properties as RGB comma-separated values, consumed by Tailwind via rgba(var(--X), )."
],
"donts": [
"Don't use box-shadow and border together on the same element — pick one (border for cards, neither for buttons at rest).",
"Don't use gradient text, glassmorphism, side-stripe borders, or hand-drawn SVG illustrations.",
"Don't use generic AI-default palettes (cream backgrounds, warm-tinted neutrals, flat gray body text).",
"Don't exceed 3 font families. One family (DM Sans) is the rule.",
"Don't use all-caps for body copy or headings longer than 4 words.",
"Don't make the interface look corporate (navy, heavy grays, enterprise sterility), cartoonish (playful mascots, gamification), or cluttered (information without hierarchy)."
]
}
}