// Artos Solutions — holding-co site // Single-page, sanctuary aesthetic, with five tweak axes: // palette · typography · hero · mission · portfolio const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "ember", "typePair": "newsreader-manrope", "hero": "reverent", "mission": "letter", "portfolio": "plate" }/*EDITMODE-END*/; // ─── palette options ─────────────────────────────────────────────────────── // All four are dark-leaning for an "edgier" default. Vellum kept as the // single light option for contrast. const PALETTES = { ember: { label: "Ember", swatch: ["#1c1814", "#f0e8d8", "#8a7a62", "#d97757"], vars: { "--bg": "#1c1814", "--bg-warm": "#2a2420", "--bg-hover": "#322a22", "--ink": "#f0e8d8", "--ink-soft": "#c4b8a0", "--taupe": "#8a7a62", "--sand": "#6a5e48", "--rule": "rgba(240, 232, 216, 0.14)", "--rule-soft": "rgba(240, 232, 216, 0.06)", "--accent": "#d97757", }, }, walnut: { label: "Walnut", swatch: ["#14100c", "#e8dccb", "#6e5f4a", "#c8884a"], vars: { "--bg": "#14100c", "--bg-warm": "#1f1812", "--bg-hover": "#28201a", "--ink": "#e8dccb", "--ink-soft": "#b8a890", "--taupe": "#7e6c54", "--sand": "#5a4d3c", "--rule": "rgba(232, 220, 203, 0.14)", "--rule-soft": "rgba(232, 220, 203, 0.06)", "--accent": "#c8884a", }, }, graphite: { label: "Graphite", swatch: ["#16181a", "#ebe7e0", "#7e7a72", "#b8804a"], vars: { "--bg": "#16181a", "--bg-warm": "#212326", "--bg-hover": "#2a2d31", "--ink": "#ebe7e0", "--ink-soft": "#b8b4ad", "--taupe": "#7e7a72", "--sand": "#544f48", "--rule": "rgba(235, 231, 224, 0.14)", "--rule-soft": "rgba(235, 231, 224, 0.06)", "--accent": "#b8804a", }, }, vellum: { label: "Vellum (light)", swatch: ["#f3ede2", "#1f1612", "#7a5a44", "#a64e2e"], vars: { "--bg": "#f3ede2", "--bg-warm": "#ebe2cf", "--bg-hover": "#f8f2e6", "--ink": "#1f1612", "--ink-soft": "#4a3a30", "--taupe": "#7a5a44", "--sand": "#c79f7a", "--rule": "rgba(31, 22, 18, 0.14)", "--rule-soft": "rgba(31, 22, 18, 0.07)", "--accent": "#a64e2e", }, }, }; // ─── typography pairings ─────────────────────────────────────────────────── // All modern editorial serifs (no Cormorant — too curly). Paired with // confident humanist sans. const TYPE_PAIRS = { "newsreader-manrope": { label: "Newsreader + Manrope", serif: '"Newsreader", Georgia, serif', sans: '"Manrope", -apple-system, sans-serif', }, "source-dmsans": { label: "Source Serif + DM Sans", serif: '"Source Serif 4", Georgia, serif', sans: '"DM Sans", -apple-system, sans-serif', }, "spectral-public": { label: "Spectral + Public Sans", serif: '"Spectral", Georgia, serif', sans: '"Public Sans", -apple-system, sans-serif', }, }; // ─── content ─────────────────────────────────────────────────────────────── const PRINCIPLES = [ { n: "I.", t: "Stewardship before ownership.", d: "We tend, we do not consume. Every business is borrowed from the families it serves." }, { n: "II.", t: "The family is the first sanctuary.", d: "Before product, market, or strategy comes the household." }, { n: "III.", t: "Healing is slower than harm.", d: "We honor the pace. We do not trade soul for scale." }, { n: "IV.", t: "Plain truth, no theatre.", d: "We say what we mean. The age of noise is loud enough." }, { n: "V.", t: "Build what we would bring home.", d: "Every decision passes through one filter. The filter is simple." }, { n: "VI.", t: "Faith is the foundation, not the decoration.", d: "The values are bedrock. They are not paint." }, ]; const PORTFOLIO = [ { name: "MyHomeAware", sector: "Home & family safety", year: "2024", initial: "M", desc: "Awareness, education, and tools that protect families inside the place they should feel safest.", status: "Active", href: "https://www.myhomeaware.com", }, { name: "Forthcoming", sector: "Health · Wellness · Hospitality", year: "—", initial: "·", desc: "Companies join when the fit is right. Not when the calendar demands it.", status: "Open", empty: true, }, ]; const FOUNDERS = [ { initial: "·", role: "Founder & Steward", name: "Name placeholder", bio: "Short founder biography — what they tend to, what they're known for, and the family they're building this for.", }, { initial: "·", role: "Co-founder", name: "Name placeholder", bio: "Short founder biography — what they tend to, what they're known for, and the family they're building this for.", }, ]; // ─── wheat mark ────────────────────────────────────────────────────────────── // Two wheat stalks crossed in an X. Drawn once as a vertical stalk in , // then placed twice with ±32° rotation so the geometry stays symmetric. function WheatMark() { return ( ); } // ─── reveal-on-scroll hook ───────────────────────────────────────────────── function useReveal() { React.useEffect(() => { const els = document.querySelectorAll(".reveal"); const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); }); }, { threshold: 0.12, rootMargin: "0px 0px -80px 0px" }); els.forEach((el) => obs.observe(el)); return () => obs.disconnect(); }, []); } // ─── hero variations ────────────────────────────────────────────────────── function HeroReverent() { return (

