Initial commit: TooraSt-wikijs

2026-08-26 13:18:50 +10:00
commit e97f148ef6
3 changed files with 816 additions and 0 deletions
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -0,0 +1,270 @@
+---
+version: alpha
+name: Vodafone-design-analysis
+description: An inspired interpretation of Vodafone's design language — a telecom super-brand whose web surface alternates between editorial photography hero bands with massive uppercase display headlines and clean white content bands, anchored by the company's signature scarlet red CTA and the proprietary Vodafone display sans set at impossibly heavy 800 weight.
+
+colors:
+  primary: "#e60000"
+  on-primary: "#ffffff"
+  ink: "#25282b"
+  body: "#7e7e7e"
+  mute: "#bebebe"
+  canvas: "#ffffff"
+  canvas-soft: "#f2f2f2"
+  on-dark: "#ffffff"
+
+typography:
+  display-hero:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 144px
+    fontWeight: 800
+    lineHeight: 114px
+    letterSpacing: -1px
+  display-xxl:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 126px
+    fontWeight: 800
+    lineHeight: 113px
+    letterSpacing: -1px
+  display-xl:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 90px
+    fontWeight: 800
+    lineHeight: 84px
+  display-lg:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 48px
+    fontWeight: 300
+    lineHeight: 52px
+  display-md:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 40px
+    fontWeight: 300
+    lineHeight: 44px
+  display-sm:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 32px
+    fontWeight: 700
+    lineHeight: 40px
+  display-xs:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 24px
+    fontWeight: 700
+    lineHeight: 24px
+  eyebrow-uppercase:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 16px
+    fontWeight: 800
+    lineHeight: 24px
+  body-lg:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 22px
+    fontWeight: 400
+    lineHeight: 24px
+  body-md:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 18px
+    fontWeight: 400
+    lineHeight: 28px
+  body-md-strong:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 18px
+    fontWeight: 600
+    lineHeight: 28px
+  body-sm:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: 20px
+  body-sm-strong:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 16px
+    fontWeight: 700
+    lineHeight: 22px
+  caption:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 16px
+  caption-strong:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 14px
+    fontWeight: 700
+    lineHeight: 21px
+  caption-uppercase:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 12px
+    fontWeight: 600
+    lineHeight: 16px
+    letterSpacing: 0.5691px
+  button-md:
+    fontFamily: Vodafone, Vodafone Rg, Helvetica Neue, Arial, sans-serif
+    fontSize: 18px
+    fontWeight: 400
+    lineHeight: 28px
+
+rounded:
+  none: 0px
+  xs: 1px
+  sm: 6px
+  card: 6px
+  pill-md: 32px
+  pill-lg: 60px
+  full: 9999px
+
+spacing:
+  xxs: 2px
+  xs: 4px
+  sm: 8px
+  md: 12px
+  lg: 16px
+  xl: 20px
+  2xl: 24px
+  3xl: 32px
+
+components:
+  nav-bar:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.body-sm}"
+    padding: "{spacing.lg} {spacing.3xl}"
+  nav-link:
+    textColor: "{colors.on-dark}"
+    typography: "{typography.body-sm}"
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    borderColor: "{colors.primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.pill-lg}"
+    padding: "{spacing.md} {spacing.2xl}"
+  button-outline-red:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.primary}"
+    borderColor: "{colors.primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.pill-lg}"
+    padding: "{spacing.md} {spacing.2xl}"
+  button-outline-dark:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.pill-lg}"
+    padding: "{spacing.md} {spacing.2xl}"
+  button-icon-circular:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.canvas}"
+    rounded: "{rounded.full}"
+  text-input:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.ink}"
+    typography: "{typography.body-sm}"
+    rounded: "{rounded.sm}"
+    padding: "{spacing.md} {spacing.lg}"
+  badge-chip:
+    backgroundColor: "{colors.canvas-soft}"
+    textColor: "{colors.ink}"
+    typography: "{typography.caption-strong}"
+    rounded: "{rounded.pill-md}"
+    padding: "{spacing.xs} {spacing.md}"
+  card-content:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+  card-hero:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-sm}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+  hero-band-dark:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.display-hero}"
+    padding: "{spacing.3xl} {spacing.3xl}"
+  hero-band-red:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.display-xl}"
+    padding: "{spacing.3xl} {spacing.3xl}"
+  content-band-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.display-md}"
+    padding: "{spacing.3xl} {spacing.3xl}"
+  speechmark-logo-orb:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.sm}"
+  divider-on-dark:
+    borderColor: "{colors.on-dark}"
+  footer:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-dark}"
+    typography: "{typography.body-sm}"
+    padding: "{spacing.3xl} {spacing.3xl}"
+
+  ex-pricing-tier:
+    description: "Default tier card. Mirrors card-content chrome with canvas-soft surface and a hairline border."
+    backgroundColor: "{colors.canvas-soft}"
+    textColor: "{colors.ink}"
+    borderColor: "{colors.mute}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+  ex-pricing-tier-featured:
+    description: "Featured tier — polarity-flipped to ink with white text and white pill CTA inside."
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.on-primary}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+  ex-product-selector:
+    description: "Tariff-tier picker — repurposed as the brand's plan selector with badge-chip chips inside the frame."
+    backgroundColor: "{colors.canvas-soft}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+  ex-cart-drawer:
+    description: "Subscription summary — line items per tariff add-on, light hairline dividers."
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+    item-divider: "{colors.mute}"
+  ex-app-shell-row:
+    description: "Sidebar nav row. Active state uses brand primary as a left-edge indicator bar."
+    backgroundColor: "{colors.canvas}"
+    activeIndicator: "{colors.primary}"
+    rounded: "{rounded.sm}"
+    padding: "{spacing.md} {spacing.lg}"
+  ex-data-table-cell:
+    description: "Default data-table cell chrome. Header uses caption-uppercase mono-style eyebrow; body uses body-sm."
+    headerBackground: "{colors.canvas-soft}"
+    headerTypography: "{typography.caption-uppercase}"
+    bodyTypography: "{typography.body-sm}"
+    cellPadding: "{spacing.md} {spacing.lg}"
+    rowBorder: "{colors.mute}"
+  ex-auth-form-card:
+    description: "Sign-in / sign-up card. Mirrors card-content chrome with text-input primitives inside."
+    backgroundColor: "{colors.canvas-soft}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+  ex-modal-card:
+    description: "Modal dialog surface — same chrome as card-content; brand uses scrim, not card shadow."
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.lg}"
+  ex-empty-state-card:
+    description: "Empty-state illustration frame on canvas-soft with generous interior padding."
+    backgroundColor: "{colors.canvas-soft}"
+    rounded: "{rounded.card}"
+    padding: "{spacing.3xl}"
+    captionTypography: "{typography.body-md}"
+  ex-toast:
+    description: "Toast notification surface — card-content shape with caption-strong body."
+    backgroundColor: "{colors.canvas}"
+    rounded: "{rounded.sm}"
+    padding: "{spacing.md} {spacing.lg}"
+    typography: "{typography.body-sm}"