Replicant FX / Arroway Ltd

Site Standards

Living reference for both brands — design tokens, components, and editorial conventions. Each section shows a live example, the code to use it, and where to edit the source.

Design Tokens

Edit in src/styles/global.css — the :root block at the top.

Brand Accents

#C4621D--arroway-accent
#d97f42--arroway-accent-light
#9e4e17--arroway-accent-dim
#faf0e8--arroway-accent-pale
#f5dcc8--arroway-accent-pale2
#4682B4--rfx-accent
#6fa3cc--rfx-accent-light
#2d5f8a--rfx-accent-dim
#e8f1f8--rfx-accent-pale
#d0e4f2--rfx-accent-pale2

Neutrals

#ffffff--bg
#f7f6f3--bg-2
#f0eeea--bg-3
#1a1916--text-primary
#5a5855--text-secondary
#9a9894--text-tertiary

Typography Tokens

--font-display'DM Serif Display', Georgia, serif
--font-body'DM Sans', system-ui, sans-serif
--max-w860px — max page content width
--page-pad24px (16px mobile)

Brand Switching

Set data-brand="arroway" or data-brand="rfx" on <html> via BaseLayout.astro. CSS selects tokens automatically.

---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout brand="rfx">  <!-- or brand="arroway" -->
  ...
</BaseLayout>

Callouts

Component: src/components/shared/Callout.astro
CSS classes: src/styles/global.css — search .note, .caution, .warning

Live Examples

Note
This is a note. Use it for helpful context, tips, or background information that the reader should know but that isn't blocking.
Caution
This is a caution. Use it when the reader should slow down — a common mistake, a non-obvious prerequisite, or something that could cause confusion.
Warning
This is a warning. Use it when skipping a step or doing something wrong could cause real damage — data loss, hardware damage, safety hazards.
Tip
The title prop overrides the heading label. <Callout type="note" title="Tip">

Usage in MDX (.mdx files)

---
# your frontmatter
---
import Callout from '../../components/shared/Callout.astro';

<Callout type="note">Content here.</Callout>
<Callout type="caution">Content here.</Callout>
<Callout type="warning">Content here.</Callout>

{/* Custom label */}
<Callout type="note" title="Pro Tip">Content here.</Callout>

Usage in plain Markdown (.md files)

Use the CSS class directly on an HTML element. The heading appears automatically via CSS ::before.

<div class="note">
  This is a note inside a plain .md file.
</div>

<div class="caution">Double-check your wiring before powering on.</div>

<div class="warning">High voltage — disconnect mains before opening.</div>

Astro page (no MDX)

---
import Callout from '../components/shared/Callout.astro';
---
<Callout type="warning">
  Never run this command in production.
</Callout>

Typography

Edit in src/styles/global.css — the Typography and Prose sections.

Eyebrow label

Heading 1

Heading 2

Heading 3

Body text — DM Sans 400. Links look like this.

Secondary / tertiary color text

/* global.css */
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.2rem; }

