@putdotio/design 4.0.0 → 4.0.1

package/DESIGN.md

@@ -133,16 +133,17 @@ Default radius `6px`; `4px` for tight controls, `8px` or `10px` for panels, pill
 
 ### Auth
 
-- Sign in, sign up, password reset, and two-factor pages have no card or panel: the form sits on `--bg`. Recipe: `.auth-page`, `.auth-header`, `.auth-main`, `.auth-column`, `.auth-title`, `.auth-links`, `.auth-footer`.
+- Sign in, sign up, password reset, and two-factor pages have no card or panel: the form sits on `--bg`. Recipe: `.auth-page`, `.auth-header`, `.auth-main`, `.auth-column`, `.auth-title`, `.auth-note`, `.auth-links`, `.auth-footer`.
 - The logo sits top-left in the header, in a `30.33px` box (26px ink × 7/6). The top right stays empty by default.
 - One left-aligned column, up to `340px`, is centred horizontally and optically centred vertically: the form's middle sits near 45% of the viewport height, never below the true middle.
 - A quiet centred footer links Terms of Service, Privacy Policy, and Help in muted `--fs-sm`.
+- Text is one size: everything except the title and input text is `--fs-sm`. That covers labels, hints, `.auth-note` lines, errors, the link row, and the footer.
 - One title per screen: `--fs-title` (`22px`), medium, `--tracking-snug` (`-0.01em`). No subtitles, taglines, or marketing lines; copy stays short.
 - Fields and buttons keep the standard 36px box: the filled field and a full-width default-size primary.
 - Labels are small, muted, and above the field.
 - The primary button is full-width yellow. Secondary actions sit under the form as muted text links: “Forgot password?”, “New to put.io? Sign up”, “Wrong account? Sign out”.
 - Tab order runs fields, submit, then secondary links; DOM order follows visual order, with no positive `tabindex`. Two-factor runs the code, Verify, then its links. The reveal-password toggle takes `tabindex="-1"` and keeps its accessible name: keyboard-only users can't toggle visibility, screen-reader users still can in browse mode. No link leaves the tab order.
-- Form errors: one message in a `.form-reveal` row right above the submit button, in red `--fs-base` text. Invalid fields turn red. Auth forms never use the boxed `.form-callout`.
+- Form errors: one message in a `.form-reveal` row right above the submit button, in red `--fs-sm` text, 8px under the fields. Invalid fields turn red. Auth forms never use the boxed `.form-callout`.
 - Copy: “Sign in”, “Sign up”, and “That username or password doesn't look right.”
 - auth.put.io still ships the older card layout: drift.
 - References: `web-s06-auth`, `web-p00c-auth-signin`, `web-p00d-auth-signup`, `web-p00e-auth-2fa`. Outside references: the TIDAL, Stripe Link, Cursor, Linear, and Vercel sign-in pages.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@putdotio/design",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Public put.io design tokens, brand assets, and design-system guidance.",
   "license": "MIT",
   "type": "module",

package/system/components.css

@@ -453,7 +453,7 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
 .form-reveal .form-callout { margin: 0; }
 .form-reveal[data-state="open"] { grid-template-rows: 1fr; opacity: 1; }
 /* Inside a .form-group the row absorbs the group gap, so a closed row
-   adds no space and an open one sits the usual 6px under its field. */
+   adds no space and an open one sits the usual 8px under its field. */
 .form-group > .form-reveal { margin-top: -8px; }
 .form-group > .form-reveal .form-callout { padding-top: 8px; }
 
@@ -569,9 +569,9 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
    Card-less: the form sits on the page background. Logo top-left
    in .auth-header, one left-aligned 340px column centred in
    .auth-main, a quiet link row in .auth-footer. Controls keep the
-   standard 36px box;
-   the title is the only heading. Under 640px the gutters drop to 24px so the logo lines
-   up with the column.
+   standard 36px box; the title is the only heading. All other text
+   (labels, hints, notes, errors, links, footer) is --fs-sm. Under
+   640px the gutters drop to 24px so the logo lines up with the column.
    =========================================================== */
 .auth-page {
   box-sizing: border-box;
@@ -618,7 +618,16 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   font-weight: var(--fw-regular);
   color: var(--text-secondary);
 }
-.auth-column form > .form-reveal .form-callout { padding-top: 12px; font-size: var(--fs-base); }
+/* A field hint, a legal line, or a sent-to note. */
+.auth-column .hint,
+.auth-note {
+  margin: 0;
+  font-size: var(--fs-sm);
+  line-height: var(--lh-normal);
+  color: var(--text-secondary);
+}
+.auth-note a { color: var(--text); text-underline-offset: 3px; }
+.auth-column form > .form-reveal .form-callout { padding-top: 8px; }
 .auth-column form > .form-reveal + .btn-block { margin-top: 16px; }
 .auth-links {
   margin: 24px 0 0;
@@ -628,11 +637,12 @@ input, textarea, select { text-transform: none; letter-spacing: normal; }
   justify-content: space-between;
   gap: 8px 16px;
   color: var(--text-secondary);
-  font-size: var(--fs-base);
+  font-size: var(--fs-sm);
 }
 /* A prompt's link reads as text ("New to put.io? Sign up"); a bare
-   action link ("Use a recovery code") stays muted. */
-.auth-links p { margin: 0; }
+   action link ("Use a recovery code") stays muted. The token base sizes
+   every p at --fs-base, so a prompt inherits the row's size. */
+.auth-links p { margin: 0; font-size: inherit; }
 .auth-links a { color: var(--text); text-underline-offset: 3px; }
 .auth-links > a { color: var(--text-secondary); text-decoration: none; }
 .auth-links > a:hover { color: var(--text); }