factory-design

Files (1)

• SKILL.md

SKILL.md (first lines)

# Factory Design System

A rigorous, pixel-level reproduction of the Factory.ai aesthetic. This skill defines **every measurement, variable, class combination, and animation** that must be used. When building UI in this system, copy these values verbatim — do not round, re-interpret, or "modernize" them.

## Core Philosophy

Factory's look is **"agent-native developer tooling"**. Five non-negotiable rules define the vibe:

1. **Monospace is the voice.** `Geist Mono` is the default typeface for ~90% of text (nav, labels, body paragraphs, buttons, badges, code). `Geist Sans` appears *only* for display/marketing headings and section titles — never for UI chrome.
2. **Dark-first, tokenized.** Always author in dark mode first. Never hardcode colors — always `var(--color-...)`. Light theme is the mirror, not a rewrite.
3. **Micro-typography.** Tracking is tight and negative almost everywhere (`tracking-[-0.015rem]`, `tracking-[-0.0175rem]`, `tracking-[-0.04em]` on headlines). Font sizes are specific pixels (`text-[12px]`, `text-[14px]`, `text-[60px]`), not Tailwind presets.
4. **Dashed borders and diagonal stripes.** Containers use `border-dashed border-[var(--color-base-700)]`. Buttons and hoverable cards reveal a 45° conveyor-belt stripe pattern on hover.
5. **Motion is earned.** Three signature animations: **character reveal** on the hero headline, **scramble** on section badges, **typewriter** inside the CLI install box. Everything else is `duration-150` / `duration-200` color and opacity transitions.

If a design decision isn't covered below, err toward: **mono, dashed, 8-12px radius, var(--color-base-XXX), tight tracking, stripe on hover**.

---

## 1. Design Tokens — copy these exactly

All tokens live in `app/globals.css` under `:root`, `html / [data-theme="dark"]`, and `[data-theme="light"]`. Never inline a hex/oklch. Reference via `var(--token-name)`.

### 1.1 Accent (orange — shared across themes)

```css
--color-accent-100: #ef6f2e;   /* primary orange — links, hero word, dots, "Copied" check */
--color-accent-200: #ee6018;   /* hover/active */
--color-accent-300: #d15010;   /* badge numerals, emphatic accents */
```

Usage rules:
- **Exactly one** accent word per headline. Example: `<span class="text-[var(--color-accent-100)]">Next-Gen</span> Platform`.
- Accent dot (`w-2 h-2 rounded-full bg-[var(--color-accent-100)]`) precedes "Trusted by" / section intros.
- `::selection` is always accent-100 on dark-primary.
- Nav links hover to `text-[var(--color-accent-100)]` via `transition-colors duration-200`.

### 1.2 Base Scale — inverts between themes

The `base` scale runs 100 (near-foreground) → 1000 (near-background). **Dark theme**: 100 is almost white, 1000 is near-black. **Light theme**: inverted. This means every component works in both themes without conditionals — you just reference the scale.

```css
/* DARK (default) */
--background: #020202;        /* page bg */
--foreground: #eee;           /* primary text */
--color-base-100:  #d6d3d2;   /* near-foreground */
--color-base-200:  #ccc9c7;
--color-base-300:  #b8b3b0;
--color-base-400:  #a49d9a;   /* nav links, subheading body text */
--color-base-500:  #8a8380;   /* muted body text, "Trusted by" copy, placeholders */
--color-base-600:  #5c5855;   /* terminal dots, social link separators */
--color-base-700:  #4d4947;   /* dashed borders, dropdown borders, theme-toggle border */
--color-base-800:  #3d3a39;   /* solid borders on cards, tab dividers */
--color-base-900:  #2e2c2b;   /* card backgrounds (CTA block, footer, terminal mockup) */
--color-base-1000: #1f1d1c;   /* deepest fill (command box inside terminal) */

/* LIGHT */
--background: #eee;
--foreground: #020202;
--color-base-100:  #1f1d1c;   /* (inverted) */
--color-base-1000: #d6d3d2;
/* ...the whole scale mirrors */
```

**Semantic aliases** (prefer these when the role is semantic, not shade-specific):

```css
--color-dark-base-primary:   #020202 / #eee;   /* background surface */
--color-dark-base-secondary: #101010 / #fafafa;
--color-light-base-primary:  #eee    / #020202; /* readable text surface */
--color-light-base-secondary:#fafafa / #101010;
```

**Button-specific tokens** (never hardcode button colors):

```css
/* dark */
--btn-primary-bg:       #1f1d1c;   --btn-primary-text:     #fafafa;
--btn-secondary-bg:     #fafafa;   --btn-secondary-text:   #1f1d1c;
--btn-secondary-border: var(--color-base-700);

/* light (inverted + transparent secondary border) */
--btn-primary-bg:       #eeeeee;   --btn-primary-text:     #101010;
--btn-secondary-bg:     #101010;   --btn-secondary-text:   #eeeeee;
--btn-secondary-border: transparent;
```

### 1.3 Typography

```css
--font-sans: var(--font-geist-sans), system-ui, sans-serif;
--font-mono: var(--font-geist-mono), monospace;
```

Load both Geists from `next/font/google` in `app/layout.tsx`:

```tsx
import { Geist, Geist_Mono } from "next/font/google";
const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });
```

Body default: `font-family: var(--font-sans)` + `antialiased`. All UI chrome explicitly overrides with `font-mono`.

### 1.4 Radius, Motion, Spacing

```css
--spacing: 0.25rem;  /* 4px base unit */

--radius-xs:  0.125rem;  /* 2px */
--radius-sm:  0.25rem;   /* 4px — buttons */
--radius-md:  0.375rem;  /* 6px */
--radius-lg:  0.5rem;    /* 8px — cards, CLI box, terminal mockup, CTA */
--radius-xl:  0.75rem;   /* 12px — product dropdown panel */
--radius-2xl: 1rem;
--radius-3xl: 1.5rem;

--ease-reveal:  cubic-bezier(0.645, 0.045, 0.355, 1);   /* char reveal, fade-in-up */
--ease-default: cubic-bezier(0.4,   0,     0.2,   1);
--duration-fast:   0.15s;   /* transition-colors default */

From sssemil/SKILLS, MIT.

More from sssemil/SKILLS