{
  "schemaVersion": 1,
  "organization": "6am",
  "version": "0.7.0",
  "locale": "en",
  "families": [
    {
      "key": "display",
      "name": "Big Shoulders",
      "fallback": "Impact, sans-serif",
      "role": "Expressive headings and opening messages.",
      "sample": "Make room for better.",
      "weight": 800
    },
    {
      "key": "body",
      "name": "Onest",
      "fallback": "Arial, sans-serif",
      "role": "Paragraphs, navigation, buttons and forms.",
      "sample": "Your next customer needs to understand what you do and how to contact you.",
      "weight": 400
    },
    {
      "key": "accent",
      "name": "Fraunces",
      "fallback": "Georgia, serif",
      "role": "Occasional editorial emphasis, in italic.",
      "sample": "A little more human.",
      "weight": 500
    },
    {
      "key": "mono",
      "name": "Geist Mono",
      "fallback": "monospace",
      "role": "Versions, values and technical references.",
      "sample": "COLOR.ACCENT / #E3FF04",
      "weight": 400
    }
  ],
  "typographyUsage": {
    "status": "pilot",
    "viewport": {
      "min": 360,
      "max": 1200
    },
    "roles": [
      {
        "id": "display",
        "family": "display",
        "minPx": 44,
        "maxPx": 76,
        "weight": 800,
        "lineHeight": 1.02,
        "trackingEm": -0.02,
        "measureCh": 20,
        "style": "normal",
        "name": "Opening headline",
        "usage": "One clear promise. Aim for two or three lines; edit before making the type smaller.",
        "sample": "Make room for better."
      },
      {
        "id": "section",
        "family": "display",
        "minPx": 28,
        "maxPx": 40,
        "weight": 800,
        "lineHeight": 1.12,
        "trackingEm": -0.02,
        "measureCh": 28,
        "style": "normal",
        "name": "Section title",
        "usage": "Introduce the next subject. Keep visual size separate from semantic heading level.",
        "sample": "A website people can use."
      },
      {
        "id": "subheading",
        "family": "body",
        "minPx": 22,
        "maxPx": 28,
        "weight": 600,
        "lineHeight": 1.3,
        "trackingEm": 0,
        "measureCh": 40,
        "style": "normal",
        "name": "Subheading",
        "usage": "Explain a group of content or name a useful detail.",
        "sample": "Clear pages. A simpler next step."
      },
      {
        "id": "lead",
        "family": "body",
        "minPx": 18,
        "maxPx": 22,
        "weight": 400,
        "lineHeight": 1.5,
        "trackingEm": 0,
        "measureCh": 55,
        "style": "normal",
        "name": "Lead paragraph",
        "usage": "Bridge the headline and the detail. Keep it to a short paragraph.",
        "sample": "Help people understand your business and take the next step."
      },
      {
        "id": "body",
        "family": "body",
        "minPx": 16,
        "maxPx": 16,
        "weight": 400,
        "lineHeight": 1.6,
        "trackingEm": 0,
        "measureCh": 65,
        "style": "normal",
        "name": "Body copy",
        "usage": "Use for explanations and continuous reading. Keep a comfortable line length.",
        "sample": "Your next customer needs to understand what you do and how to get in touch. Start with the information they need, then make the next step easy to find."
      },
      {
        "id": "label",
        "family": "body",
        "minPx": 16,
        "maxPx": 16,
        "weight": 600,
        "lineHeight": 1.4,
        "trackingEm": 0,
        "measureCh": 40,
        "style": "normal",
        "name": "Labels and actions",
        "usage": "Use sentence case and a clear action. Let labels wrap; keep form inputs at 16 px or more.",
        "sample": "Get a proposal"
      },
      {
        "id": "caption",
        "family": "body",
        "minPx": 14,
        "maxPx": 14,
        "weight": 400,
        "lineHeight": 1.5,
        "trackingEm": 0,
        "measureCh": 65,
        "style": "normal",
        "name": "Caption",
        "usage": "Explain supporting details. Never hide essential instructions in small print.",
        "sample": "A working example, ready to review."
      },
      {
        "id": "metadata",
        "family": "mono",
        "minPx": 12,
        "maxPx": 12,
        "weight": 400,
        "lineHeight": 1.6,
        "trackingEm": 0.02,
        "measureCh": 65,
        "style": "normal",
        "name": "Metadata and code",
        "usage": "Reserve for versions, tokens and technical values. Do not set paragraphs in mono.",
        "sample": "VERSION 0.7.0 / #E3FF04"
      },
      {
        "id": "accent",
        "family": "accent",
        "minPx": 28,
        "maxPx": 40,
        "weight": 500,
        "lineHeight": 1.2,
        "trackingEm": 0,
        "measureCh": 28,
        "style": "italic",
        "name": "Editorial accent",
        "usage": "Use a short italic phrase once in a composition. Keep the main message in the primary families.",
        "sample": "A little more human."
      }
    ],
    "families": [
      {
        "id": "display",
        "rule": "Big Shoulders 800 for short headlines. Keep it out of continuous reading. Avoid synthetic italics and never compress the letters manually."
      },
      {
        "id": "body",
        "rule": "Onest 400 for reading, 600 for labels and 700 for occasional emphasis. Use only weights loaded by the project."
      },
      {
        "id": "accent",
        "rule": "Fraunces 500 in true italic. The project loads italic only; do not simulate a roman style or use it in forms."
      },
      {
        "id": "mono",
        "rule": "Geist Mono 400 for values and code, 500–600 when needed. Align comparable values to the same edge."
      }
    ],
    "contexts": [
      {
        "id": "web",
        "title": "Web pages and forms",
        "text": "Use the responsive scale on this page. Keep one h1 per page, then a logical heading outline. Use Onest for instructions, errors and actions. Keep important text as HTML."
      },
      {
        "id": "social",
        "title": "Social posts and Stories",
        "text": "Use Big Shoulders for a short headline and Onest for the detail. Follow the social template sizes and safe areas; web CSS pixels are not a 1080 px canvas specification. Check the exported post at phone size."
      },
      {
        "id": "slides",
        "title": "Presentations and print",
        "text": "Keep a strong title/body contrast. For a pilot slide, start at 36–48 pt for titles and 20–24 pt for body, then check from viewing distance. For printed reading, start at 11–12 pt and proof the actual format; these are starting points, not approved print minima."
      },
      {
        "id": "email",
        "title": "Email and shared documents",
        "text": "If brand fonts are unavailable, use Arial Bold for headings and Arial Regular for body. Use Georgia Italic for an optional editorial phrase and Courier New for code. Recheck line breaks and page count after substitution."
      }
    ],
    "fallbacks": {
      "display": "Arial, sans-serif",
      "body": "Arial, sans-serif",
      "accent": "Georgia, serif",
      "mono": "\"Courier New\", monospace"
    },
    "ui": {
      "label": "03 / Typography",
      "title": "Presence in the headline. Ease in every word.",
      "intro": "Our type has a job to do: get attention, explain the useful detail and make the next step clear. Start with Big Shoulders and Onest; bring in the other voices only when they help.",
      "familiesTitle": "Four families. Clear responsibilities.",
      "familiesText": "Two families carry most of the work. An italic accent adds warmth; mono gives technical detail its own place.",
      "glyphs": "Aa Bb Cc · 0123456789 · À é ç ã £ € $ & @",
      "scaleTitle": "A hierarchy you can actually use.",
      "scaleText": "These pilot web roles define size, weight, line height, tracking and reading width. Responsive values grow between 360 and 1200 px viewports; fixed roles keep their size. REM values follow the reader’s font settings.",
      "scaleNote": "The px labels assume a 16 px root font size. “ch” is a font-relative width, not a fixed character count. Keep the correct HTML heading level even when a different visual role is needed.",
      "size": "Size",
      "leading": "Line height",
      "tracking": "Tracking",
      "measure": "Max. width",
      "copyCss": "Copy role CSS",
      "testerTitle": "Try the words you will really use.",
      "testerText": "Change the role, enter your own copy and compare brand fonts with the document fallback. The width controls simulate a text frame, not a different device viewport.",
      "role": "Type role",
      "copy": "Your text",
      "frame": "Text frame",
      "narrow": "Narrow · 320 px",
      "wide": "Wide · 640 px",
      "fallback": "Preview document fallback",
      "brand": "Preview brand fonts",
      "reset": "Reset sample",
      "preview": "Live type preview",
      "fallbackNote": "A fallback preserves meaning and hierarchy, but changes letter widths and line breaks. The simulated document fallback uses system fonts; it does not unload the website fonts.",
      "compositionTitle": "The hierarchy, working together.",
      "compositionText": "Align the label, headline, introduction and action to one reading edge. The guides mark the text column, not font-specific cap-height measurements.",
      "guides": "Show alignment guides",
      "hideGuides": "Hide alignment guides",
      "exampleLabel": "FOR YOUR BUSINESS",
      "exampleHeading": "Make your next step clearer.",
      "exampleLead": "A useful website starts with a conversation.",
      "exampleBody": "Tell us what your customers need to understand. We’ll help turn that into pages that explain your work and make it easier to get in touch.",
      "exampleAction": "Explore our services",
      "exampleCaption": "Example composition · web",
      "readingTitle": "Give the words room to breathe.",
      "rules": [
        "Left-align paragraphs and related labels. Center only a short, self-contained statement; avoid justified body text.",
        "Aim for roughly 45–75 characters per line in long reading, using the 65ch body measure as a starting point. Let narrow screens wrap naturally.",
        "Keep body tracking at zero and line height at 1.6. Tight headline spacing belongs to short display copy; it should never make accents or letters collide.",
        "Use sentence case for headlines, labels and actions. Uppercase is for short metadata; avoid paragraphs in capitals.",
        "Break headlines at a meaningful phrase. Avoid a single stranded word when practical, but do not force desktop line breaks onto mobile screens.",
        "Use one emphasis at a time: weight, a short italic phrase or a solid highlight. Do not stretch letters, outline body copy or apply gradients to text.",
        "Keep text containers flexible. Check longer translations, accented characters, user text enlargement and line-spacing overrides without clipping or hiding content."
      ],
      "good": "Use",
      "bad": "Avoid",
      "goodText": "A clear next step, with room to read.",
      "badText": "A CLEAR NEXT STEP, WITH ROOM TO READ.",
      "goodNote": "Sentence case, natural spacing and a clear reading edge.",
      "badNote": "Long uppercase text and tight spacing make reading harder.",
      "contextsTitle": "The same voice, in different formats.",
      "resourcesTitle": "Ready for your team and your AI.",
      "resourcesText": "Copy the complete type guide or use the structured roles and CSS tokens. Font-family declarations do not install fonts. The site serves its font files through next/font; a portable font download package is still pending.",
      "json": "Typography rules · JSON",
      "css": "Type tokens · CSS",
      "copyGuide": "Copy typography guide for AI",
      "status": "Pilot specification. Applying these roles consistently across every page, checking all fallback environments and preparing font packages remain open work.",
      "prompt": "Create a 6am composition using the role specifications below. Preserve the actual copy, use real text where possible, and select the correct semantic heading levels. Load the intended font weights and styles before measuring. Do not reconstruct the logo with a font. Keep copy editable, inspect the final output at its intended size, and reflow rather than shrinking important text to make it fit."
    }
  },
  "roles": [
    {
      "id": "display",
      "family": "display",
      "minPx": 44,
      "maxPx": 76,
      "weight": 800,
      "lineHeight": 1.02,
      "trackingEm": -0.02,
      "measureCh": 20,
      "style": "normal",
      "name": "Opening headline",
      "usage": "One clear promise. Aim for two or three lines; edit before making the type smaller.",
      "sample": "Make room for better.",
      "css": "font-family: var(--6am-font-display, \"Big Shoulders\", Impact, sans-serif);\nfont-size: clamp(2.75rem, 1.892857rem + 3.809524vw, 4.75rem);\nfont-weight: 800;\nfont-style: normal;\nline-height: 1.02;\nletter-spacing: -0.02em;\nmax-width: 20ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "section",
      "family": "display",
      "minPx": 28,
      "maxPx": 40,
      "weight": 800,
      "lineHeight": 1.12,
      "trackingEm": -0.02,
      "measureCh": 28,
      "style": "normal",
      "name": "Section title",
      "usage": "Introduce the next subject. Keep visual size separate from semantic heading level.",
      "sample": "A website people can use.",
      "css": "font-family: var(--6am-font-display, \"Big Shoulders\", Impact, sans-serif);\nfont-size: clamp(1.75rem, 1.428571rem + 1.428571vw, 2.5rem);\nfont-weight: 800;\nfont-style: normal;\nline-height: 1.12;\nletter-spacing: -0.02em;\nmax-width: 28ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "subheading",
      "family": "body",
      "minPx": 22,
      "maxPx": 28,
      "weight": 600,
      "lineHeight": 1.3,
      "trackingEm": 0,
      "measureCh": 40,
      "style": "normal",
      "name": "Subheading",
      "usage": "Explain a group of content or name a useful detail.",
      "sample": "Clear pages. A simpler next step.",
      "css": "font-family: var(--6am-font-body, \"Onest\", Arial, sans-serif);\nfont-size: clamp(1.375rem, 1.214286rem + 0.714286vw, 1.75rem);\nfont-weight: 600;\nfont-style: normal;\nline-height: 1.3;\nletter-spacing: 0em;\nmax-width: 40ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "lead",
      "family": "body",
      "minPx": 18,
      "maxPx": 22,
      "weight": 400,
      "lineHeight": 1.5,
      "trackingEm": 0,
      "measureCh": 55,
      "style": "normal",
      "name": "Lead paragraph",
      "usage": "Bridge the headline and the detail. Keep it to a short paragraph.",
      "sample": "Help people understand your business and take the next step.",
      "css": "font-family: var(--6am-font-body, \"Onest\", Arial, sans-serif);\nfont-size: clamp(1.125rem, 1.017857rem + 0.47619vw, 1.375rem);\nfont-weight: 400;\nfont-style: normal;\nline-height: 1.5;\nletter-spacing: 0em;\nmax-width: 55ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "body",
      "family": "body",
      "minPx": 16,
      "maxPx": 16,
      "weight": 400,
      "lineHeight": 1.6,
      "trackingEm": 0,
      "measureCh": 65,
      "style": "normal",
      "name": "Body copy",
      "usage": "Use for explanations and continuous reading. Keep a comfortable line length.",
      "sample": "Your next customer needs to understand what you do and how to get in touch. Start with the information they need, then make the next step easy to find.",
      "css": "font-family: var(--6am-font-body, \"Onest\", Arial, sans-serif);\nfont-size: 1rem;\nfont-weight: 400;\nfont-style: normal;\nline-height: 1.6;\nletter-spacing: 0em;\nmax-width: 65ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "label",
      "family": "body",
      "minPx": 16,
      "maxPx": 16,
      "weight": 600,
      "lineHeight": 1.4,
      "trackingEm": 0,
      "measureCh": 40,
      "style": "normal",
      "name": "Labels and actions",
      "usage": "Use sentence case and a clear action. Let labels wrap; keep form inputs at 16 px or more.",
      "sample": "Get a proposal",
      "css": "font-family: var(--6am-font-body, \"Onest\", Arial, sans-serif);\nfont-size: 1rem;\nfont-weight: 600;\nfont-style: normal;\nline-height: 1.4;\nletter-spacing: 0em;\nmax-width: 40ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "caption",
      "family": "body",
      "minPx": 14,
      "maxPx": 14,
      "weight": 400,
      "lineHeight": 1.5,
      "trackingEm": 0,
      "measureCh": 65,
      "style": "normal",
      "name": "Caption",
      "usage": "Explain supporting details. Never hide essential instructions in small print.",
      "sample": "A working example, ready to review.",
      "css": "font-family: var(--6am-font-body, \"Onest\", Arial, sans-serif);\nfont-size: 0.875rem;\nfont-weight: 400;\nfont-style: normal;\nline-height: 1.5;\nletter-spacing: 0em;\nmax-width: 65ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "metadata",
      "family": "mono",
      "minPx": 12,
      "maxPx": 12,
      "weight": 400,
      "lineHeight": 1.6,
      "trackingEm": 0.02,
      "measureCh": 65,
      "style": "normal",
      "name": "Metadata and code",
      "usage": "Reserve for versions, tokens and technical values. Do not set paragraphs in mono.",
      "sample": "VERSION 0.7.0 / #E3FF04",
      "css": "font-family: var(--6am-font-mono, \"Geist Mono\", monospace);\nfont-size: 0.75rem;\nfont-weight: 400;\nfont-style: normal;\nline-height: 1.6;\nletter-spacing: 0.02em;\nmax-width: 65ch;\noverflow-wrap: anywhere;"
    },
    {
      "id": "accent",
      "family": "accent",
      "minPx": 28,
      "maxPx": 40,
      "weight": 500,
      "lineHeight": 1.2,
      "trackingEm": 0,
      "measureCh": 28,
      "style": "italic",
      "name": "Editorial accent",
      "usage": "Use a short italic phrase once in a composition. Keep the main message in the primary families.",
      "sample": "A little more human.",
      "css": "font-family: var(--6am-font-accent, \"Fraunces\", Georgia, serif);\nfont-size: clamp(1.75rem, 1.428571rem + 1.428571vw, 2.5rem);\nfont-weight: 500;\nfont-style: italic;\nline-height: 1.2;\nletter-spacing: 0em;\nmax-width: 28ch;\noverflow-wrap: anywhere;"
    }
  ]
}