@font-face{font-family:'Inter';src:url('fonts/Inter-VariableFont.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap;} /* ============================================================ Praxis / Tutto — Design System Source: tutto.one/praxis (extracted 2026-05-13) ------------------------------------------------------------ Drop this file next to any HTML doc and link it: It works for screen viewing AND PDF rendering (print rules at the bottom). No JavaScript required. ============================================================ */ /* --- Fonts ---------------------------------------------------- Inter — body, UI, default Roboto — display / headings (the site aliases this as "serif") Source Serif 4 — long-form editorial (essays, quotes, callouts) The site loads all three; we keep the same set so any doc matches the website even when mixing display modes. ------------------------------------------------------------ */ /* font import removed: see fonts/ */ /* --- Tokens (light, default) -------------------------------- */ :root { /* Brand colors — HSL parts as the site uses, plus resolved hex for reference */ --background: 40 10% 98%; /* #FAF9F6 — warm off-white */ --foreground: 0 0% 12%; /* #1F1F1F — near-black */ --card: 0 0% 100%; /* #FFFFFF */ --card-foreground: 0 0% 12%; --muted: 40 5% 90%; /* warm grey panel */ --muted-foreground: 220 9% 46%; /* cool slate body-secondary */ --primary: 32 95% 44%; /* #DB7400 — warm amber accent */ --primary-foreground: 0 0% 100%; --accent: 32 95% 44%; --accent-foreground: 0 0% 100%; --border: 220 13% 91%; --ring: 32 95% 44%; --destructive: 0 84% 60%; /* Type scale (Tailwind-compatible) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* Tracking & leading */ --tracking-tight: -0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Spacing — base unit 0.25rem (4px), Tailwind-compatible */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Radius */ --radius: 0.75rem; --radius-sm: 0.375rem; --radius-lg: 1rem; --radius-xl: 1.5rem; /* Elevation */ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06); --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.06); /* Containers */ --content-width: 42rem; /* 672px — comfortable reading column */ --page-width: 56rem; /* 896px — wider page max */ /* Font stacks */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-display: 'Roboto', 'Inter', sans-serif; --font-editorial: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; } /* --- Tokens (dark) ------------------------------------------- Auto-applies if user prefers dark, or if .dark is on . ------------------------------------------------------------ */ .dark, :root.dark { --background: 20 14% 4%; --foreground: 40 10% 98%; --card: 20 14% 8%; --card-foreground: 40 10% 98%; --muted: 20 14% 12%; --muted-foreground: 220 9% 60%; --border: 20 14% 12%; } @media (prefers-color-scheme: dark) { :root:not(.light) { --background: 20 14% 4%; --foreground: 40 10% 98%; --card: 20 14% 8%; --card-foreground: 40 10% 98%; --muted: 20 14% 12%; --muted-foreground: 220 9% 60%; --border: 20 14% 12%; } } /* ============================================================ Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); font-size: 16px; line-height: var(--leading-normal); color: hsl(var(--foreground)); background: hsl(var(--background)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; font-weight: var(--weight-regular); font-feature-settings: 'cv11', 'ss01'; /* Inter alternates — subtle, on the website */ } /* --- Headings ------------------------------------------------ Roboto for display, tight tracking, weight 700. Use h1 for the doc title only; h2 for section starts; h3 for sub-sections. Don't skip levels. ------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); color: hsl(var(--foreground)); } h1 { font-size: var(--text-5xl); font-weight: var(--weight-black); margin-bottom: var(--space-6); } h2 { font-size: var(--text-3xl); margin-top: var(--space-12); } h3 { font-size: var(--text-xl); margin-top: var(--space-8); } h4 { font-size: var(--text-lg); margin-top: var(--space-6); } h5 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: hsl(var(--muted-foreground)); } h6 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: hsl(var(--muted-foreground)); } /* First heading after a section start shouldn't have top margin */ section > :first-child, article > :first-child, .page > :first-child { margin-top: 0; } /* --- Body copy ----------------------------------------------- */ p { margin: 0 0 var(--space-4); max-width: var(--content-width); } p.lead { font-size: var(--text-xl); line-height: var(--leading-snug); color: hsl(var(--muted-foreground)); font-weight: var(--weight-regular); } small, .text-sm { font-size: var(--text-sm); } .text-muted { color: hsl(var(--muted-foreground)); } /* --- Links --------------------------------------------------- */ a { color: hsl(var(--primary)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { text-decoration-thickness: 2px; } /* --- Lists --------------------------------------------------- */ ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); } li { margin-bottom: var(--space-2); } li > ul, li > ol { margin-top: var(--space-2); margin-bottom: 0; } /* Dash-style list (signature site pattern: "Term — explanation") */ ul.dash { list-style: none; padding-left: 0; } ul.dash > li { position: relative; padding-left: var(--space-6); } ul.dash > li::before { content: '—'; position: absolute; left: 0; color: hsl(var(--primary)); font-weight: var(--weight-bold); } /* --- Quotes / pull quotes ----------------------------------- */ blockquote { font-family: var(--font-editorial); font-style: italic; font-size: var(--text-xl); line-height: var(--leading-snug); color: hsl(var(--foreground)); border-left: 3px solid hsl(var(--primary)); margin: var(--space-8) 0; padding: 0 var(--space-6); max-width: var(--content-width); } blockquote cite { display: block; margin-top: var(--space-3); font-family: var(--font-sans); font-style: normal; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); } /* --- Code ---------------------------------------------------- */ code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; } code { background: hsl(var(--muted)); padding: 0.15em 0.4em; border-radius: var(--radius-sm); } pre { background: hsl(var(--muted)); padding: var(--space-4); border-radius: var(--radius); overflow-x: auto; line-height: var(--leading-snug); } pre code { background: none; padding: 0; } /* --- Dividers ----------------------------------------------- */ hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: var(--space-12) 0; } /* --- Tables ------------------------------------------------- */ table { width: 100%; border-collapse: collapse; margin: var(--space-6) 0; font-size: var(--text-sm); } th, td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; } th { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: hsl(var(--muted-foreground)); border-bottom: 2px solid hsl(var(--foreground)); } /* ============================================================ Components ============================================================ */ /* --- Page shell --------------------------------------------- */ .page { max-width: var(--page-width); margin: 0 auto; padding: var(--space-16) var(--space-8); } /* --- Card --------------------------------------------------- */ .card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: var(--space-6); box-shadow: var(--shadow-sm); } .card + .card { margin-top: var(--space-4); } /* --- Callout ------------------------------------------------ */ .callout { border-left: 3px solid hsl(var(--primary)); background: hsl(var(--muted) / 0.5); padding: var(--space-4) var(--space-6); border-radius: 0 var(--radius) var(--radius) 0; margin: var(--space-6) 0; } .callout > :first-child { margin-top: 0; } .callout > :last-child { margin-bottom: 0; } /* --- Keynote: highlighted "hard concept" callout (decks + notes) --- Use on a slide to flag difficult, verified content with a pointer to the teacher notes for the full detail. Self-contained so it works wherever praxis.css is loaded or inlined. */ .keynote { display: flex; gap: var(--space-3); align-items: flex-start; margin-top: var(--space-5); padding: var(--space-3) var(--space-4); background: hsl(var(--primary) / 0.07); border: 1px solid hsl(var(--primary) / 0.35); border-left: 4px solid hsl(var(--primary)); border-radius: 0 var(--radius) var(--radius) 0; } .keynote::before { content: "\2691"; /* ⚑ flag */ color: hsl(var(--primary)); font-size: var(--text-lg); line-height: 1.1; } .keynote p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: hsl(var(--foreground)); } .keynote .kn-label { display: block; font-family: var(--font-display); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-xs); color: hsl(var(--primary)); margin-bottom: 2px; } .keynote .kn-see { color: hsl(var(--muted-foreground)); font-style: italic; } /* --- Button ------------------------------------------------- */ .btn { display: inline-block; font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-base); padding: var(--space-3) var(--space-6); border-radius: var(--radius); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: all 0.15s ease-in-out; } .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn-primary:hover { filter: brightness(1.1); } .btn-ghost { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); } /* --- Tag / chip --------------------------------------------- */ .tag { display: inline-block; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); padding: var(--space-1) var(--space-3); border-radius: 999px; } .tag-primary { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); } /* --- Eyebrow (small label above heading) -------------------- */ .eyebrow { display: block; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: hsl(var(--primary)); margin-bottom: var(--space-3); } /* --- Header / brand mark ----------------------------------- */ .brand { font-family: var(--font-display); font-weight: var(--weight-black); font-size: var(--text-xl); letter-spacing: var(--tracking-tight); } .brand .dot { color: hsl(var(--primary)); } /* "Tutto." with orange period */ .doc-header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--space-4); border-bottom: 1px solid hsl(var(--border)); margin-bottom: var(--space-12); } .doc-header .meta { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); } .doc-footer { margin-top: var(--space-16); padding-top: var(--space-4); border-top: 1px solid hsl(var(--border)); font-size: var(--text-sm); color: hsl(var(--muted-foreground)); display: flex; justify-content: space-between; } /* --- Grid helpers ------------------------------------------- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .stack-sm > * + * { margin-top: var(--space-2); } .stack > * + * { margin-top: var(--space-4); } .stack-lg > * + * { margin-top: var(--space-8); } /* --- Slide deck (16:9 landscape) ---------------------------- */ .slide { width: 100%; aspect-ratio: 16 / 9; padding: var(--space-12) var(--space-16); background: hsl(var(--background)); display: flex; flex-direction: column; justify-content: center; page-break-after: always; break-after: page; } .slide.title { justify-content: flex-end; background: hsl(var(--foreground)); color: hsl(var(--background)); } .slide.title h1 { color: hsl(var(--background)); font-size: var(--text-6xl); } .slide.title .eyebrow { color: hsl(var(--primary)); } .slide h2 { font-size: var(--text-4xl); margin-top: 0; } .slide .slide-number { position: absolute; bottom: var(--space-6); right: var(--space-8); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); letter-spacing: var(--tracking-wider); } /* ============================================================ Patterns — borrowed from the training one-pager ------------------------------------------------------------ These are heavier, more editorial blocks. Use for training handouts, mental-model one-pagers, and anything that needs to teach rather than report. ============================================================ */ /* --- Section header with number + rule --------------------- */ .section-head { display: flex; align-items: baseline; gap: var(--space-4); margin: var(--space-16) 0 var(--space-6); } .section-head .num { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); letter-spacing: var(--tracking-wider); } .section-head .label { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: hsl(var(--foreground)); } .section-head .rule { flex: 1; height: 1px; background: hsl(var(--border)); } /* --- Numbered ingredient cards (three-up explainer) -------- */ .ingredients { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); } .ingredient { padding: var(--space-6) var(--space-5); border-right: 1px solid hsl(var(--border)); position: relative; } .ingredient:last-child { border-right: 0; } .ingredient .num { position: absolute; top: var(--space-3); right: var(--space-4); font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); } .ingredient .tile { width: 84px; height: 84px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); background: hsl(var(--muted)); } .ingredient h3 { font-size: var(--text-2xl); margin: 0 0 var(--space-1); letter-spacing: var(--tracking-tight); } .ingredient .role { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: var(--space-3); } .ingredient p { font-size: var(--text-sm); line-height: var(--leading-snug); color: hsl(var(--muted-foreground)); margin: 0; } /* --- File-tree block (for "the folder is the app" diagrams) - */ .folder { background: hsl(var(--muted) / 0.4); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); overflow: hidden; } .folder-tab { background: hsl(var(--foreground)); color: hsl(var(--background)); padding: var(--space-2) var(--space-4); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); display: flex; justify-content: space-between; align-items: center; } .folder-tab .dots { display: inline-flex; gap: 6px; } .folder-tab .dots span { width: 7px; height: 7px; border-radius: 50%; background: hsl(0 0% 60%); } .folder .tree { font-family: var(--font-display); font-size: var(--text-sm); padding: var(--space-4) 0; } .folder .row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; padding: var(--space-2) var(--space-5); gap: var(--space-2); border-bottom: 1px dashed hsl(var(--border)); } .folder .row:last-child { border-bottom: 0; } .folder .row .glyph { color: hsl(var(--muted-foreground)); } .folder .row .name { color: hsl(var(--foreground)); } .folder .row .name b { color: hsl(var(--primary)); font-weight: var(--weight-semibold); } .folder .row .annot { font-family: var(--font-sans); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); } .folder .row.head { background: hsl(var(--muted) / 0.6); padding: var(--space-3) var(--space-5); border-bottom: 1px solid hsl(var(--border)); } .folder .row.head .name { font-weight: var(--weight-semibold); } .folder .row.indent { padding-left: var(--space-10); } /* --- Annotation list (lettered side-notes for a diagram) --- */ .annotations { display: flex; flex-direction: column; gap: var(--space-6); } .annotation { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-3); } .annotation .marker { width: 26px; height: 26px; border-radius: 50%; border: 1px solid hsl(var(--foreground)); background: hsl(var(--background)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-medium); } .annotation h4 { font-size: var(--text-lg); margin: 2px 0 var(--space-1); } .annotation h4 code { font-size: 0.85em; color: hsl(var(--primary)); background: hsl(var(--muted)); } .annotation p { font-size: var(--text-sm); line-height: var(--leading-snug); color: hsl(var(--muted-foreground)); margin: 0; } /* --- Page registration marks (editorial corners) ------------ */ .regmarks { position: relative; } .regmarks::before, .regmarks::after, .regmarks > .reg-bl, .regmarks > .reg-br { content: ""; position: absolute; width: 12px; height: 12px; border: 1px solid hsl(var(--muted-foreground)); pointer-events: none; } .regmarks::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; } .regmarks::after { top: 12px; right: 12px; border-left: 0; border-bottom: 0; } .regmarks > .reg-bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; } .regmarks > .reg-br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; } /* --- Hero pattern: eyebrow + display + lede --------------- */ .hero { margin-bottom: var(--space-12); } .hero h1 { font-size: var(--text-6xl); line-height: 1.04; letter-spacing: -0.03em; } .hero h1 em { font-style: italic; color: hsl(var(--primary)); } .hero .lede { font-size: var(--text-lg); line-height: var(--leading-normal); color: hsl(var(--muted-foreground)); max-width: var(--content-width); } .hero .lede strong { color: hsl(var(--foreground)); font-weight: var(--weight-medium); } /* ============================================================ Print / PDF ------------------------------------------------------------ These rules apply when Claude renders the doc to PDF (puppeteer, weasyprint, browser print). Tested at A4. ============================================================ */ @page { size: A4; margin: 20mm 18mm; } @page slide { size: A4 landscape; margin: 0; } @media print { html, body { background: white; color: black; font-size: 10.5pt; } .page { padding: 0; max-width: none; } a { color: hsl(var(--foreground)); text-decoration: none; } a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; color: hsl(var(--muted-foreground)); word-break: break-all; } h1, h2, h3 { page-break-after: avoid; break-after: avoid-page; } p, li, blockquote { page-break-inside: avoid; break-inside: avoid; } .card, .callout { page-break-inside: avoid; break-inside: avoid; } .doc-header, .doc-footer { background: white; } .no-print { display: none !important; } .slide { page: slide; height: 100vh; padding: 18mm 22mm; } }