# railly.dev — Design System ## 1. Visual Theme & Atmosphere Railly.dev is a developer portfolio stripped to its essential signal. The design philosophy is deliberate minimalism — not the kind born from laziness, but from confidence. The near-white background (`#FDFDFC`, just a whisker off pure white) and near-black text (`#111111`) create maximum contrast with zero visual noise. There are no gradients, no illustrative decorations, no color accents in the content layer. The only departure from monochrome is a sticky dark element — a bar, nav, or code surface — rendered in `#111111` that anchors the page visually. The atmosphere communicates: "the work speaks for itself." This is a portfolio designed for developers reading developers. Typography does all the heavy lifting. --- ## 2. Color Palette & Roles **Surfaces** - `#FDFDFC` — Page background (near-white with imperceptible warm cast) - `#111111` — Sticky/pinned surface (dark bar, likely navigation or code block) **Text** - `#111111` — Primary body text and borders (near-black, maximally legible) - `#525252` — Secondary text (h2, subheadings, metadata) — a neutral mid-grey - `#FDFDFC` — Text on dark surfaces (button labels, inverted contexts) **Interactive** - No accent color detected for links or CTAs in the default state - Hover on buttons uses `opacity: 0.6` — fade rather than color shift - Focus states use browser-default `rgb(0, 95, 204)` blue outline — accessibility maintained without custom styling **Notable absence**: There is no brand accent color. The palette is intentionally achromatic. Any color in the visual experience comes from project screenshots or external content. --- ## 3. Typography Rules The single typeface is **IBM Plex Sans** — IBM's open-source humanist grotesque. The choice is meaningful: it signals a developer/technical background while retaining warmth through its slightly humanist letter forms. It is not the flashy choice — it is the considered one. - **h1**: 18px / weight 500 / `letter-spacing: -0.45px` — deliberately modest header size; this is a personal site, not a landing page - **h2**: 14px / weight 400 — subdued section labeling, nearly body-sized - **body / p**: 15–16px / weight 400 — comfortable reading size - **inputs**: 16px — prevents iOS zoom, a developer detail worth noting The tight negative letter-spacing on h1 (`-0.45px`) is the only typographic refinement visible. Everything else is left at optical defaults. No text transforms, no uppercase labels, no decorative weight contrasts. The scale is deliberately compressed — headings don't shout, they state. --- ## 4. Component Stylings **Buttons**: Transparent background with near-white text on dark surfaces. Interaction feedback is purely opacity-based (`opacity: 0.6` on hover) — no color shifts, no shadows, no transforms. This is austere by design. **Subscribe button**: Solid `#111111` fill with `#FDFDFC` text — the only filled button, used for the primary CTA. The inversion of the base palette makes it immediately identifiable. **Border radii**: `6px` primary, `4px` secondary — subtly rounded, not pill-shaped. Sharp but not harsh. **Code/pre surfaces**: The sticky `#111111` surface likely serves double duty as a code display area or terminal-like element. No cards, no modals, no complex component patterns detected. The site is compositionally simple: text, a few interactive elements, and possibly project cards built from the same minimal palette. --- ## 5. Layout Principles Main content uses `padding: 96px 24px 32px` — generous top padding (likely clearing a fixed navigation bar) with conservative side margins. This creates a tall, narrow reading column suited to focused content consumption. No breakpoints were detected in the CSS extraction — likely the layout is a single fluid column that scales naturally, or breakpoints are handled purely through Tailwind utility classes. The Astro + Tailwind stack confirms a utility-first approach where responsive behavior lives in markup rather than media query declarations. The header is transparent and overlaid — the content starts directly at the viewport top with padding compensation. --- ## 6. Depth & Elevation Depth is completely absent by conventional measures: no box shadows detected anywhere. The only elevation signal is the sticky dark surface, which creates contrast-based depth — a dark plane pinned above the lighter page. This is 2D-first design; the third dimension is not invited. Even interactive states avoid shadow. Focus outlines are browser-default thin strokes. The site feels like a printed page rather than a layered interface. --- ## 7. Do's and Don'ts **Do** - Keep the palette achromatic — color belongs to content, not chrome - Use IBM Plex Sans exclusively; its character is the brand - Let opacity handle hover states rather than color changes - Keep border-radius conservative: 4–6px only - Trust whitespace — generous padding is a feature, not waste **Don't** - Introduce accent colors in navigation or UI chrome - Scale up font sizes dramatically — the compressed type scale is intentional - Add box shadows or card lift effects - Use uppercase or tracked-out letter-spacing for labels --- ## 8. Responsive Behavior No explicit CSS breakpoints were extracted, suggesting the layout is a single-column fluid design. The 24px side padding at all sizes provides minimum breathing room. The Tailwind approach likely uses `sm:`, `md:` utilities inline, but the design probably doesn't fundamentally restructure across breakpoints — it's a single-column document at every size. Sticky navigation (the `#111111` surface) likely collapses gracefully at mobile widths given the site's minimal complexity. --- ## 9. Agent Prompt Guide > "Design in the style of railly.dev: achromatic palette — near-white `#FDFDFC` background, near-black `#111111` text and surfaces. IBM Plex Sans as sole typeface, modestly sized. No accent colors, no shadows, no decorative elements. Hover states use opacity fade only. Border-radius capped at 6px. The design communicates through confident emptiness — let content and whitespace do the work." --- *Generated by Sparkbites — extracted from live CSS analysis*