/* aragonitesand.com — design tokens * * Extracted from the aragocorminerals.com source (jlerner1965/aragocor-site, * commit d8f57e0, September 2026). Every value below is copied from that * site's `_ds/…/colors_and_type.css`, `site-chrome.css`, `products-grades.css` * and the inline styles on its pre-rendered pages. Where this file goes past * the parent, the addition is called out in a comment beginning `EXTENDED:`. * * Sources, so a future reader can check each token against the parent: * colours ........ _ds/aragocor-minerals-design-system-/colors_and_type.css * chrome ......... site-chrome.css (`--ac-*` tokens, header, footer) * type scale ..... about.html, index.html, products-grades.css inline sizes * buttons ........ index.html / about.html `.btn-ar` family * form fields .... contact.html `.fld` * section rhythm . inline `padding: 96px 40px` etc. on every page */ :root { /* ---------- Palette ---------- * * DERIVED from aragocorminerals.com, deliberately not identical to it. The * parent's structure is kept exactly — one deep ink, one warm sand accent, * an off-white ground, white cards — because that is what makes this read as * an AragoCor site. The values are shifted so it does not read as the SAME * site, and one accent is added that the parent does not have. * * role parent here what changed * ink #0E3540 → #0B2C3A deeper and a few degrees bluer * tide #526A70 → #4E6B74 tracks the ink * sand #D7C59C → #E0C68F warmer, more golden, more saturated * bone #F7F4ED → #F6F2E9 a hair cooler * — — → #061C26 `abyss`, a near-black marine for the * footer and the deepest band; the parent * footer sits on plain ink * — — → #17707E `surf`, the accent this site needs and * the parent has no equivalent for: it * carries prices, SKU codes and the quote * builder, so commerce is visually * separable from specification * * Contrast, measured, against the ground each is used on: * ink on bone 13.1 · tide on bone 5.1 · surf on bone 5.1 * bone on ink 13.1 · bone on abyss 15.6 · sand on ink 8.8 * ink on sand 8.8 · surf-light on ink 6.3 * `surf` is 2.6 on ink and must never be used there; `surf-light` is the * dark-ground variant and the only one that may be. */ --ink: #0E3540; /* primary dark: headings, nav text, dark bands */ --abyss: #07222B; /* deepest dark: footer, price band */ --tide: #526A70; /* secondary text */ --shore: #7C97A0; /* tertiary, decorative only — 2.8 on bone, never body text */ --surf: #17707E; /* accent on light grounds: prices, SKUs, quote builder */ --surf-deep: #125C68; /* accent, pressed and hover */ --surf-light:#5FC6D4; /* accent on dark grounds only */ --turquoise: #2E9DB0; /* the parent's second colour: rules, small marks */ --sand: #D7C59C; /* warm accent: one band per page, rules, grade tint */ --sand-deep: #B79E68; --bone: #F7F4ED; /* page ground and nav ground */ --paper: #FFFFFF; /* cards, form controls, alternating white bands */ /* Foreground steps */ --fg-1: #0E3540; --fg-2: #526A70; --fg-3: #5E7179; /* Borders */ --border: #C9CDC8; --border-strong: #A7AEAA; /* Ink opacity scale */ --ink-04: rgba(14, 53, 64, 0.04); --ink-08: rgba(14, 53, 64, 0.08); --ink-12: rgba(14, 53, 64, 0.12); --ink-20: rgba(14, 53, 64, 0.20); --ink-40: rgba(14, 53, 64, 0.40); --ink-60: rgba(14, 53, 64, 0.60); --ink-80: rgba(14, 53, 64, 0.80); /* Bone opacity scale, used on dark grounds */ --bone-rgb: 246, 242, 233; --bone-04: rgba(246, 242, 233, 0.04); --bone-08: rgba(246, 242, 233, 0.08); --bone-10: rgba(246, 242, 233, 0.10); --bone-14: rgba(246, 242, 233, 0.14); --bone-40: rgba(246, 242, 233, 0.40); --bone-55: rgba(246, 242, 233, 0.55); --bone-60: rgba(246, 242, 233, 0.60); --bone-72: rgba(246, 242, 233, 0.72); --bone-78: rgba(246, 242, 233, 0.78); --bone-80: rgba(246, 242, 233, 0.80); --bone-88: rgba(246, 242, 233, 0.88); /* Dark band. The parent's closing CTA band on about.html and index.html. */ --gradient-deep: radial-gradient(at 25% 50%, #1D4A5A 0%, #0B2C3A 72%); --gradient-abyss: radial-gradient(at 30% 40%, #10384A 0%, #061C26 76%); /* State colours from contact.html's lead form */ --error: #9a3535; /* required marker, invalid border */ --error-text: #7a2222; /* inline error copy */ --focus-ring: #17707E; /* the accent doubles as the focus ring */ --field-ring: rgba(23, 112, 126, 0.18); /* ---------- Typefaces ---------- * * Three families, and they are AragoCor's own, self-hosted with the design * system in css/ds. Source Serif 4 at 600 is the only display voice. Geist * carries body text at 400/500/600. JetBrains Mono is the labelling face: * eyebrows, column heads, SKUs, grade codes. A sans-serif heading or a serif * button is off-brand. Archivo — which this site set its headings in while it * was trying to look distinct from the parent — is not in the system, and is * gone. */ --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif; --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* Display scale. * * The parent's editorial hero rule tops out at 60px, which is a magazine * size: it fills a laptop screen with four words and pushes the first * product below the fold. This is a trade catalogue read by buyers who came * for a number, so the scale is pulled down a step across the board and the * measure widened, which puts roughly a third more on the first screen. * Everything below is proportionally the parent's, just quieter. */ --display-1: clamp(29px, calc(27.6px + 1.33vw), 46px); --display-1-measure: 26ch; --display-1-leading: 1.1; /* Section headings, as set inline across the parent's pages */ --display-2: clamp(22px, 2.55vw, 32px); /* h2, primary sections */ --display-3: clamp(20px, 2.2vw, 27px); /* h2, secondary sections */ --display-4: clamp(20px, 2.2vw, 27px); /* products-grades.css section title */ --h3: 19px; /* principle / card headings */ --h3-small: 17px; /* process-step headings */ --h4: 16px; /* Figures (stat strips, proof cells) */ --figure-lg: clamp(26px, 3.2vw, 38px); --figure: clamp(21px, 2.1vw, 26px); --figure-sm: clamp(19px, 1.8vw, 23px); /* Body copy */ --lead: 17px; /* hero lead */ --lead-sm: 16px; --lead-band: 16px; /* dark CTA band copy */ --body: 16px; --body-sm: 15.5px; --body-xs: 14.5px; --caption: 14px; --small: 13.5px; --small-xs: 13px; --fine: 12.5px; /* Labels (mono) */ --label: 12px; --label-sm: 11.5px; --label-xs: 11px; /* footer column labels; floored to 12px on phones */ --label-tracking: 0.12em; --label-tracking-tight: 0.08em; /* Leading */ --leading-heading: 1.1; --leading-h3: 1.15; --leading-body: 1.7; --leading-copy: 1.6; --leading-tight: 1.55; /* ---------- Layout ---------- */ --container: 1440px; --gutter: 40px; /* desktop */ --gutter-phone: 20px; /* ≤600px: parent collapses 40px to 20px */ --measure: 68ch; /* parent styles.css p max-width */ --measure-lead: 640px; /* hero lead max-width */ /* Section rhythm — the vertical paddings the parent actually uses */ /* Tightened with the type, and for the same reason: a trade site is judged on how much of the specification a buyer can see at once. The parent's 96/88/72 becomes 64/44/52. */ --section: 64px; /* standard section */ --section-hero: 44px; /* hero top */ --section-band: 52px; /* paper band */ --section-tight: 40px; --section-phone: 44px; /* ≤600px */ --section-tablet: 52px; /* 601–960px */ /* Radii: 4px controls and buttons, 8px cards and panels, pill chips */ --radius-sm: 4px; --radius: 8px; /* No pill token. The brand's rule is explicit: 4px for controls, 6px for images inside cards, 8px for cards, panels and tables, 50% for spec medallions. Nothing is pill-shaped. */ /* Rules */ --rule-feature: 1.5px solid var(--ink); /* the border-top on principle and step blocks */ --rule-accent: 1.5px solid var(--surf); /* the same rule on a commercial block */ --rule-feature-soft: 1.5px solid var(--ink-12); --rule: 1px solid var(--border); --rule-soft: 1px solid var(--ink-08); /* Elevation (colors_and_type.css) */ --shadow-1: 0 1px 2px rgba(14, 53, 64, 0.06), 0 2px 8px rgba(14, 53, 64, 0.06); --shadow-2: 0 4px 12px rgba(14, 53, 64, 0.10), 0 12px 32px rgba(14, 53, 64, 0.08); --shadow-3: 0 12px 32px rgba(14, 53, 64, 0.14), 0 24px 64px rgba(14, 53, 64, 0.12); --shadow-nav: 0 8px 30px rgba(6, 20, 28, 0.08); /* Motion */ --ease-tide: cubic-bezier(0.22, 1, 0.36, 1); --duration: 220ms; /* ---------- Chrome (site-chrome.css `--ac-*`) ---------- */ /* ---------- Utility bar (EXTENDED) ---------- A thin ink strip above the nav carrying the phone number, the email and the trade line. The parent has no equivalent, but it is the single most recognisable piece of furniture on a trade supplier's site: a buyer looking for a number should not have to scroll for it. */ --util-height: 38px; --util-bg: var(--abyss); --util-fg: rgba(246, 242, 233, 0.72); --util-size: 12.5px; --nav-height: 64px; --nav-bg: var(--surface-chrome); --nav-border: var(--border-inverse); --nav-link: var(--bone-85); --nav-link-size: 14.5px; --nav-breakpoint: 1080px; /* links and CTA hide, toggle shows */ --scroll-margin: 80px; /* [id] scroll-margin-top under the sticky nav */ --foot-fg: rgba(246, 242, 233, 0.75); --foot-link: rgba(246, 242, 233, 0.78); --foot-size: 13.5px; --foot-bottom: 12.5px; /* ---------- Buttons (`.btn-ar` family) ---------- */ --btn-height: 46px; --btn-padding: 0 22px; --btn-size: 15px; --btn-weight: 500; --btn-radius: 4px; --btn-sm-height: 44px; /* nav CTA, brochure chips */ /* ---------- Form fields (contact.html `.fld`) ---------- */ --field-height: 48px; --field-padding: 0 16px; --field-size: 15px; /* 16px on coarse pointers / ≤900px to stop iOS zoom */ --field-radius: 4px; --field-label: 13px; --field-error: 12.5px; --textarea-height: 128px; /* ---------- Alternating band pattern ---------- Page ground is bone. Bands alternate: bone → editorial hero, principle grids, card grids paper → stat strip, process strip, comparison table (border-bottom ink-08) ink → closing CTA band (radial --gradient-deep, bone text) sand → one accent band per page at most (parent uses it once on home, once on about); here it carries the wholesale strip ink → footer */ /* ---------- EXTENDED tokens (not in the parent) ---------- Added for this product site. Each stays inside the parent palette. */ /* EXTENDED: the three grades need a visual identity that is not a new colour. Sand and its two ink-tinted neighbours are used, so the badge on a grade card and the bars in a sieve chart read as three steps of one material. */ --grade-fine: #E0C68F; /* sand */ --grade-medium: #C0A469; /* sand darkened toward ink */ --grade-coarse: #4E6B74; /* tide */ /* EXTENDED: the sieve-distribution bar chart. Track is the ink-08 hairline tint, fill is sand on light grounds and bone-72 on dark ones. */ --bar-track: var(--ink-08); --bar-fill: var(--sand); --bar-height: 10px; /* EXTENDED: the grain-scale illustration. Pixels per millimetre, so the dots and the ruler agree. 15px/mm makes a 5 mm coarse grain 75px. */ --mm: 15px; /* EXTENDED: the "where this grade is wrong" block on grade pages uses sand for its heading on the dark band, so the caution reads as emphasis without introducing a warning colour. No new hue. */ --caution-heading: var(--sand); /* ---------- Commerce (EXTENDED) ---------- The parent sells by quotation and shows no prices, so it has no pattern for any of this. These sit on `surf` so a price, a SKU and a quote control are one visual family, distinct from the specification tables they sit beside. */ --price: clamp(26px, 2.6vw, 33px); /* the headline price on a product card */ --price-sm: 19px; /* price inside a table row */ --price-color: var(--ink); --price-unit: var(--fg-2); --sku: var(--surf); /* SKU codes, set in mono */ --sku-bg: rgba(23, 112, 126, 0.08); --sku-border: rgba(23, 112, 126, 0.22); --tier-active: rgba(23, 112, 126, 0.10); /* the volume tier currently applied */ --qty-height: 44px; } /* ---------- Deviation from the parent, on purpose ---------- * * The parent sets its eyebrow labels and footer column labels in tracked * uppercase mono (`text-transform: uppercase; letter-spacing: 0.12em`). The * aragonitesand.com brief rules "sentence case throughout, no all-caps eyebrow * labels", and the brief wins on content rules. The mono family, size and * colour of those labels are kept exactly; only the transform is dropped and * the tracking loosened to 0.08em, which reads better without capitals. */