155 lines
12 KiB
JSON
155 lines
12 KiB
JSON
{
|
|
"schemaVersion": 2,
|
|
"generatedAt": "2026-05-29T00:00:00.000Z",
|
|
"title": "Design System: Yaltopia Tickets App",
|
|
"extensions": {
|
|
"colorMeta": {
|
|
"primary": {
|
|
"role": "primary",
|
|
"displayName": "Burnt Orange",
|
|
"canonical": "#E46212",
|
|
"tonalRamp": ["#4A1E04", "#7A3409", "#A84A0E", "#E46212", "#F08A3C", "#F5AD6A", "#FAD1A0", "#FFF0E0"]
|
|
},
|
|
"orange-deep": {
|
|
"role": "primary",
|
|
"displayName": "Orange Deep",
|
|
"canonical": "#CC580E",
|
|
"tonalRamp": ["#3D1A04", "#662B07", "#8F3D0A", "#CC580E", "#E67A2E", "#EDA05C", "#F4C692", "#FBEDD8"]
|
|
},
|
|
"foreground": {
|
|
"role": "neutral",
|
|
"displayName": "Ink",
|
|
"canonical": "#251615",
|
|
"tonalRamp": ["#0A0606", "#120C0B", "#1C1110", "#251615", "#4A2C2A", "#6E4542", "#93605C", "#B8807A"]
|
|
},
|
|
"muted-foreground": {
|
|
"role": "neutral",
|
|
"displayName": "Warm Stone",
|
|
"canonical": "#765D58",
|
|
"tonalRamp": ["#241C1A", "#3B2F2C", "#52423E", "#765D58", "#947D78", "#B09D9A", "#CCBFBC", "#E8E1DF"]
|
|
},
|
|
"border": {
|
|
"role": "neutral",
|
|
"displayName": "Rose Mist",
|
|
"canonical": "#EDD5D1",
|
|
"tonalRamp": ["#4A3F3D", "#786664", "#A68E8A", "#EDD5D1", "#F1DDDA", "#F4E6E3", "#F8EEEC", "#FCF7F6"]
|
|
},
|
|
"secondary": {
|
|
"role": "secondary",
|
|
"displayName": "Blush Tint",
|
|
"canonical": "#FFE2D8",
|
|
"tonalRamp": ["#4D2C25", "#7F4A3F", "#B2695A", "#FFE2D8", "#FFE9E0", "#FFF0E9", "#FFF6F2", "#FFFDFB"]
|
|
}
|
|
},
|
|
"typographyMeta": {
|
|
"display": { "displayName": "Display", "purpose": "Hero screen headings — h1 only. Reserved for page titles and key numbers." },
|
|
"headline": { "displayName": "Headline", "purpose": "Section titles — h2. Visually separated with bottom border." },
|
|
"title": { "displayName": "Title", "purpose": "Card titles, modal headers — h4." },
|
|
"body": { "displayName": "Body", "purpose": "Primary reading text, descriptions, list content." },
|
|
"label": { "displayName": "Label", "purpose": "Button text, form labels, small print, muted text." }
|
|
},
|
|
"shadows": [
|
|
{ "name": "tab-bar-lift", "value": "0 -10px 20px rgba(0,0,0,0.1)", "purpose": "Floating tab bar shadow in light mode only. Distinguishes navigation layer from content." },
|
|
{ "name": "android-elevation-sm", "value": "elevation: 2", "purpose": "Minimal Android elevation for pressable surfaces (buttons, cards on press)." },
|
|
{ "name": "android-elevation-md", "value": "elevation: 4", "purpose": "Default Android elevation for the floating tab bar." }
|
|
],
|
|
"motion": [
|
|
{ "name": "state-transition", "value": "opacity 0.2s ease-out", "purpose": "Button press, hover (web), and state changes. Quick, subtle." },
|
|
{ "name": "tab-bar-elevation", "value": "shadow-opacity 0.2s ease-out", "purpose": "Smooth shadow transition for floating tab bar." }
|
|
],
|
|
"breakpoints": [
|
|
{ "name": "sm", "value": "640px" }
|
|
]
|
|
},
|
|
"components": [
|
|
{
|
|
"name": "Primary Button",
|
|
"kind": "button",
|
|
"refersTo": "button-primary",
|
|
"description": "Primary CTA — Burnt Orange background, white text. Used for key actions: Save, Create, Scan, Submit.",
|
|
"html": "<div class=\"ds-btn-primary\">Scan Invoice</div>",
|
|
"css": ".ds-btn-primary { background: #E46212; color: #FFF9F4; font-family: 'DMSans-Medium', system-ui, sans-serif; font-size: 14px; font-weight: 500; padding: 10px 16px; border: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; transition: background 0.2s ease-out; } .ds-btn-primary:active, .ds-btn-primary:hover { background: #CC580E; } .ds-btn-primary:disabled { opacity: 0.5; pointer-events: none; }"
|
|
},
|
|
{
|
|
"name": "Secondary Button",
|
|
"kind": "button",
|
|
"refersTo": "button-secondary",
|
|
"description": "Secondary action — Blush Tint background, dark text. For less prominent actions.",
|
|
"html": "<div class=\"ds-btn-secondary\">Cancel</div>",
|
|
"css": ".ds-btn-secondary { background: #FFE2D8; color: #422520; font-family: 'DMSans-Medium', system-ui, sans-serif; font-size: 14px; font-weight: 500; padding: 10px 16px; border: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; transition: background 0.2s ease-out; } .ds-btn-secondary:active, .ds-btn-secondary:hover { background: #FFD5C8; } .ds-btn-secondary:disabled { opacity: 0.5; pointer-events: none; }"
|
|
},
|
|
{
|
|
"name": "Outline Button",
|
|
"kind": "button",
|
|
"refersTo": "button-outline",
|
|
"description": "Outline action — transparent background, 1px border, ink text. For tertiary actions.",
|
|
"html": "<div class=\"ds-btn-outline\">View Details</div>",
|
|
"css": ".ds-btn-outline { background: transparent; color: #251615; font-family: 'DMSans-Medium', system-ui, sans-serif; font-size: 14px; font-weight: 500; padding: 10px 16px; border: 1px solid #EDD5D1; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; transition: background 0.2s ease-out; } .ds-btn-outline:active, .ds-btn-outline:hover { background: #FFDECF; } .ds-btn-outline:disabled { opacity: 0.5; pointer-events: none; }"
|
|
},
|
|
{
|
|
"name": "Input Field",
|
|
"kind": "input",
|
|
"refersTo": "input",
|
|
"description": "Text input field — white background, coral border, ink text. Focus ring is red-orange.",
|
|
"html": "<input class=\"ds-input\" placeholder=\"Enter invoice number\" />",
|
|
"css": ".ds-input { background: #FFFFFF; color: #251615; font-family: 'DMSans-Regular', system-ui, sans-serif; font-size: 16px; padding: 8px 12px; border: 1px solid #F4CEC6; border-radius: 8px; min-height: 40px; width: 100%; outline: none; transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; box-sizing: border-box; } .ds-input:focus { border-color: #E95752; box-shadow: 0 0 0 3px rgba(233,87,82,0.2); } .ds-input::placeholder { color: #765D58; } .ds-input:disabled { opacity: 0.5; }"
|
|
},
|
|
{
|
|
"name": "Card",
|
|
"kind": "card",
|
|
"refersTo": "card",
|
|
"description": "Content container — white background, 1px rose border, rounded 12px corners. No shadow.",
|
|
"html": "<div class=\"ds-card\"><div class=\"ds-card-header\">Invoice Title</div><div class=\"ds-card-body\">Card content goes here.</div></div>",
|
|
"css": ".ds-card { background: #FFFFFF; border: 1px solid #EDD5D1; border-radius: 12px; padding: 0; display: flex; flex-direction: column; } .ds-card-header { padding: 16px 24px 8px; font-family: 'DMSans-SemiBold', system-ui, sans-serif; font-size: 20px; font-weight: 600; color: #251615; } .ds-card-body { padding: 8px 24px 16px; font-family: 'DMSans-Regular', system-ui, sans-serif; font-size: 16px; color: #765D58; }"
|
|
},
|
|
{
|
|
"name": "Filter Pill",
|
|
"kind": "custom",
|
|
"refersTo": "filter-pill",
|
|
"description": "Sharp rectangular filter chip for filtering lists. Small uppercase label.",
|
|
"html": "<div class=\"ds-filter-pill\">All Invoices</div><div class=\"ds-filter-pill ds-filter-pill-active\">Pending</div>",
|
|
"css": ".ds-filter-pill { background: rgba(228,98,18,0.08); color: #E46212; font-family: 'DMSans-Bold', system-ui, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 16px; border-radius: 4px; display: inline-flex; align-items: center; margin: 2px; } .ds-filter-pill-active { background: #E46212; color: #FFF9F4; }"
|
|
},
|
|
{
|
|
"name": "Navigation Tab Item",
|
|
"kind": "nav",
|
|
"refersTo": "navigation-tab",
|
|
"description": "Bottom tab bar item. Active state uses orange icon with subtle orange background pill.",
|
|
"html": "<div class=\"ds-nav-item\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#94a3b8\" stroke-width=\"2\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/></svg><span class=\"ds-nav-label\">Home</span></div><div class=\"ds-nav-item ds-nav-item-active\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#E46212\" stroke-width=\"2.5\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/></svg><span class=\"ds-nav-label ds-nav-label-active\">Home</span></div>",
|
|
"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), <alpha-value>)."
|
|
],
|
|
"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)."
|
|
]
|
|
}
|
|
}
|