/* Eyebrow */
.eyebrow {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
# H1 heading
## H2 heading
### H3 heading

<p class="eyebrow">Eyebrow label</p>

Buttons

Edit in src/styles/global.css — the Buttons section.

Arroway Primary RFX Primary Ghost 
<!-- In any .astro / .mdx / HTML -->
<a href="/contact" class="btn btn-arroway">Get in touch</a>
<a href="/rfx/blog" class="btn btn-rfx">Build log</a>
<a href="/about"   class="btn btn-ghost">Learn more</a>

<!-- With icon (SVG inline before text) -->
<a href="..." class="btn btn-rfx">
  <svg ...></svg> GitHub
</a>

Tags / Pills

Edit in src/styles/global.css — the Tags / Pills section.

Arroway Replicant FX Neutral 
<span class="tag tag-arroway">Consulting</span>
<span class="tag tag-rfx">3D Printing</span>
<span class="tag tag-neutral">General</span>

Tables

Table styles live in src/styles/global.css — the Prose tables section.
Product thumbnail override: .prose table img rule (56×56px, no margin).

ItemDescriptionQty
Arduino MegaMicrocontroller for GRBL Mega-5X1
DM542T Stepper Driver24–50VDC, up to 4.5A, DIP-configurable5
GT2 Timing Belt, 6mm5-metre roll1
 
<!-- Markdown pipe table (in .md or .mdx) -->
| Item | Description | Qty |
|------|-------------|-----|
| Arduino Mega | Microcontroller for GRBL | 1 |
| DM542T Driver | 24–50VDC, DIP-configurable | 5 |

<!-- With thumbnail image column (first col is image link) -->
| | Item | Qty |
|---|---|---|
| [![](https://ws-na.amazon-adsystem.com/...ASIN=B01H4ZLZLQ...)](https://amazon.com/dp/B01H4ZLZLQ?tag=arroway-20) | [Arduino Mega](https://amazon.com/dp/B01H4ZLZLQ?tag=arroway-20) | 1 |

Code Blocks

Syntax highlighting: Shiki (github-dark theme) — build-time, zero runtime JS.
Config: astro.config.mjs — markdown.shikiConfig.theme.
Inline code styles: src/styles/global.css — .prose code.

Live rendered examples — this is exactly how code blocks appear in posts:

const greeting = 'Hello, world';
console.log(greeting);
def greet(name):
    return f"Hello, {name}"
#define N_AXIS_LINEAR 4  // Number of linear axes
uint16_t spindle_compute_pwm_value(float rpm) {
  return (uint16_t)(0.0309f * rpm + 85.606f);
}

Markdown syntax — add the language name after the opening fences:

```javascript
const greeting = 'Hello, world';
console.log(greeting);
```

```python
def greet(name):
    return f"Hello, {name}"
```

```c
#define N_AXIS_LINEAR 4
```

Inline code: wrap in single backticks — `like this`

Images

Static images live in public/images/ — served at /images/....
Prose image styles: src/styles/global.css — .prose img. 

<!-- Markdown -->
![Alt text](/images/2019/10/photo.jpg)

<!-- In .astro with width control -->
<img src="/images/2019/10/..." alt="CNC router" style="width:100%;max-width:600px" />

<!-- Folder structure -->
public/
  images/
    2019/10/   ← WordPress migration by year/month
    2020/06/
    ...

Prose Layout

.prose class — src/styles/global.css.
Applied automatically by src/layouts/PostLayout.astro for all blog posts. 

<!-- PostLayout.astro wraps all blog content in: -->
<article class="prose">
  <slot />   <!-- your .md / .mdx content renders here -->
</article>

<!-- To use prose styling on a custom .astro page: -->
<div class="container section">
  <div class="prose">
    <h1>Title</h1>
    <p>Content...</p>
  </div>
</div>

Content Collections (blog posts)

Schema defined in src/content/config.ts

# Arroway blog  (src/content/blog/)
title: "Post Title"
date: "2024-06-01"
description: "Short description for meta and cards."
category: writing        # maps to label via src/utils/categories.ts
draft: false             # true = excluded from builds
ogImage: /images/...     # optional; falls back to site default
# RFX blog  (src/content/rfxBlog/)
title: "Build Log Post"
date: "2024-06-01"
description: "..."
category: cnc            # cnc | 3d-printing | electronics | props | code | tools
tags: ["grbl", "cnc"]   # optional keyword array
githubUrl: "https://github.com/..."   # optional; adds GitHub button
draft: false

File Locations Cheat Sheet

WhatWhere
Global CSS / tokenssrc/styles/global.css
Brand switching logicsrc/layouts/BaseLayout.astro
Post chrome (header, footer, TOC)src/layouts/PostLayout.astro
Arroway navsrc/components/arroway/Nav.astro
RFX navsrc/components/rfx/Nav.astro
Footer (both brands)src/components/shared/Footer.astro
Callout componentsrc/components/shared/Callout.astro
Affiliate disclosuresrc/components/rfx/AffiliateDisclosure.astro
Category label mapsrc/utils/categories.ts
Content schemassrc/content/config.ts
Arroway blog postssrc/content/blog/*.md
RFX blog postssrc/content/rfxBlog/*.md
RFX project pagessrc/content/rfxProjects/*.md
Press mentionssrc/content/press/*.md
Gear / affiliate datasrc/data/gear.ts
Static imagespublic/images/
Netlify redirectsnetlify.toml
Site URL / integrationsastro.config.mjs