Healing. Wellness. For families.

); } function HeroEditorial() { return (
ἄρτος
artos, n. — Greek for bread. The daily provision. The staple at the family table.

A holding company for healing, wellness, and the home.

); } function HeroLitany() { return (

For the family. Healing. Wellness. A quiet life, against the noise.

); } const HERO_VARIANTS = { reverent: HeroReverent, editorial: HeroEditorial, litany: HeroLitany, }; // ─── mission variations ─────────────────────────────────────────────────── function MissionLetter() { return (
Mission
A note to the
families we serve
Anno Domini
MMXXIV

To the families,

We connect and promote healing and wellness for families.

The world has grown loud. The quiet work of caring for a household has been pushed to the margins. We believe the family is worth more.

Artos gathers companies that serve families directly. We hold them carefully. We let them grow.

— Artos Solutions
); } function MissionStacked() { return (

Healing and wellness for families. That is the whole of it.

The world has grown loud. The quiet work of caring for a household has been pushed to the margins.

We believe the family is worth more.

Artos gathers companies that serve families directly. We hold them carefully. We let them grow at the pace good things grow.

We measure by what is built into the home, not by what is broadcast outside of it.

); } function MissionMargin() { return (

We connect and promote healing and wellness for families.

The world has grown loud. The quiet work of caring for a household has been pushed to the margins.

Artos gathers companies that serve families directly. We hold them carefully. We let them grow.

Filed under
Mission
Audience
Families · Founders · Partners
Posture
Quiet by intention
); } const MISSION_VARIANTS = { letter: MissionLetter, stacked: MissionStacked, margin: MissionMargin, }; // ─── portfolio cards ────────────────────────────────────────────────────── function PortfolioPlate({ p }) { return (
{p.sector} {p.status}
{p.initial}

{p.name}

{p.desc}

{!p.empty && (
Visit → Est. {p.year}
)} ); } function PortfolioIndex({ p }) { return (
{p.sector} {p.status}

{p.name}

{p.year}

{p.desc}

 ); } function PortfolioMarker({ p }) { return (
{p.sector} {p.year !== "—" ? "Est. " + p.year : "—"} {p.status}

{p.name}

{p.desc}

{!p.empty && Visit →}
); } const PORTFOLIO_VARIANTS = { plate: PortfolioPlate, index: PortfolioIndex, marker: PortfolioMarker, }; // ─── newsletter ──────────────────────────────────────────────────────────── function Newsletter() { const [email, setEmail] = React.useState(""); const [sent, setSent] = React.useState(false); const submit = (e) => { e.preventDefault(); if (!email) return; setSent(true); setTimeout(() => { setSent(false); setEmail(""); }, 3000); }; return (
The dispatch

A quiet letter, once a quarter.

No marketing. No urgency. Notes on what we are tending to.

setEmail(e.target.value)} aria-label="Email" />
Four letters a year · Unsubscribe anytime
); } // ─── nav ─────────────────────────────────────────────────────────────────── function Nav() { return (
Artos Solutions
); } // ─── app ─────────────────────────────────────────────────────────────────── function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); useReveal(); // Apply palette + type pair as CSS variables on :root React.useEffect(() => { const pal = PALETTES[t.palette] || PALETTES.cream; const pair = TYPE_PAIRS[t.typePair] || TYPE_PAIRS["cormorant-mulish"]; const root = document.documentElement.style; Object.entries(pal.vars).forEach(([k, v]) => root.setProperty(k, v)); root.setProperty("--serif", pair.serif); root.setProperty("--sans", pair.sans); }, [t.palette, t.typePair]); const Hero = HERO_VARIANTS[t.hero] || HeroReverent; const Mission = MISSION_VARIANTS[t.mission] || MissionLetter; const PfCard = PORTFOLIO_VARIANTS[t.portfolio] || PortfolioPlate; return ( <>