Ralphify Brand Guidelines
Use these rules when generating any visual artifact (HTML pages, CSS, slides, graphics, diagrams) that should carry the Ralphify brand.
Brand identity
- Name: Ralphify (always capitalized, never "RALPHIFY" or "ralphify" in headings/prose)
- CLI command:
ralph (always lowercase, monospace)
- Tagline: "Put your AI coding agent in a
while True loop and let it ship."
- Positioning: Minimal CLI harness for autonomous AI coding loops. Inspired by the Ralph Wiggum technique.
- Logo icon: Runner emoji (🏃) — represents Ralph running in a loop
- Copyright: Computerlove Technologies
Colors
Primary palette
| Name |
Hex |
Usage |
| Purple |
#8B6CF0 |
Primary brand color, buttons, headers, icons |
| Purple Dark |
#7C5CE0 |
Hover states, links (light mode) |
| Purple Light |
#A78BF5 |
Dark-mode accent, hover gradients, dark-mode links |
| Purple Deep |
#7C4DFF |
Header gradient end |
Accent palette
| Name |
Hex |
Usage |
| Orange |
#E06030 |
Secondary brand color, gradient endpoints |
| Orange Light |
#E87B4A |
Tagline gradient end, warm accents |
Neutral palette
| Name |
Hex |
Usage |
| White |
#FFFFFF |
Light-mode backgrounds |
| Slate BG |
#1E1E2E |
Dark-mode backgrounds (Material Slate) |
| Text Dark |
#2E2E3E |
Primary body text (light mode) |
| Text Light |
#E0E0E0 |
Primary body text (dark mode) |
Brand gradient
The signature visual is a purple → orange gradient used for hero elements and the tagline:
/* Primary brand gradient */
background: linear-gradient(135deg, #8B6CF0 0%, #E87B4A 100%);
/* Button gradient (purple only) */
background: linear-gradient(135deg, #8B6CF0 0%, #A78BF5 100%);
/* Header bar gradient */
background: linear-gradient(90deg, rgba(139, 108, 240, 0.95) 0%, rgba(124, 77, 255, 0.95) 100%);
Typography
- Headings: System sans-serif stack —
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif. Bold weight (600–700).
- Body: Same system stack, regular weight (400). Line-height 1.6 for readability.
- Code / CLI output: Monospace —
"SF Mono", "Fira Code", "JetBrains Mono", Consolas, monospace.
- No custom web fonts are required. The brand relies on color and gradients, not typography.
Visual style
General principles
- Minimal and clean. Ralphify is a small, focused tool — the visual style reflects that. No clutter.
- Purple as the anchor. Purple (#8B6CF0) is the primary visual element. Orange is the accent that adds warmth.
- Generous whitespace. Let content breathe.
- Dark mode is first-class. Every element must look good in both light and dark schemes.
Component patterns
- Buttons (primary): Purple gradient background, white text, 600 weight, rounded corners. Hover: slight lift (
translateY(-1px)) + purple glow shadow (box-shadow: 0 4px 12px rgba(139, 108, 240, 0.35)).
- Buttons (secondary): Transparent background, purple border and text. Hover: subtle purple fill (
rgba(139, 108, 240, 0.08)).
- Cards: White/dark background, 8px border-radius. Hover: lift (
translateY(-3px)) + soft shadow.
- Icons in cards: Tinted purple (#8B6CF0 light, #A78BF5 dark).
- Code blocks: 6px border-radius.
- Section dividers (hr): 2px solid, purple-tinted (
rgba(139, 108, 240, 0.15) light, rgba(167, 139, 245, 0.2) dark).
- Links: Purple (#7C5CE0 light, #A78BF5 dark). No underline by default; underline on hover.
- Footer: Subtle gradient wash (
rgba(139, 108, 240, 0.08) → rgba(232, 123, 74, 0.06)). Dark mode: solid dark.
Animation
- Transitions are subtle and fast:
0.15s ease for buttons, 0.2s ease for cards.
- Only translate and shadow transitions. No rotation, scaling, or opacity fades on interaction.
Tone of voice (for copy)
- Direct and concise. Lead with what the tool does, not what it is.
- Confident but not hype-y. "Two commands to start" not "Revolutionary AI framework".
- Code-first. Show terminal output and commands before explaining.
- Conversational. "That's it. Two commands." is on-brand. "Leveraging cutting-edge paradigms" is not.
Landing page structure (reference)
When building a landing page for Ralphify, follow this hierarchy:
- Hero: CLI banner image + tagline + CTA buttons (Get Started / View Cookbook)
- Install: Tabbed code blocks (uv / pipx / pip)
- Quick demo: Terminal output showing the loop in action
- Primitives: Card grid showing Checks, Contexts, Ralphs
- Requirements: Short list
- Next steps: Links to docs
Asset references
- CLI banner:
docs/assets/cli-banner.png — the purple-gradient ASCII art banner used in docs and README
- Logo icon: Material Design Icons
run icon (for use in nav/favicons)
- Social: GitHub repo + PyPI badges
1---2name: brand-guidelines3description: Applies Ralphify's official brand colors, typography, and visual style to any artifact — landing pages, slides, diagrams, social graphics. Use when Ralphify's look-and-feel should be applied.4license: MIT (see project root LICENSE)5---67# Ralphify Brand Guidelines89Use these rules when generating any visual artifact (HTML pages, CSS, slides, graphics, diagrams) that should carry the Ralphify brand.1011## Brand identity1213- **Name**: Ralphify (always capitalized, never "RALPHIFY" or "ralphify" in headings/prose)14- **CLI command**: `ralph` (always lowercase, monospace)15- **Tagline**: "Put your AI coding agent in a `while True` loop and let it ship."16- **Positioning**: Minimal CLI harness for autonomous AI coding loops. Inspired by the Ralph Wiggum technique.17- **Logo icon**: Runner emoji (🏃) — represents Ralph running in a loop18- **Copyright**: Computerlove Technologies1920## Colors2122### Primary palette2324| Name | Hex | Usage |25|----------------|-----------|---------------------------------------------|26| **Purple** | `#8B6CF0` | Primary brand color, buttons, headers, icons |27| **Purple Dark**| `#7C5CE0` | Hover states, links (light mode) |28| **Purple Light**| `#A78BF5`| Dark-mode accent, hover gradients, dark-mode links |29| **Purple Deep**| `#7C4DFF` | Header gradient end |3031### Accent palette3233| Name | Hex | Usage |34|----------------|-----------|-----------------------------------------------|35| **Orange** | `#E06030` | Secondary brand color, gradient endpoints |36| **Orange Light**| `#E87B4A`| Tagline gradient end, warm accents |3738### Neutral palette3940| Name | Hex | Usage |41|----------------|-----------|-------------------------------------|42| **White** | `#FFFFFF` | Light-mode backgrounds |43| **Slate BG** | `#1E1E2E` | Dark-mode backgrounds (Material Slate) |44| **Text Dark** | `#2E2E3E` | Primary body text (light mode) |45| **Text Light** | `#E0E0E0` | Primary body text (dark mode) |4647### Brand gradient4849The signature visual is a **purple → orange** gradient used for hero elements and the tagline:5051```css52/* Primary brand gradient */53background: linear-gradient(135deg, #8B6CF0 0%, #E87B4A 100%);5455/* Button gradient (purple only) */56background: linear-gradient(135deg, #8B6CF0 0%, #A78BF5 100%);5758/* Header bar gradient */59background: linear-gradient(90deg, rgba(139, 108, 240, 0.95) 0%, rgba(124, 77, 255, 0.95) 100%);60```6162## Typography6364- **Headings**: System sans-serif stack — `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`. Bold weight (600–700).65- **Body**: Same system stack, regular weight (400). Line-height 1.6 for readability.66- **Code / CLI output**: Monospace — `"SF Mono", "Fira Code", "JetBrains Mono", Consolas, monospace`.67- No custom web fonts are required. The brand relies on color and gradients, not typography.6869## Visual style7071### General principles7273- **Minimal and clean**. Ralphify is a small, focused tool — the visual style reflects that. No clutter.74- **Purple as the anchor**. Purple (#8B6CF0) is the primary visual element. Orange is the accent that adds warmth.75- **Generous whitespace**. Let content breathe.76- **Dark mode is first-class**. Every element must look good in both light and dark schemes.7778### Component patterns7980- **Buttons (primary)**: Purple gradient background, white text, 600 weight, rounded corners. Hover: slight lift (`translateY(-1px)`) + purple glow shadow (`box-shadow: 0 4px 12px rgba(139, 108, 240, 0.35)`).81- **Buttons (secondary)**: Transparent background, purple border and text. Hover: subtle purple fill (`rgba(139, 108, 240, 0.08)`).82- **Cards**: White/dark background, 8px border-radius. Hover: lift (`translateY(-3px)`) + soft shadow.83- **Icons in cards**: Tinted purple (#8B6CF0 light, #A78BF5 dark).84- **Code blocks**: 6px border-radius.85- **Section dividers (hr)**: 2px solid, purple-tinted (`rgba(139, 108, 240, 0.15)` light, `rgba(167, 139, 245, 0.2)` dark).86- **Links**: Purple (#7C5CE0 light, #A78BF5 dark). No underline by default; underline on hover.87- **Footer**: Subtle gradient wash (`rgba(139, 108, 240, 0.08)` → `rgba(232, 123, 74, 0.06)`). Dark mode: solid dark.8889### Animation9091- Transitions are subtle and fast: `0.15s ease` for buttons, `0.2s ease` for cards.92- Only translate and shadow transitions. No rotation, scaling, or opacity fades on interaction.9394## Tone of voice (for copy)9596- **Direct and concise**. Lead with what the tool does, not what it is.97- **Confident but not hype-y**. "Two commands to start" not "Revolutionary AI framework".98- **Code-first**. Show terminal output and commands before explaining.99- **Conversational**. "That's it. Two commands." is on-brand. "Leveraging cutting-edge paradigms" is not.100101## Landing page structure (reference)102103When building a landing page for Ralphify, follow this hierarchy:1041051. **Hero**: CLI banner image + tagline + CTA buttons (Get Started / View Cookbook)1062. **Install**: Tabbed code blocks (uv / pipx / pip)1073. **Quick demo**: Terminal output showing the loop in action1084. **Primitives**: Card grid showing Checks, Contexts, Ralphs1095. **Requirements**: Short list1106. **Next steps**: Links to docs111112## Asset references113114- **CLI banner**: `docs/assets/cli-banner.png` — the purple-gradient ASCII art banner used in docs and README115- **Logo icon**: Material Design Icons `run` icon (for use in nav/favicons)116- **Social**: GitHub repo + PyPI badges
computerlovetech