Radish Bloom
#eb516dSingle chromatic accent — barcode panel surface, red-punctuation moments; warm coral against the black field functions like a magazine pull-quote, used sparingly as the only saturated color in the UI
Redis Agency
redis.agency
Website preview
The design language
Redis Agency is a darkroom editorial system: a pitch-black canvas where massive Times New Roman display type and a single warm coral accent do all the talking. The visual language borrows from fashion magazine spreads and surrealist art direction — surreal food photography, organic green botanical forms, oversized serif headlines that feel cropped and overlapping rather than neatly typeset. Body and UI copy sit in a clean humanist sans (Suisse Intl) at modest sizes, which makes the display serif feel even more theatrical. The page stays nearly monochrome — black canvas, white type, a mid-gray for secondary text and hairline borders, and a coral red (#eb516d) that acts like a single brushstroke across an otherwise austere composition. Components are minimal: pill-shaped buttons, hairline borders, generous whitespace. Everything feels curated rather than generated — this is brand craft, not a SaaS dashboard.
Color palette
brand
neutral
Bone White
#ffffffPrimary text, pill button outlines, card outlines on dark canvas — high-contrast foreground against the black field
Smoke
#808080Secondary text, hairline borders, muted UI strokes — the mid-gray that softens without disappearing
Obsidian
#000000Page canvas and true-black surface — the dominant ground that makes everything else float
Graphite
#333333Deep divider borders, near-invisible structural lines between dark surfaces
Typography
Type scale
Minor Third (1.2) · 15px basedisplay
90px · 400 · 0.82 · -0.9px trackingThe quick brown fox jumps
text-38
38px · 400 · 1.16The quick brown fox jumps
heading
36px · 400 · 1.16 · -0.29px trackingThe quick brown fox jumps
text-32
32px · 400 · 1.05The quick brown fox jumps
heading-sm
24px · 400 · 1.2 · -0.19px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.2 · -0.14px trackingThe quick brown fox jumps
body
16px · 400 · 1.4 · -0.13px trackingThe quick brown fox jumps
caption
14px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Times New Roman
- Weights
- 400
- Sizes
- 32px, 90px
- Line height
- 0.82, 1.05
- Letter spacing
- -0.0100em
- Fallback
- PP Editorial New, EB Garamond, or Playfair Display
Display and heading serif — set at 90px for the hero wordmark and 32px for secondary headlines; uses the system Times rather than a contemporary serif, which is the anti-trend move that gives the brand its archival-editorial feel. The tight 0.82 line-height at 90px lets letters touch and overlap, creating a cropped magazine-spread effect.
Additional typeface
Suisse Intl WebM
- Weights
- 400
- Sizes
- 14px, 16px, 18px, 24px, 36px, 38px
- Line height
- 1.16, 1.20, 1.40
- Letter spacing
- -0.0080em
- Fallback
- Inter, Söhne, or Untitled Sans
Primary UI and body sans — handles body text (14–18px), card content (18–24px), and larger non-serif headings (36–38px). The slightly negative tracking and humanist proportions keep body text dense and confident without competing with the display serif.
Additional typeface
Editorial New
- Weights
- 100
- Sizes
- 14px
- Line height
- 1.20
- Fallback
- PP Editorial New Thin, Inter Thin, or GT America Thin
Thin label and caption face at 100 weight — used for tiny annotations, breadcrumbs, or credits where extra-light strokes add editorial polish to a small detail
Spacing & shape
Spacing
- Density
- spacious
- Max width
- 1200px
- Section gap
- 70px
- Card padding
- 25px
- Element gap
- 22px
Border radius
cards
0pxlinks
24pxpills
44pxbuttons
40pxSpacing scale
4px7px9px10px13px15px16px20px22px25px35px40px42px50px60px70px80px100px120px146px150px162px180px216px268px288pxGuidelines
Do
- Set the hero wordmark in Times New Roman 90px, line-height 0.82, letter-spacing -0.9px — the tight crop and overlapping letters are the signature
- Use #eb516d Radish Bloom for exactly one surface per screen — a barcode panel, a single badge, or a pull-quote block
- Outline buttons with 1px #ffffff border on 40px radius — never fill them, the ghost surface preserves the editorial openness
- Separate sections with 1px #808080 hairline dividers, not cards or boxes — the dark canvas does the structural work
- Set body copy at 16–18px Suisse Intl WebM, line-height 1.4, letter-spacing -0.0080em
- Allow imagery to overlap display type at the hero — the broken grid is intentional, not a layout bug
- Reserve Times New Roman for sizes ≥ 32px; below that it stops feeling editorial and starts feeling like a fallback
Don’t
- Do not fill buttons with #eb516d or any saturated color — buttons stay outlined in #ffffff, red is reserved for surfaces
- Do not use box-shadows or any drop-shadow elevation — the system relies on color contrast and hairline borders, not depth
- Do not introduce a second chromatic color into the UI palette — greens, blues, or any hue beyond #eb516d breaks the discipline
- Do not set Times New Roman below 32px — it loses its editorial authority and reads as a system default
- Do not use card containers with rounded corners and backgrounds for content blocks — content floats on the black canvas, separated by whitespace and hairlines
- Do not center body paragraphs — left-align editorial copy with a 600px measure for readability
- Do not use light-mode styling (white canvas, dark text) — the darkroom canvas is the system's defining surface
Components
Display Serif Headline
Hero typographic anchor — the wordmark and section openersTimes New Roman at 90px, weight 400, line-height 0.82, letter-spacing -0.0100em (≈ -0.9px). White (#ffffff) on #000000 canvas. Deliberately oversized and tight-tracked so letters touch and overlap, creating a cropped, magazine-spread feeling. Set centered or left-aligned; never constrained by a tight measure.
Pill Outline Button
Primary call-to-action1px solid #ffffff border, 40px border-radius (fully pill-shaped), #ffffff text on #000000 background. Padding approximately 10px 25px. Suisse Intl WebM 14–16px, weight 400, letter-spacing -0.0080em. No fill — outline only, keeping the surface feeling open and editorial rather than buttony.
Rounded Asymmetric Link
Inline text link within body copy24px border-radius on the link container (asymmetric, gives a soft-blob shape rather than a true pill), #ffffff text with #ffffff underline or hairline. 20px horizontal padding. Used sparingly inside editorial copy blocks.
Editorial Body Block
Long-form paragraph text and descriptionsSuisse Intl WebM 16–18px, weight 400, line-height 1.4, letter-spacing -0.0080em. White (#ffffff) on black. 22px row-gap between paragraphs, 35–40px margin-bottom between distinct blocks. Tight measure (~60ch) for readability.
Radish Accent Panel
Sole chromatic surface — barcode and signature red momentsSolid #eb516d fill with #ffffff content. Functions as a magazine pull-quote or chapter marker. Sits on the black canvas as the only saturated color in the system; the eye locks onto it immediately.
Barcode Element
Decorative catalog/archival markBlack-and-white #ffffff barcode on #eb516d accent panel or directly on #000000 canvas. Functions as a branding device — references product packaging and editorial mastheads. Centered with ~20–25px vertical padding around it.
Hairline Divider
Section separator1px solid #808080 line at full or content width. No padding, no margin — the line does the work. Used between editorial sections rather than boxes or cards.
Section Heading (Serif Secondary)
Sub-section titles in editorial bodyTimes New Roman 32px, weight 400, line-height 1.05, letter-spacing -0.0100em. White. Centred or left-aligned. Sits above body text to introduce a new editorial beat.
Sans Subheading
UI labels and non-display headersSuisse Intl WebM 36–38px, weight 400, line-height 1.16. White. Used for card titles, feature names, or any heading that should feel modern rather than editorial.
Thin Label Caption
Tiny annotations, breadcrumb trails, or creditsEditorial New 14px, weight 100, line-height 1.2, normal letter-spacing. White. The extra-light weight gives small details a quiet, typeset quality.
Surreal Product Hero
Primary visual centerpieceFull-bleed editorial photograph: a single red radish surrounded by organic green plant or liquid forms floating in the black canvas. No border, no container, no rounded corners — the imagery occupies the field directly, breaking across the display type. Treated as artwork, not product UI.
Ghost Navigation Link
Top-level nav and footer linksSuisse Intl WebM 14–16px, weight 400, #ffffff text, no background, no border. 20–25px horizontal spacing between items. No underline by default; subtle hover state only.
Surfaces & elevation
Level 0
Obsidian Canvas
#000000Full-bleed page background — the darkroom field
Level 1
Radish Panel
#eb516dAccent surface for barcode and signature moments — the only chromatic surface in the system
No shadows. The dark canvas and high-contrast white type do the work of separation. Hairline #808080 borders are the only structural lines; cards and surfaces are defined by negative space, not elevation.
Layout & imagery
Layout
Full-bleed dark canvas with no visible page padding at the hero — the radish, green forms, and oversized 'Redis Agency' serif type all share the same black field and overlap. Content begins centered or left-aligned with generous whitespace (70px section gaps). Max-width ~1200px for body content; hero extends full-bleed. The page flows as an editorial scroll: hero typographic moment → surreal visual → centered text block on black → accent barcode panel → secondary hero → more editorial copy. No card grids, no pricing tables, no feature matrices — this is a portfolio/spread layout, not a SaaS page. Navigation is a minimal top bar with ghost text links; no sticky behavior, no mega-menu.
Imagery
Surreal editorial product photography — a single red radish suspended in the void, surrounded by organic green botanical or liquid forms that feel 3D-rendered and hand-shaped. The aesthetic is fashion-meets-archival: high-contrast, dark-background, tight crop, no lifestyle context. Imagery overlaps display type rather than sitting beside it, breaking the grid. The green plant matter is saturated and hyperreal; the radish is a single saturated red moment. Overall: image-heavy at the hero, then becomes text-dominant as the user scrolls. Imagery is decorative atmosphere, not explanatory content.
Design notes
Agent Guide
## Quick Color Reference - background: #000000 (Obsidian) - text: #ffffff (Bone White) - secondary text: #808080 (Smoke) - border: #808080 (Smoke hairline) - accent surface: #eb516d (Radish Bloom) - primary action: #ffffff (filled action) ## 3-5 Example Component Prompts 1. **Display Hero Headline**: 'Redis Agency' in Times New Roman, 90px, weight 400, line-height 0.82, letter-spacing -0.9px, color #ffffff on #000000 canvas. Centered. Letters should touch and overlap — tight tracking is intentional, do not increase. 2. **Outlined Pill Button**: 1px solid #ffffff border, 40px border-radius, padding 10px 25px, text 'Подробнее' in Suisse Intl WebM 16px weight 400 letter-spacing -0.13px color #ffffff on #000000 background. No fill, no shadow. 3. **Radish Accent Panel**: Solid #eb516d background, 0px radius, full content-width, containing a centered #ffffff barcode element and 24px Suisse Intl WebM white caption beneath. Padding 40px vertical. 4. **Editorial Body Block**: Three paragraphs of body copy in Suisse Intl WebM 18px weight 400 line-height 1.4 letter-spacing -0.14px, color #ffffff on #000000. 22px gap between paragraphs, 70px margin above the block. Measure constrained to ~600px wide and left-aligned. 5. **Thin Label Caption**: Small label 'Agency / 2024' in Editorial New 14px weight 100 line-height 1.2 color #ffffff, sitting above a larger heading with 15px vertical spacing.
Editorial Typography Rules
The display serif and the body sans are not interchangeable — they serve different registers. Times New Roman is reserved for moments that should feel archival, monumental, or cropped-from-a-magazine (hero wordmark, section openers, pull-quotes). Suisse Intl WebM handles everything that should feel like working design (body copy, UI labels, card titles, navigation). Never set Times New Roman below 32px — it loses its editorial authority and just looks like a system font fallback. Never set Suisse Intl WebM above 38px for body content — at that size the humanist sans starts competing with the display serif for attention.
Color Discipline
The system has exactly one chromatic color: #eb516d Radish Bloom. It must remain rare — one panel, one moment, one barcode per page. Using it twice dilutes it; using it three times makes it a theme rather than an accent. Greens from the organic photography are NOT part of the UI palette — they are decorative imagery and should never appear as button fills, link colors, or icon strokes. The neutral stack (#ffffff, #808080, #333333, #000000) carries 95% of the interface.
Similar brands
Buck (buck.co)
Same dark-canvas + single accent editorial approach with massive serif display type and surreal 3D imagery
Locomotive (locomotive.ca)
Editorial layout with overlapping display type, full-bleed photography, and near-monochrome palette punctuated by one brand color
Resn (resn.co.nz)
Surreal digital art direction with dark canvas, oversized type, and imagery that breaks the grid
Pentagram (pentagram.com)
Agency portfolio that treats each project as an editorial spread rather than a SaaS landing page
Gunner (gunner.co)
Minimalist dark agency site with hairline borders, ghost outlined buttons, and let the work speak
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
