Shared Red / Sun / Cream visual foundations for 12pm-website, 12pm-order, 12pm-partner and 12pm-admin. The current contract follows ref / sys / comp tokens, split Brand Red and Action Red roles, and reusable primitives.
First split of the catalog, modeled after TANTI's per-topic foundation and component pages.
Active wordmark, clock mark, tagline, personality and visual identity cues.
Open pageLogo usagePrimary stacked and horizontal logos, secondary clock mark, clear space and misuse rules.
Open pageBrand foundationActive board evidence, core tone and archived provenance boundary.
Open pageColorsBrand Red, Action Red, Sun, Cream, muted surfaces and quiet semantic status colors.
Open pageTypographyFont stack, semantic type roles and mixed Thai / English text rules.
Open pageSpacingReference spacing scale plus control and icon sizing roles.
Open pageRadiusControl, panel and pill radius roles with border usage guidance.
Open pageElevationFlat-by-default depth policy using borders and surface contrast first.
Open pageIconsLucide icon policy, tokenized sizes and accessibility expectations.
Open pageMotion & accessibilityFast motion token, focus ring and reduced-motion contract.
Open pageBrandMarkLogo primitive for app chrome, catalog identity and package-safe lockup use.
Open pageButtonButton variants, color policy and interaction states for MVP surfaces.
Open pageStatusChipRead-only tone badges for lifecycle, review and functional states.
Open pageTextFieldLabeled input primitive with hint, error and accessibility wiring.
Open pageFrontend token usageConsumer contract for website, order, partner and admin frontends using @12pm/design.
Open pageFigma libraryFigma variables and text styles handoff generated from the same 12PM token source.
Open pageActive mark reference
A better lunch break, thoughtfully prepared.
มื้อกลางวันที่คิดมาให้แล้ว เพื่อช่วงพักที่ดีกว่าเดิม
Active board evidence
Active visual foundation from the Figma Logo page and repository SVG masters: red wordmark, Sun dot, Cream canvas and clear archive boundary.
The current foundation follows the Figma Logo page plus the repository SVG masters stored beside BrandMark. Archived foundation files remain historical evidence and are not current visual authority.
Owner-provided stacked and horizontal red 12PM. marks with a Sun dot, grounded in the active logo direction.
Red circular clock with a Sun dot for compact support moments, not a replacement for readable 12PM naming.
Archived foundation material may remain as historical provenance only; it is not the current visual authority.
#E94B35 is Brand Red for the logo, identity accents and packaging-like brand moments.
#C83220 is Action Red for primary CTA, focus-visible rings and selected borders.
#F5C85B carries the dot, meal cue and small moments of care. Pair with Ink for text.
#FFF6E8 is the warm canvas for website, order and operational product surfaces.
Warm neutral surfaces and quiet slate/herb/oxblood/ochre status colors support the brand without becoming secondary identity colors.
Backward-compatible aliases plus the new ref / sys / comp model.
--12pm-sys-color-brand-ink--12pm-sys-color-brand-red--12pm-sys-color-action-primary--12pm-sys-color-brand-sun--12pm-sys-color-brand-cream--12pm-sys-color-action-primary-hover--12pm-sys-color-surface-muted--12pm-sys-color-surface-brand-soft--12pm-sys-color-dangerComposition guidance for keeping 12PM warm, accessible and operational without turning product surfaces into decorative red screens.
Use Cream, white and quiet borders for most screen area so operational views stay calm, readable and lunch-adjacent.
--12pm-sys-color-canvas / surfaceUse Action Red for the single strongest action, focus and selected borders. Keep Brand Red for identity so app screens stay recognizable without sacrificing CTA contrast.
--12pm-sys-color-action-primary / border-selectedUse Sun for the logo dot, small meal cues and warm highlights. Pair it with Ink for any text-bearing surface.
--12pm-sys-color-brand-sunInk is the text layer and status colors are functional exceptions; they protect readability, accessibility and operational meaning rather than competing with 12PM Red or Sun. Order screens can lean warmer; partner and admin screens stay more neutral-heavy when density increases. Brand Red `#E94B35` and Action Red `#C83220` are split after Owner Figma review so recognition and CTA contrast can each do their job.
Font and type roles for a warm, reliable and operational 12PM interface.
Primary interface text uses Prompt for Thai and Latin so website, order, partner and admin screens feel more aligned with the refreshed brand while staying readable and operational.
Brand display follows active boards through the SVG BrandMark; dense MVP workflows keep the shared UI type stack.
Use concise Thai labels, keep title roles at Medium, preserve exact English IDs and codes, and wrap mixed Thai/English strings instead of shrinking text by viewport.
Use display tokens for hero titles, page-title tokens for page H1s, section-title tokens for H2s, and subsection tokens for card titles. Browser strong/b map to the emphasis token at Medium; do not rely on them for heavier visual titles.
Token--12pm-sys-type-display-*--12pm-sys-type-page-title-*--12pm-sys-type-section-title-*--12pm-sys-type-subsection-*--12pm-sys-type-body-*--12pm-sys-type-label-*--12pm-sys-type-caption-*--12pm-sys-type-data-id-*Initial primitives exported from @12pm/design.
Use Action Red for the highest-value action in a view. Brand Red remains the logo and identity signal; Action Red carries interaction contrast.
--12pm-sys-color-action-primaryUse for normal saved-work, navigation and review actions so dense operational screens do not become overly saturated.
--12pm-sys-color-action-secondaryUse Red soft with an explicit selected border, icon, or label. Do not use Red soft as the default muted surface.
--12pm-sys-color-surface-selected / border-selectedPrimary uses Action Red rather than Brand Red. This keeps the logo red recognizable while giving CTA, focus and selected states their own stronger interaction value.
Enabled pointer state only; deepen the current variant without shifting layout.
Keyboard-visible ring uses the shared focus token and keeps the button color intact.
Unavailable actions become neutral and do not use brand color as a promise of progress.
In-flight actions stay on their variant, show progress, set aria-busy and block repeat taps.
Partner-visible code, owned by API validation.
Minimum qualifying quantity is required.
One visual language, different density per actor surface.