ATUL KUMAR

Generated Oct 29, 2026

DESIGN.md for grainrad.com

grainrad.com7 colors1 componentsIBM Plex Mono

Remix

2 screenshots captured· grainrad.com

1 / 2 · Grainrad · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Grainrad
description: |
  Grainrad embodies a brutalist, retro-computational aesthetic rooted in ASCII
  art and early digital culture. The design prioritizes raw functionality and
  monospace typography over ornamentation, creating an interface that feels like
  a command-line tool rendered for the web. Deep blacks dominate the canvas,
  punctuated by muted grays and a singular accent of light gray (#CCCCCC), which
  reads as both industrial and nostalgic. The interface rejects rounded corners
  entirely, favoring sharp, rectilinear geometry. Every element is deliberately
  spare, suggesting the constraints and character-based limitations of vintage
  terminals and ASCII editors. This is a design system for creators and
  technologists who value precision, history, and the beauty of constraints.
source:
  url: "https://grainrad.com"
  pagesAnalyzed: 1
  extractedAt: 2026-10-29
  tokensMeasured: true
colors:
  primary: "#CCCCCC"
  canvas: "#0A0A0A"
  on-primary: "#222222"
  ink: "#555555"
  neutral-1: "#E5E7EB"
  neutral-2: "#888888"
  neutral-3: "#FFFFFF"
typography:
  code-sm:
    fontFamily: "IBM Plex Mono"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  code-sm-strong:
    fontFamily: "IBM Plex Mono"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  code-xs:
    fontFamily: "IBM Plex Mono"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  code-xs-tight:
    fontFamily: "IBM Plex Mono"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  code-xs-uppercase:
    fontFamily: "IBM Plex Mono"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
    textTransform: uppercase
  code-xs-strong:
    fontFamily: "IBM Plex Mono"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
rounded:
  none: 0px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 32px
borderWidths:
  thin: 1px
elevationStrategy: color-blocking
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FBFBFB"
    surface: "#F1F1F1"
    surfaceRaised: "#E9E9E9"
    text: "#1A1A1A"
    textMuted: "#6F6F6F"
    border: "#D8D8D8"
    accent: "#707070"
    accentFg: "#FFFFFF"
    focusRing: "#8F8F8F"
    elevation: shadow
  dark:
    bg: "#0A0A0A"
    surface: "#0A0A0A"
    surfaceRaised: "#1E1E1E"
    text: "#555555"
    textMuted: "#3B3B3B"
    border: "#131313"
    accent: "#CCCCCC"
    accentFg: "#0B0B0C"
    focusRing: "#CCCCCC"
    elevation: "border+surface"
  contrastFailures:
    - "dark: text on bg = 2.66:1 (needs 4.5:1)"
    - "dark: muted on bg = 1.77:1 (needs 4.5:1)"
    - "dark: text on surface = 2.66:1 (needs 4.5:1)"
components:
  button-primary:
    typography: "{typography.code-xs}"
    textColor: "{colors.canvas}"
    border: "1px solid {colors.primary}"
    height: 30px
    padding: "6px 12px 6px 12px"
    backgroundColor: "{colors.primary}"
  button-filled:
    typography: "{typography.code-xs-tight}"
    textColor: "{colors.primary}"
    height: 24px
    padding: "6px 8px 6px 8px"
    backgroundColor: "rgb(15, 15, 15)"
  button-outline:
    textColor: "{colors.primary}"
    border: "1px solid {colors.primary}"
    height: 50px
    padding: "8px 8px 8px 8px"
    fontSize: 16px
    fontFamily: "IBM Plex Mono"
    fontWeight: 400
    lineHeight: 1.5
  button-outline-2:
    textColor: "{colors.neutral-2}"
    border: "1px solid {colors.on-primary}"
    height: 50px
    padding: "8px 8px 8px 8px"
    fontSize: 16px
    fontFamily: "IBM Plex Mono"
    fontWeight: 400
    lineHeight: 1.5
  button-text:
    typography: "{typography.code-xs-tight}"
    textColor: "{colors.ink}"
    height: 24px
    padding: "6px 8px 6px 8px"
states:
  input-focus:
    target: input
    state: focus
    outline: "transparent solid 2px"
    borderColor: "rgb(37, 99, 235)"
    outlineColor: transparent
    outlineWidth: 2px
  input-hover:
    target: input
    state: hover
    borderColor: transparent
    backgroundColor: currentcolor
  other-focus:
    target: other
    state: focus
    outline: "transparent solid 2px"
    outlineColor: transparent
    outlineWidth: 2px
  other-disabled:
    target: other
    state: disabled
    opacity: 0.3
breakpoints:
  - width: 375
    containerWidth: 375
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 768
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1024
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1280
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1440
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 16
  gradientsFound: 0
  rolesUnassigned: 3
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Grainrad

1. Visual Theme & Atmosphere

Grainrad embodies a brutalist, retro-computational aesthetic rooted in ASCII art and early digital culture. The design prioritizes raw functionality and monospace typography over ornamentation, creating an interface that feels like a command-line tool rendered for the web. Deep blacks dominate the canvas, punctuated by muted grays and a singular accent of light gray ({colors.primary} — #CCCCCC), which reads as both industrial and nostalgic. The interface rejects rounded corners entirely, favoring sharp, rectilinear geometry. Every element is deliberately spare, suggesting the constraints and character-based limitations of vintage terminals and ASCII editors. This is a design system for creators and technologists who value precision, history, and the beauty of constraints.

Key Characteristics

Monospace-first typography (IBM Plex Mono throughout)
Pure blacks and grays with minimal accent colour
Sharp, 90-degree corners on all interactive elements
Utilitarian, no unnecessary decoration
High contrast and legibility prioritized
Command-line / terminal visual language
Minimal shadows and depth layering
Explicit, direct labeling and interaction affordances

2. Color Palette & Roles

Primary

Primary Accent ({colors.primary} — #CCCCCC): Brand colour used for primary CTAs, active states, and brand elements; renders as a light gray that stands out against the dark canvas.

Surface & Canvas

Canvas ({colors.canvas} — #0A0A0A): Default page background; near-black providing maximum contrast for legible text and UI.
On Primary ({colors.on-primary} — #222222): Label and text colour applied over primary accent surfaces; ensures readability on light accents.

Text & Ink

Ink ({colors.ink} — #555555): Headings and primary body text; mid-tone gray that sits between the canvas and lighter neutrals.

Decorative / Unassigned

Neutral 1 ({colors.neutral-1} — #E5E7EB): Unassigned decorative neutral; used sparingly for secondary UI elements or borders.
Neutral 2 ({colors.neutral-2} — #888888): Unassigned decorative neutral; appears in secondary text and disabled states.
Neutral 3 ({colors.neutral-3} — #FFFFFF): Unassigned decorative neutral; pure white reserved for highest contrast accents or special states.

3. Typography Rules

Font Family

Primary: IBM Plex Mono (weights: 300, 400, 500)
Fallback: Monospace, monospace

All typography in the system uses IBM Plex Mono exclusively. No secondary font is employed; the design is entirely monospace-based.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Code XS	IBM Plex Mono	12px	400	1.33	0px	General body text; standard code-weight small.
Code XS Tight	IBM Plex Mono	12px	400	1.0	0px	Compact button text; reduced line-height for density.
Code XS Uppercase	IBM Plex Mono	12px	400	1.33	0px	Input labels; text-transform uppercase applied.
Code XS Strong	IBM Plex Mono	12px	500	1.33	0px	Emphasized code; medium weight for hierarchy.
Code SM	IBM Plex Mono	14px	400	1.43	0px	Body-level text; larger than XS for readability.
Code SM Strong	IBM Plex Mono	14px	500	1.43	0px	Emphasized body or labels; medium weight.

Principles

Monospace-only: Every role uses IBM Plex Mono; no serif or sans-serif fallback fonts are introduced.
Weight modulation: Weight shifts from 400 (regular) to 500 (medium) for emphasis, never to bold or heavier.
Compact leading: Line-height values range from 1.0 (tight) to 1.43, reflecting terminal-like spacing; no generous leading.
Zero tracking: Letter-spacing is consistently 0px across all roles; no negative or positive tracking is applied.
Size restraint: Only two sizes appear in the hierarchy (12px and 14px); no display or heading tier is declared.
Text transforms: Uppercase is applied selectively to input labels and certain UI states; capitalize is used sparingly on code blocks.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#CCCCCC)
Text Color: {colors.on-primary} (#222222)
Border: 1px solid {colors.primary} (1px solid #CCCCCC)
Padding: 6px 12px
Height: 30px
Font: {typography.code-xs} (12px, weight 400, line-height 1.33)
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 319px

Filled Button (Secondary)

Background: #0F0F0F (deep black)
Text Color: {colors.primary} (#CCCCCC)
Border: 0px
Padding: 6px 8px
Height: 24px
Font: {typography.code-xs-tight} (12px, weight 400, line-height 1.0)
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 255px

Outline Button

Background: transparent (rgba(0, 0, 0, 0))
Text Color: {colors.primary} (#CCCCCC)
Border: 1px solid {colors.primary} (1px solid #CCCCCC)
Padding: 8px
Height: 50px
Font: {typography.code-sm} (14px, weight 400, line-height 1.43)
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 157.5px

Outline Button (Dimmed)

Background: transparent
Text Color: {colors.neutral-2} (#888888)
Border: 1px solid {colors.on-primary} (1px solid #222222)
Padding: 8px
Height: 50px
Font: {typography.code-sm} (14px, weight 400, line-height 1.43)
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 157.5px

Text Button

Background: transparent
Text Color: {colors.ink} (#555555)
Border: 0px
Padding: 6px 8px
Height: 24px
Font: {typography.code-xs-tight} (12px, weight 400, line-height 1.0)
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 255px

Inputs & Forms

Text Input

Background: {colors.canvas} (#0A0A0A)
Text Color: {colors.primary} (#CCCCCC)
Border: 1px solid {colors.primary} (1px solid #CCCCCC)
Padding: Varies by context
Font: {typography.code-xs-uppercase} (12px, weight 400, line-height 1.33, text-transform uppercase)
Border Radius: {rounded.none} (0px)
Focus State: Border color shifts to #2563EB (blue focus ring); outline transparent 2px; box-shadow applied
Hover State: Border becomes transparent; background-color set to currentcolor

Navigation

Primary Navigation

Rendered as a simple sidebar and top bar
Links rendered in {colors.ink} (#555555) by default
Hover: Color shifts to {colors.primary} (#CCCCCC); border-color may update based on context
No dropdown arrow decoration; sub-navigation is collapsed until selected
Z-index for dropdowns: 20

Cards & Containers

Card / Panel

Background: {colors.canvas} (#0A0A0A) or #0F0F0F (for secondary cards)
Border: 1px solid {colors.primary} or 1px solid {colors.on-primary} depending on emphasis
Padding: {spacing.md} (16px)
Border Radius: {rounded.none} (0px)
No shadow; depth via color blocking only

Badges & Status

No explicit badge component defined; status is conveyed via text colour and borders only.

5. Layout Principles

Spacing System

Base unit: {spacing.xxs} = 4px

Scale (relative to base):

{spacing.xxs} = 4px (micro-spacing between tight elements)
{spacing.xs} = 8px (tight padding on inputs, buttons)
{spacing.sm} = 12px (small margin between adjacent sections)
{spacing.md} = 16px (standard padding on cards and containers; section margins)
{spacing.lg} = 32px (large separation between major content blocks)

Usage Context:

Buttons and inputs typically use {spacing.xs} to {spacing.sm} padding.
Cards and panels use {spacing.md} for internal padding.
Vertical separation between sections uses {spacing.lg}.
Horizontal gutters and side padding default to {spacing.md}.

Grid & Container

Content Width: Full-width layouts at all breakpoints (no max-width constraint detected).
Column Strategy: Single-column layout throughout; no multi-column grid system in use.
Section Padding: Horizontal padding set to 16px across all breakpoints ({spacing.md}).
Vertical Rhythm: Sections stacked vertically with {spacing.lg} (32px) separation.

Whitespace Philosophy

Whitespace is minimal and intentional. The design favors compact layouts that reflect terminal and command-line aesthetics. Breathing room is sparse; elements are placed close together to suggest efficiency and density. The deep black canvas ({colors.canvas}) serves as a visual rest point, allowing the light accent colour ({colors.primary}) to pop. Negative space is not used to create elegance; instead, it is a byproduct of the system's brutalist constraints.

Border Radius Scale

{rounded.none} = 0px (applied to all interactive components: buttons, inputs, cards)

The system has zero border radius; every corner is a sharp 90-degree angle. This reinforces the retro-computational, ASCII-art aesthetic and ensures crisp, rectilinear geometry throughout.

Border Widths

Thin: 1px (applied to input borders, card borders, button outlines, and UI divisions)

The system employs a single border width: 1px. This is sufficient to define boundaries without adding visual weight.

6. Depth & Elevation

Grainrad uses color-blocking to create depth rather than layered shadows. Surfaces are distinguished by background colour alone, not by shadow offset or blur.

Level	Treatment	Use
Flat	No shadow; canvas background	Default surfaces, body text, inactive states
Blocked	Background shifted to `#0F0F0F` (one shade darker/lighter)	Secondary panels, disabled states, recessed sections
Accent	Background shifts to `{colors.primary}` (`#CCCCCC`)	Active button states, highlighted elements, CTAs

Elevation Philosophy: No multi-level shadow system exists. Depth comes entirely from shifting background colour from the canvas (#0A0A0A) to secondary blacks (#0F0F0F) or to the accent grey (#CCCCCC). This approach aligns with ASCII art and early digital UI aesthetics, where colour and contrast drive visual hierarchy, not shadows. Box-shadow is set to none on all measured components.

Opacity Levels

30% (0.30): Used for subtle disabled states or secondary visual feedback
50% (0.50): Used for moderately diminished interactive elements or overlays

These opacity values appear in disabled button states and hover effects, allowing elements to fade without shifting hue.

Z-index / Layering

Dropdown: z-index: 20 (ensures dropdown menus and overlays sit above base content)
Base (default): z-index: auto or unset (cards, buttons, sections)

A minimal z-index ladder is in use. Dropdowns are explicitly layered above all base content via z-index: 20. No modal, toast, or sticky layers are defined in the extraction.

7. Do's and Don'ts

Do

Use monospace typography exclusively. Every heading, label, and body text should render in IBM Plex Mono or an equivalent monospace font. Do not introduce serif or sans-serif typefaces.
Apply sharp corners throughout. Use border-radius: 0px on all buttons, inputs, cards, and containers. Maintain the rectilinear aesthetic.
Prioritize contrast. Use {colors.primary} (#CCCCCC) sparingly and deliberately as the accent colour. Ensure all text on coloured backgrounds meets accessibility standards.
Leverage color-blocking for depth. Shift background colours (from #0A0A0A to #0F0F0F or to #CCCCCC) to create visual hierarchy; avoid shadows.
Keep padding and margins tight. Use {spacing.xs} (8px) to {spacing.md} (16px) for most UI elements; only expand to {spacing.lg} (32px) for major section breaks.
Use weight modulation for hierarchy. Move from weight 400 to weight 500 (medium) to emphasize text; reserve weight 300 for very rare sub-body use.
Render input labels in uppercase. Apply text-transform: uppercase to form labels and related text to reinforce the technical aesthetic.
Provide clear focus and hover states. Outline borders, shift text colours, or toggle background colours on interaction; make state changes explicit and immediate.

Don't

Introduce rounded corners. All interactive elements must remain sharp (0px radius). Do not apply border-radius: 8px, border-radius: 12px, or any other radius value to buttons, inputs, or containers.
Use shadows for depth. Do not apply box-shadow to create lift or dimension. Rely on colour shifts instead.
Mix typefaces. Do not introduce sans-serif, serif, or decorative fonts. The system is monospace-only.
Over-use the primary accent. {colors.primary} (#CCCCCC) should highlight only critical CTAs, active states, and brand moments. Do not apply it to body text or secondary UI.
Create generous whitespace. Do not spread elements far apart or add large margins for breathing room. Keep the layout dense and terminal-like.
Apply text transforms inconsistently. Uppercase should be reserved for input labels and specific UI states; do not apply it to body paragraphs or headings.
Use decorative icons or illustrations. Keep the interface minimal and text-driven. Avoid graphic ornaments that conflict with the ASCII aesthetic.
Implement multi-level shadows or blur effects. Do not use multiple box-shadow layers, backdrop-filter, or Gaussian blur to soften edges.
Ignore focus states. Do not hide keyboard navigation or focus indicators. Ensure every interactive element has an explicit focus ring or border state.
Invent new colours outside the palette. Stick to the 7 defined colours. Do not introduce new brand colours, gradients, or mid-tone interpolations.

8. Responsive Behavior

Breakpoints

Viewport	Width	Key Changes
Mobile	375px	Single-column layout; full-width content; padding `{spacing.md}` (16px)
Tablet	768px	Single-column layout; full-width content; padding `{spacing.md}` (16px)
Desktop	1024px	Single-column layout; full-width content; padding `{spacing.md}` (16px)
Large Desktop	1280px	Single-column layout; full-width content; padding `{spacing.md}` (16px)
Extra Large	1440px	Single-column layout; full-width content; padding `{spacing.md}` (16px)

Observation: All measured breakpoints render a single-column, full-width layout with consistent 16px (md) side padding. No responsive column shift, hamburger menu, or major layout reorganization is detected across the measured range.

Touch Targets

Minimum height for buttons: 24px to 50px (as measured from filled and outline variants)
Minimum height for inputs: 30px to 50px
Minimum clickable area: 24px × 24px (inferred from smallest button height; pad tappable zones accordingly on touch devices)

Interactive elements should maintain at least 24px of height to ensure comfortable touch interaction on mobile devices.

Collapsing Strategy

The site does not exhibit a responsive collapse pattern (no hamburger menu, no sidebar drawer). All breakpoints maintain the same single-column structure with full-width content. Section padding remains 16px throughout. If navigation needs to collapse on smaller screens, implement a drawer or menu toggle at or below 375px (the smallest measured viewport), but note that the extraction does not evidence this pattern in use.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA & Accent: Primary Accent ({colors.primary} — #CCCCCC)
Page Background: Canvas ({colors.canvas} — #0A0A0A)
Heading & Primary Text: Ink ({colors.ink} — #555555)
Text on Accent Surfaces: On Primary ({colors.on-primary} — #222222)
Secondary / Disabled Text: Neutral 2 ({colors.neutral-2} — #888888)
High-Contrast Accents: Neutral 3 ({colors.neutral-3} — #FFFFFF)

Iteration Guide

Use IBM Plex Mono exclusively. Every text element should render in this monospace font. No fallback to sans-serif.
Apply zero border-radius to all interactive components. Buttons, inputs, cards, and containers must have sharp corners.
Color-block for depth. Shift background colours between #0A0A0A, #0F0F0F, and #CCCCCC to create hierarchy. Do not use box-shadow.
Use consistent spacing units. Padding and margins should use 4px, 8px, 12px, 16px, or 32px; do not introduce arbitrary spacing values.
Weight modulation only. Text emphasis shifts from weight 400 to 500; never introduce bold or weights beyond 500.
Make interaction states explicit. On :hover, :focus, and :active, shift border colour, text colour, or background colour noticeably; do not use subtle transitions.
Prioritize contrast and legibility. Ensure all text meets WCAG AA standards (4.5:1 for body, 3:1 for large text).
Apply uppercase selectively. Use text-transform: uppercase on input labels and specific UI labels; avoid on body text.
Keep layouts single-column. Do not introduce multi-column grids; maintain vertical stacking and full-width content across all breakpoints.
Declare focus indicators explicitly. Every button, input, and link must have a visible focus ring or border state; do not hide keyboard navigation.

10. Known Gaps

Semantic colour ramp: The site does not declare error, success, warning, or info states in its measured styles. No semantic colour roles (error red, success green, etc.) exist in the system; refer to "Known Gaps" if a new error state is needed.
Dark/Light mode: Only one colour theme was measured. The extraction does not indicate a light-mode variant or theme-switching capability. If a light mode is required, it is not documented here.
Gradients and decorative effects: No gradients, meshes, or decorative background images were observed in the extraction. The system uses solid colours only.
Unassigned colour roles: Three colours ({colors.neutral-1}, {colors.neutral-2}, {colors.neutral-3}) have no measured semantic role. They are decorative and appear in secondary UI; avoid assigning new semantic meaning to them without design review.
Interaction states beyond extracted set: The extraction captured :hover, :focus, :active, and :disabled states from the site's stylesheets. States such as :visited, :group-hover, or custom drag states are not documented; infer these from the existing patterns.
Display and heading typography: The hierarchy contains only two size tiers (12px and 14px), both in code weight. No display, h1, h2, or h3 roles are defined. All headings render at body scale; refer to "Known Gaps" if a larger heading tier is required.
Elevation beyond color-blocking: The extraction found no multi-level shadow system, no blur effects, and no layered depth. If a new floating or modal component requires a shadow system, it is not present in the measured design.
Z-index beyond dropdown: Only z-index: 20 for dropdowns is documented. Modal, toast, sticky, and other layered components may require a z-index ladder; refer to "Known Gaps" if a comprehensive stacking context is needed.
Border radius variants: All measured components (button, input, card) use 0px radius. No pill-shaped (9999px) or intermediate radius (4px, 8px) variants are in use; if needed, these are design additions outside the measured system.
Single-page extraction: Only one page (grainrad.com) was analysed. Surfaces behind authentication, account pages, or secondary flows were not visited. If those surfaces have distinct styling, they are not documented here.
Responsive breakpoints below 375px: The smallest measured viewport is 375px. Behaviour on wearables, tiny phones, or desktop zoom levels below this are not documented.

Want a DESIGN.md like this for your own website?

Remixes of grainrad.com

Latest remixes

No public remixes yet. Be the first to make one.

Remix it