{ "schemaVersion": 3, "siteOrigin": "https://onkeiki.com", "repository": "https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/", "fonts": [ { "name": "Geist Variable", "usage": "Public headings and reading copy", "token": "--site-font", "detail": "Section introductions: 24px desktop / 22px mobile, 1.45 line height, −.035em tracking; 600-weight opening followed inline by 450-weight supporting text." }, { "name": "Inter Variable", "usage": "Public buttons and inputs", "token": "--font-sans", "detail": "Control labels: 14px / 20px, weight 500." }, { "name": "Playfair Display Variable", "usage": "The homepage finale", "token": "Playfair Display Variable", "detail": "Use only in the established homepage display treatment; public section headings use Geist and workspace titles use the device system font." }, { "name": "System monospace", "usage": "Code, asset URLs, and technical examples", "token": "--font-mono", "detail": "Use the existing ui-monospace, SF Mono, JetBrains Mono, monospace fallback stack." } ], "logos": [ { "name": "Navy mark", "path": "/design/keiki-mark-navy.svg", "fill": "#142653", "background": "#fafafa", "url": "https://onkeiki.com/design/keiki-mark-navy.svg" }, { "name": "White mark", "path": "/design/keiki-mark-white.svg", "fill": "#ffffff", "background": "#142653", "url": "https://onkeiki.com/design/keiki-mark-white.svg" } ], "interfaceReferences": [ { "name": "App shell and controls — light", "path": "/design/interface/app-light.jpg", "width": 1280, "height": 720, "url": "https://onkeiki.com/design/interface/app-light.jpg", "capturedAt": "2026-10-12", "kind": "Shared components rendered with sample data" }, { "name": "App shell and controls — dark", "path": "/design/interface/app-dark.jpg", "width": 1280, "height": 720, "url": "https://onkeiki.com/design/interface/app-dark.jpg", "capturedAt": "2026-10-12", "kind": "Shared components rendered with sample data" }, { "name": "Sidebar — light", "path": "/design/interface/sidebar-light.jpg", "width": 250, "height": 720, "url": "https://onkeiki.com/design/interface/sidebar-light.jpg", "capturedAt": "2026-10-12", "kind": "Shared components rendered with sample data" }, { "name": "Inputs, buttons, select, and composer — light", "path": "/design/interface/controls-light.jpg", "width": 688, "height": 590, "url": "https://onkeiki.com/design/interface/controls-light.jpg", "capturedAt": "2026-10-12", "kind": "Shared components rendered with sample data" }, { "name": "Inputs, buttons, select, and composer — dark", "path": "/design/interface/controls-dark.jpg", "width": 688, "height": 590, "url": "https://onkeiki.com/design/interface/controls-dark.jpg", "capturedAt": "2026-10-12", "kind": "Shared components rendered with sample data" }, { "name": "Focused input — light", "path": "/design/interface/input-focus-light.jpg", "width": 688, "height": 90, "url": "https://onkeiki.com/design/interface/input-focus-light.jpg", "capturedAt": "2026-10-12", "kind": "Shared components rendered with sample data" }, { "name": "Focused input — dark", "path": "/design/interface/input-focus-dark.jpg", "width": 688, "height": 90, "url": "https://onkeiki.com/design/interface/input-focus-dark.jpg", "capturedAt": "2026-10-12", "kind": "Shared components rendered with sample data" } ], "visualStyle": [ "White public canvas, deep navy text, Keiki blue primary actions, muted blue supporting copy, and fine neutral structural dividers. Public pages stay light even when the workspace is dark.", "1448px shared site frame; 24px outer gutter; 40px content inset on desktop and 20px on mobile. A fixed 5px Keiki-blue viewport frame appears on desktop and disappears on phones.", "Use attached introductions: a dark semibold opening followed immediately by muted supporting copy in the same passage. Keep headings compact and introductions left-aligned outside the homepage.", "32px desktop controls with 12px corners, 14px/20px Inter labels and 16px Pixel icons; retain the shared larger touch targets. Artwork and product windows use the existing 16px corners.", "Use richly textured color artwork with grain, soft focus, classical figures and landscapes. Preserve original files and intentional crops. Put product content on opaque white surfaces so it stays readable.", "Golden yellow is reserved for native text selection with navy selected text. The portrait-inspired gradient runs from #032455 through #2c5fc1, #c1c4dd and #ebb769 to #e54823; use it only in established chart and separator contexts.", "Use Nucleo Pixel icons from app-icons.tsx and actual service logos. Retain original one-bit agent avatars. Connect structural cells with square seams and single neutral dividers.", "Keep native scrolling, visible keyboard focus, labeled fields, clear disabled states, and reduced-motion support. Control feedback uses brief color changes; preserve the shared behavior without bounce or press scaling.", "Write plain sentence-case labels and short, specific product copy. Do not add unverified statistics, integrations, certifications or live-result claims." ], "patterns": [ { "name": "Brand mark", "source": "src/components/keiki-mark.tsx", "detail": "Reuse KeikiMark, the existing engraved rocking-foal SVG that inherits the current ink color; do not redraw the logo." }, { "name": "Public shell", "source": "src/components/landing/site-layout.tsx", "detail": "Compose SiteLayout, PageHeader and SectionHeading; use shared site.css and chrome.css. Navbar: logo left, destinations centered, Log in /login and Get started /signup right." }, { "name": "Section introductions", "source": "src/components/landing/section-heading.tsx", "detail": "Use semantic headings and paragraphs displayed as one flowing passage, with the existing Pixel category icon." }, { "name": "Actions", "source": "src/components/ui/button.tsx", "detail": "Use Button or buttonClassName for links; primary public actions are blue, secondary actions neutral, with shared keyboard, touch and disabled behavior." }, { "name": "Copy actions", "source": "src/components/ui/copy-button.tsx", "detail": "Use CopyButton for labeled clipboard actions with success feedback; provide readable selectable content when clipboard access fails." }, { "name": "Fields", "source": "src/components/ui/form.tsx", "detail": "Use Field, Input, Textarea and SearchInput with labels, shared hairline edges and focus rings." }, { "name": "Selection", "source": "src/components/ui/select.tsx", "detail": "Use Select and the shared ToggleSwitch; retain keyboard selection and readable selected state." }, { "name": "Surfaces and status", "source": "src/components/ui/card.tsx", "detail": "Use Card and Badge with quiet neutral structure and semantic status colors." }, { "name": "Template directory", "source": "src/components/landing/templates-page.tsx", "detail": "Identity tile, clear title and description, full-width Get started action. Keep search, category, loading, empty and recovery states." }, { "name": "Editorial reading", "source": "src/components/blog/blog-article.tsx", "detail": "Blog titles: 24px/1.4, weight 600, −.025em tracking. Descriptions: 16px/1.5, weight 450. Body: 16px/1.65." } ], "brandReference": "# Keiki brand guidelines\nPublic brand page: https://onkeiki.com/design\nUse this complete guide for websites, videos, presentations, social graphics, and product references. Preserve Keiki’s identity across formats. Existing source values below are authoritative; the cross-format production advice is guidance for new work, not a claim that a historical video specification exists.\n\n## Identity and naming\nWrite Keiki with a capital K and lowercase eiki. Use Keiki for the company and product. The public domain is onkeiki.com. Do not turn the name into KEIKI, KeiKi, or an invented abbreviation. In plain text, write the name naturally rather than inventing a new wordmark.\nCharacter: a clear white canvas, confident navy typography, precise blue actions, and expressive original artwork. Pair a restrained, useful interface with textured, soft-focus imagery. The engraved rocking foal is the recognizable brand mark. Keep the surrounding composition quiet enough for it and the artwork to carry the character.\n\n## Logo — production assets and usage\n- Navy mark: transparent SVG, fill #142653, viewBox 0 0 512 456. Download: https://onkeiki.com/design/keiki-mark-navy.svg\n- White mark: transparent SVG, fill #ffffff, viewBox 0 0 512 456. Download: https://onkeiki.com/design/keiki-mark-white.svg\n- Original source artwork: https://onkeiki.com/brand/keiki-rocking-foal-v1.png\n- Favicon: https://onkeiki.com/favicon.svg\n- Exact source geometry: https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/src/components/keiki-mark.tsx\nUse the supplied vector files. They contain the same engraved rocking-foal path as the production website. The SVG has a 512:456 aspect ratio; scale proportionally and preserve its viewBox. Its background is transparent. Use the navy version on white or very light surfaces, and the white version on deep navy or another sufficiently dark, uncluttered surface.\nKeep the whole mark visible, with generous clear space on every side. For new compositions, start with at least one-quarter of the displayed mark’s height as clear space; this is adaptation guidance rather than an existing measured logo policy. At small sizes, inspect the engraving at actual output size and use the existing favicon when appropriate. Never stretch, crop, rotate, trace, redraw, add a glow, add a drop shadow, fill it with a gradient, or merge it into another symbol. Avoid placing fine engraving over busy imagery.\nThere is no separately supplied wordmark in this guide. Pair the real mark with the naturally written name in Geist when a layout needs both; do not represent an improvised lockup as an official alternate logo.\n\n## Colors — exact values and roles\n- Keiki blue: #0742a0; RGB 7, 66, 160; CSS token --color-kumo-brand. Role: Primary actions, links, and the outer site frame. For a solid specimen panel use #ffffff text.\n- Deep navy: #142653; RGB 20, 38, 83; CSS token --home-foreground. Role: Headings, body text, and the logo on light surfaces. For a solid specimen panel use #ffffff text.\n- Canvas: #ffffff; RGB 255, 255, 255; CSS token --home-background. Role: The primary public background. For a solid specimen panel use #142653 text.\n- Soft surface: #fafafa; RGB 250, 250, 250; CSS token --home-soft. Role: Quiet secondary backgrounds. For a solid specimen panel use #142653 text.\n- Muted blue: #43557a; RGB 67, 85, 122; CSS token --home-muted. Role: Supporting copy and descriptions on white. For a solid specimen panel use #ffffff text.\n- Secondary blue: #596a88; RGB 89, 106, 136; CSS token --home-subtle. Role: Secondary labels and metadata on white. For a solid specimen panel use #ffffff text.\n- Neutral line: hsl(0, 0%, 92%); RGB 235, 235, 235; CSS token --home-line. Role: Fine structural dividers; never reading text. For a solid specimen panel use #142653 text.\n- Selection: #d9b75d; RGB 217, 183, 93; CSS token --home-highlight. Role: Native text selection with navy selected text. For a solid specimen panel use #142653 text.\nDefault public composition: white background, navy headings and body copy, muted blue supporting copy, and blue interactive emphasis. Use blue deliberately for actions, links, and identity; do not wash every panel with blue. White is the dominant surface. Neutral lines may separate structural groups but must not become an all-over grid of redundant borders.\nColor alone does not communicate state. Use text or an icon alongside success, warning, and error treatments from the shared UI tokens. Selection gold is a text-selection treatment, not a generic CTA, warning, or replacement brand color. Navy-on-white and white-on-blue are established readable pairings. For new artwork or dark treatments, measure contrast rather than assuming a sampled color is readable.\nThe portrait-derived accent gradient is #032455 0%, #2C5FC1 30%, #C1C4DD 62%, #EBB769 80%, #E54823 100%. Existing usage is limited to chart and separator contexts. It is not the logo fill or a default page background. For a new video adaptation, reserve it for a restrained accent only when it serves the composition.\n\n## Typography — families and hierarchy\n- Geist Variable: Public headings and reading copy. Token: --site-font. Section introductions: 24px desktop / 22px mobile, 1.45 line height, −.035em tracking; 600-weight opening followed inline by 450-weight supporting text.\n- Inter Variable: Public buttons and inputs. Token: --font-sans. Control labels: 14px / 20px, weight 500.\n- Playfair Display Variable: The homepage finale. Token: Playfair Display Variable. Use only in the established homepage display treatment; public section headings use Geist and workspace titles use the device system font.\n- System monospace: Code, asset URLs, and technical examples. Token: --font-mono. Use the existing ui-monospace, SF Mono, JetBrains Mono, monospace fallback stack.\nWeb font sources: @fontsource-variable/geist, @fontsource-variable/inter, and @fontsource-variable/playfair-display are the installed font packages. Use the actual fonts, not an approximate replacement. For desktop video or slide tools, obtain the corresponding desktop font from its upstream distribution and retain its license; WOFF2 is a web font format, not a desktop editing font.\nPublic reading copy uses Geist, while the authenticated workspace uses its existing device system font. Keep those contexts distinct. Established editorial title: 24px, weight 600, line height 1.4, tracking −.025em; description: 16px, weight 450, line height 1.5; reading body: 16px, line height 1.65. Shared section introductions use a semibold opening followed inline by supporting copy. Reserve Playfair for the established homepage finale rather than introducing serif headlines everywhere.\nFor new video and presentation compositions, carry over the families, weight contrast, and restrained hierarchy. Adapt type size to the final canvas and viewing distance; CSS pixels are not a video typography specification. Use short sentence-case headings, comfortable line height, and no tiny caption text. Keep lines of reading copy to roughly 60–75 characters; do not justify text or squash tracking to fit.\n\n## Layout and composition\n- White public canvas, deep navy text, Keiki blue primary actions, muted blue supporting copy, and fine neutral structural dividers. Public pages stay light even when the workspace is dark.\n- 1448px shared site frame; 24px outer gutter; 40px content inset on desktop and 20px on mobile. A fixed 5px Keiki-blue viewport frame appears on desktop and disappears on phones.\n- Use attached introductions: a dark semibold opening followed immediately by muted supporting copy in the same passage. Keep headings compact and introductions left-aligned outside the homepage.\n- 32px desktop controls with 12px corners, 14px/20px Inter labels and 16px Pixel icons; retain the shared larger touch targets. Artwork and product windows use the existing 16px corners.\n- Use richly textured color artwork with grain, soft focus, classical figures and landscapes. Preserve original files and intentional crops. Put product content on opaque white surfaces so it stays readable.\n- Golden yellow is reserved for native text selection with navy selected text. The portrait-inspired gradient runs from #032455 through #2c5fc1, #c1c4dd and #ebb769 to #e54823; use it only in established chart and separator contexts.\n- Use Nucleo Pixel icons from app-icons.tsx and actual service logos. Retain original one-bit agent avatars. Connect structural cells with square seams and single neutral dividers.\n- Keep native scrolling, visible keyboard focus, labeled fields, clear disabled states, and reduced-motion support. Control feedback uses brief color changes; preserve the shared behavior without bounce or press scaling.\n- Write plain sentence-case labels and short, specific product copy. Do not add unverified statistics, integrations, certifications or live-result claims.\nThe brand page itself uses a narrow centered reading column with a centered hero and left-aligned section headings, generous vertical spacing, paired logo panels, and color values centered inside large swatches. Its quieter brand-resource layout is an owner-approved exception to full-frame marketing section grids. Keep content aligned to a few shared edges. In a new slide or video, use the same hierarchy and clear space rather than drawing a literal browser frame around every scene.\nGroup related content with space before adding separators. Use one main message or action per composition. Put labels close to the object they describe. Avoid nested cards, decorative dashboards, excessive pill labels, gratuitous feature lists, and multiple competing CTA styles. On the web, retain real links, native keyboard navigation, visible focus, and touch targets from the shared controls.\n\n## Artwork — approved library and art direction\nThe eight selected files below are the reference library. Their visual character includes grain, rich blue fields, warm highlights, classical figures, soft focus, and atmospheric landscapes. Use originals before generating substitutes. Let artwork provide texture and color; keep information on a readable opaque surface or a quiet area of the frame. Preserve original proportions when showing a complete work. A crop may fill a thumbnail, but do not stretch it or crop a subject accidentally.\n- Color portrait: Homepage hero, pricing backdrop, Introducing Keiki, and authentication. Original file: https://onkeiki.com/landing/person-color.jpeg\n- Lady: Homepage template artwork. Original file: https://onkeiki.com/landing/ladyyy.png\n- Crying figure: Homepage template artwork. Original file: https://onkeiki.com/landing/cry.png\n- Star hand: Homepage template artwork. Original file: https://onkeiki.com/landing/star-hand.png\n- Boat: Homepage template artwork. Original file: https://onkeiki.com/landing/boat.png\n- Crown: Homepage template artwork. Original file: https://onkeiki.com/landing/crown.jpeg\n- Landscape: Homepage template artwork. Original file: https://onkeiki.com/landing/land.jpeg\n- Panorama: Homepage footer reveal. Original file: https://onkeiki.com/landing/ultrawide.png\nGeneration provenance is incomplete. The gallery omits solution, editorial, changelog, and product-example imagery at the owner’s request. Do not reintroduce those files merely because they remain in the repository. Do not invent an artist credit, generation prompt, usage license, or rights statement that the source notes do not provide. The gallery preview is a 4:3 cover crop; a download returns the original file.\n\n## Icons and integration identities\nUse the existing Nucleo Pixel icon exports: https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/src/components/ui/app-icons.tsx\nUse actual service logos for integrations and the original one-bit agent avatars where the product already uses them. Do not substitute emoji, initials, or a different service’s logo. Cursor, Anthropic, and OpenAI marks in the Copy for agents button identify compatible tools; they are not Keiki’s logo or palette. A brand video end card should use the Keiki mark, not those tool marks.\n\n## Motion and video production\nExisting web behavior: native scrolling, brief control feedback, no bounce or press scaling. The shared copy label transitions over 180ms with ease-out and a 4px vertical offset; reduced motion uses a 120ms opacity transition with no translation. Do not extrapolate this into a requirement to animate all content.\nFor new videos, use an understated pace: a clear opening message, one idea per scene, and an uncluttered final frame with the genuine Keiki mark and onkeiki.com. Prefer clean cuts and restrained fades. Optional artwork movement should be slow, subtle, and preserve the subject; do not warp the logo, add bouncing captions, neon trails, stock futuristic holograms, or constant zooms. This is adaptation guidance, not a pre-existing brand motion preset.\nAdapt for the requested aspect ratio: landscape presentations, square social graphics, and portrait video each need their own crop and text placement. Keep the logo and essential copy away from crop edges and platform overlays. Check the final output at actual viewing size. Leave enough reading time for each sentence. Caption spoken content and keep music below narration; no official audio identity or soundtrack is supplied, so do not invent one. For web delivery, honor reduced motion and provide a visible pause control for autoplaying media.\n\n## Writing and messaging\nVoice: direct, calm, concrete, and useful. Address the reader naturally. Prefer familiar words, active verbs, short paragraphs, and sentence case. Buttons name the action: Copy for agents, Copy URL, Download, Get started. An error explains what happened and how to recover. Avoid hype, vague AI promises, exclamation-heavy slogans, and technical implementation details in a customer-facing flow.\nDescribe only capabilities supported by current public pages and documentation. Do not fabricate statistics, testimonials, customers, integrations, security certifications, guarantees, or live results. For a video or campaign, agree on the factual message before visual production. Treat examples and generated imagery as illustrative rather than evidence of a real customer or result.\n\n## App interface — exact sizing and screenshot references\nThe public site and the app share Keiki identity but have different typography and surfaces. The app uses device system fonts, a neutral canvas, compact controls, and a persistent sidebar. Do not put Playfair titles, marketing-scale headings, or decorative artwork behind an operational form.\nMeasured on production’s public login on 2026-10-12: inputs and the sign-in button are 32px tall, with 12px corners, 14px font size, 20px line height, and 12px horizontal padding. Production /home redirects to sign-in in this inspection session; authenticated production sidebar measurements are therefore not claimed.\nThe following JPEGs were captured on 2026-10-12 from the current real SidebarLayout, Field, Input, SearchInput, Textarea, Select, Button, and PromptBar components, rendered with the built app stylesheet and fictional sample data. They are component reference plates, not a complete production workflow or customer workspace. The full plates are 1280×720 at 1 CSS pixel per image pixel; the crops retain that scale. Use them as image inputs when making a video rather than guessing how the controls look. Refresh them when their shared components change.\n- App shell and controls — light: 1280×720 JPEG. Image input: https://onkeiki.com/design/interface/app-light.jpg\n- App shell and controls — dark: 1280×720 JPEG. Image input: https://onkeiki.com/design/interface/app-dark.jpg\n- Sidebar — light: 250×720 JPEG. Image input: https://onkeiki.com/design/interface/sidebar-light.jpg\n- Inputs, buttons, select, and composer — light: 688×590 JPEG. Image input: https://onkeiki.com/design/interface/controls-light.jpg\n- Inputs, buttons, select, and composer — dark: 688×590 JPEG. Image input: https://onkeiki.com/design/interface/controls-dark.jpg\n- Focused input — light: 688×90 JPEG. Image input: https://onkeiki.com/design/interface/input-focus-light.jpg\n- Focused input — dark: 688×90 JPEG. Image input: https://onkeiki.com/design/interface/input-focus-dark.jpg\nDesktop sidebar: 250px expanded width. Organization header and page toolbar are 36px tall with aligned bottom edges. Header label is 13px/20px, weight 500, with a 20px avatar. Navigation has 12px outer horizontal inset, 8px row padding, 28px rows, 13px/20px regular system text, and 14px Pixel glyphs in 16px frames. There is 12px space above navigation content. Workspace, Customers, and Operations groups start expanded.\nSelected destination: transparent row background, ordinary foreground and normal text weight, with a 2px×16px blue leading marker. Dotted neutral rules follow labels with an 8px gap. The desktop sidebar stays expanded; below 768px, navigation becomes a drawer opened from the toolbar. Use the real drawer and its close/Escape/focus behavior rather than drawing an unrelated mobile navigation pattern.\nRegular buttons, text inputs, and select triggers: 32px high, 12px corners, and 14px/20px text; button labels are weight 500, text inputs weight 400. Input horizontal padding is 12px; SearchInput reserves its leading 16px glyph. Shared desktop textarea minimum height is 96px with 12px corners, 12px horizontal/8px vertical padding, and the existing 13px reading treatment. Let longer text expand or scroll rather than distorting its type.\nCompact toolbar buttons are the exception: 24px high, 12px/16px labels, 8px corners. Coarse-pointer actions preserve at least 44px targets. Preserve the shared mobile input sizing rules from source instead of squeezing a desktop screenshot into a portrait frame.\nCompact PromptBar measured in the reference render: 36px idle height, 12px outer corners, 6px padding, 24px controls with 8px corners, and 14px/20px input text. The source owns textarea growth and scrolls long drafts after 132px. Preserve the normal attachment/send placement and icons. Do not copy the roomier empty-state composer’s geometry into every compact chat entry.\nApp field focus stays neutral: a 1px inset hairline and a subtle 2px outer ring, with a 200ms ease-in-out edge/ring transition and no layout shift. Keep pointer focus understated and keyboard focus clearly visible. The inner composer textarea stays borderless; its outer container carries focus. Use supplied focused-input references to show this accurately.\nLight app: use the actual semantic gray tokens from geist-colors.css and theme-keiki.css. Dark app: canvas #121212, elevated/control surface #1d1d1d, line #303030, regular foreground #f2f2f2, supporting text #b5b5b5, primary action #1654C3, brand/link text #809DE2. Public pages remain white with navy copy even when the workspace theme is dark. Do not apply the public navy body color to a dark app screen.\nMenus and dialogs: reuse the shared primitives, neutral surfaces, semantic labels, focus trapping/restoration, keyboard selection, and scrolling. App tables keep compact labels, dotted neutral row separation, readable status badges, actual service/model logos, and reachable row actions. Derive exact widths from the real target screen rather than inventing one generic table or dropdown for a video.\nApp shell and sidebar source: https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/src/components/sidebar-layout.tsx\nInput/search/textarea/field source: https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/src/components/ui/form.tsx\nSelect source: https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/src/components/ui/select.tsx\nChat composer source: https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/src/components/beautiful-ui/prompt-bar.tsx\nComposer sizing: https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/src/components/beautiful-ui/prompt-bar.css\nMenus: https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/src/components/ui/dropdown-menu.tsx\nDialogs: https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/src/components/ui/dialog.tsx\nApp theme and focus tokens: https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/src/theme-keiki.css\nBase gray palette: https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/src/geist-colors.css\nShared app sizing and font rules: https://github.com/Mail-0/sms-kit/blob/initial-scaffold/packages/platform/web/src/styles.css\n\n## Component reconstruction map for agents\nStart by deciding what you are making. For a product close-up in a video or slide, use the supplied app reference image and crop it. For an interactive screen in this repository, compose the existing exports below inside the current app; do not approximate their styling with a new UI kit. For work outside the repository, use the measured geometry and supplied images as the visual specification, and clearly distinguish a recreated illustration from a live product.\n| Component | Actual export and geometry | Appearance and behavior to preserve |\n| --- | --- | --- |\n| App shell | SidebarLayout in src/components/sidebar-layout.tsx; 250px desktop sidebar; 36px organization/header bar | Neutral app canvas, 13px system navigation, 28px destination rows, Pixel icons, dotted rules, transparent selected row with a 2px blue leading marker; drawer below 768px |\n| Page content | PageHeader and PageBody from sidebar-layout.tsx | Compact 13px/20px medium toolbar title; page actions portaled into the existing toolbar. PageBody uses 12px side padding, 24px top padding, 40px bottom padding, and 24px child-group spacing. A route may supply a narrower content wrapper; do not treat a screenshot form width as a global fixed width |\n| Field and input | Field and Input in src/components/ui/form.tsx; input 32px high, 12px corners, 12px side padding, 14px/20px text | Field associates the real label and supporting hint; white light-mode control surface, neutral inset hairline, muted placeholder, correct error/disabled state. Coarse-pointer minimum height is 44px and input text is 16px |\n| Search | SearchInput in form.tsx; 32px high, 12px corners; 28px left/12px right input padding | Existing 16px Nucleo search glyph at 8px from the leading edge, muted ink, real type=search semantics. Do not center the search icon or replace it with an emoji |\n| Multiline input | Textarea in form.tsx; minimum 96px, 12px corners, 12px horizontal/8px vertical padding, 13px relaxed text | Neutral inset hairline, real field association, resize/scroll behavior and 16px coarse-pointer text. It is a form field, distinct from the borderless inner chat input |\n| Buttons | Button in src/components/ui/button.tsx; regular 32px high, 12px corners, 12px side padding, 14px/20px medium labels | primary/brand use the real Keiki blue fill with white ink; secondary/outline use shared neutral surface/hairline tokens; preserve hover, disabled, keyboard focus and actual click action. Compact toolbar exceptions are 24px high with 8px corners and 12px/16px labels |\n| Select | Select in src/components/ui/select.tsx; 32px trigger, 12px corners, 14px/20px text; 12px leading/8px trailing padding | Actual Pixel caret, selected label, muted placeholder and disabled state. Popup matches trigger width, sits 6px below it, keeps 8px collision clearance, supports keyboard selection and respects available height |\n| Chat entry | PromptBar in src/components/beautiful-ui/prompt-bar.tsx; compact idle 36px, 12px outer corners, 6px padding, 24px/8px controls | Leading attachment action, editable borderless inner textarea, trailing send/stop action, normal 14px/20px text. Preserve draft-driven growth up to 132px and the existing busy/send/attachment states; do not make every composer spacious |\n| Menus and dialogs | DropdownMenu and Dialog primitives in src/components/ui | Use the original portal, neutral surface, dismissal, focus return and keyboard handling. Capture the specific real menu/dialog for a video instead of inventing a generic floating panel |\nThe app font stack is system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif. Source sets font-synthesis:none, optical sizing and kerning, and the established macOS ss07/ss06 features. App reading copy defaults to 13px/20px; shared form controls deliberately use 14px/20px. Public pages use Geist reading copy and Inter controls. This distinction is central to matching the actual product.\nExact light-app surfaces from current theme tokens: canvas #fafafa, control/base #ffffff, subtle fill #f2f2f2, hairline #ebebeb, normal foreground hsl(0,0%,9%), supporting/placeholder hsl(0,0%,30%), primary #0742A0, primary hover #042766. App text selection is blue with white text; public selection is gold with navy text. Use the source dark tokens and dark reference plates for a dark app scene; never invert a light screenshot or apply a navy marketing canvas to the app.\n\n### Existing component composition — forms\nThe following is a composition recipe, not a standalone application. name/search/instructions/responseStyle are controlled state, and the setters plus saveChanges/resetChanges must be bound to the existing screen’s real handlers. Import the built styles and render in the app’s current theme/router/query providers; those providers and handlers are not replaced by this snippet.\n```tsx\nimport { Button } from '~/components/ui/button'\nimport { Field, Input, SearchInput, Textarea } from '~/components/ui/form'\nimport { Select } from '~/components/ui/select'\n\n
\n \n setName(e.target.value)} />\n \n setSearch(e.target.value)} />\n \n