Skip to content
DesignMunkDesignMunk Submit a site

Anabolic Insights

anabolicinsights.ai
Measure everything. Assume nothing.
Health Software Next.js Tailwind Homepage Raleway
Share Visit site
anabolicinsights.ai DESKTOP · 1440
Anabolic Insights

AI Breakdown

Design export

---
version: alpha
name: Anabolic Insights
description: Measure everything. Assume nothing.
colors:
  primary: "#fef9ef"
  secondary: "#2c2424"
  tertiary: "#c05b58"
  neutral: "#121212"
  brand-new-sled: "#943c3c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Georgia
    fontSize: 85.1px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Crimson Text
    fontSize: 75.6px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
  headline-sm:
    fontFamily: Crimson Text
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.25
  headline-xs:
    fontFamily: Raleway
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: Raleway
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75
rounded:
  sm: 28px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 28px
  lg: 48px
  xl: 160px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 10px 20px
    height: 53px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 10px 20px
    height: 53px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#fbf5ec"
    textColor: "#292727"
    rounded: "{rounded.sm}"
    padding: 24px
---

# Anabolic Insights: Parchment Type on a Coal-Black Dashboard

## Overview

A dark, clinical UI with warm parchment text on a coal surface. Audience is health-conscious consumers and performance-minded athletes who value data, physician oversight, and clarity. The tone is authoritative but not sterile—serif display for trust, sans-serif body for utility. Spacing is generous at section level and compact in components to balance storytelling and dense information.

## Colors

- **primary (#fef9ef):** Warm parchment used for primary text and key highlights on dark surfaces.
- **secondary (#2c2424):** Deep umber used for sub-surfaces, dividers, and subdued fills against the coal background.
- **tertiary (#c05b58):** Sanguine accent reserved for primary CTAs and active states.
- **neutral (#121212):** Coal base for the global dark mode.
- **brand-new-sled (#943c3c):** Darker accent tint for hovers or emphasis adjacent to the primary accent.
- **surface ({colors.neutral} → #121212):** Default page surface.
- **on-surface ({colors.primary} → #fef9ef):** Default text and icon color on surface.

## Typography

- Headline-lg — Georgia, 85.1px, weight 400, line-height 1, letter-spacing -0.03em. Georgia is a system serif; do not attempt to load it from a service. If unavailable, use Libre Baskerville, EB Garamond, or Cormorant Garamond as substitutes.
- Headline-md — Crimson Text (Google), 75.6px, weight 400, line-height 1, letter-spacing -0.03em. Freely loadable; use for major section headlines.
- Headline-sm — Crimson Text (Google), 30px, weight 400, line-height 1.25. For card titles and sub-sections where a softer serif is preferred.
- Headline-xs — Raleway (Google), 18px, weight 400, line-height 1.22. Utility headings and tiny labels.
- Body-md — Raleway (Google), 16px, weight 400, line-height 1.75. All body copy, lists, and UI descriptions. Keep contrast high with #fef9ef on #121212 or #292727 on #fbf5ec as in the card token.

## Layout

An 8-based spacing scale: 8, 16, 28, 48, 160. Use xs/sm for intra-component gaps, md for card gutters, lg for section internals, and xl for major section breaks and hero padding. Cards ship with fixed 24px internal padding; respect that even when outer spacing changes. Two-column hero (copy left, data card right) collapses to single column with vertical lg gaps on narrow screens.

## Elevation & Depth

Depth is minimal. Use the measured md shadow (rgba(0,0,0,0.55) 0 32px 64px -24px) for prominent floating elements like the dashboard preview; sm shadow is for subtle lifts. Large shadows are otherwise absent; hierarchy is carried by tonal steps between #121212, #2c2424, and the pale card background #fbf5ec, plus whitespace.

## Shapes

A simple two-token language: 28px rounded corners for surfaces and cards (friendly yet professional), and 9999px for fully pill-shaped controls. Keep icon containers and badges consistent with these two radii.

## Components

Buttons and cards are canonical, followed by page-specific pieces.

- Button — Primary: background #c05b58, text #fef9ef, 53px height, 10px×20px padding, full (9999px) radius. Use for single, dominant actions.
- Button — Secondary: text #fef9ef, transparent background, 53px height, full radius. Use as ghost/secondary action adjacent to primary.
- Button — Link: text #fef9ef, no radius; inline textual actions.
- Card: background #fbf5ec, text #292727, 28px radius, 24px internal padding.

### Navigation Bar
Compact dark bar on #121212 with Raleway 16/1.75 links and utility icons. Primary text color #fef9ef; space items using sm (16px) and keep top/bottom padding near sm–md.

### Hero with Trends Card
Left: Georgia headline-lg (85.1px, LH 1, -0.03em) and supporting Raleway body. Right: a preview card using the md shadow and 28px radius; text in #fef9ef over #121212 with the accent reserved for data dots/CTAs.

### Compliance Icon Row
A thin divider followed by four compact items ("Licensed physician oversight", etc.). Use xs–sm gaps between icon and label, md between items; text #fef9ef at 16px.

### Lab Panel Card
Uses the Card token (#fbf5ec / #292727, 28px radius, 24px padding). Title in Crimson Text 30px; list in Raleway 16/1.75; price callout sits at the end of the content block; CTA is a ghost or primary button depending on emphasis.

### Medication Promo Tile
Inline pill-style CTA using button-primary for the drug name and pricing. When marked "Popular", pair with a small badge using full radius and the brand accent family (#c05b58 / #fef9ef).

### Marker Status Legend
Three or more compact chips indicating ranges. Use Raleway 18px (headline-xs) for labels; chips adopt full radius with subtle tonal fills from the secondary palette against #121212.

### Four-Step Timeline
Numbered steps stacked with lg gaps, each titled in Crimson Text 30px and body in Raleway 16/1.75. Use a thin divider or secondary tone (#2c2424) to separate the block from adjacent sections.

### Testimonials Stack
Quote blocks set in Raleway body with the author's initials as small badges. Keep section padding at lg–xl and limit accent usage to links or arrows.

## Do's and Don'ts

- Do use #fef9ef for all primary text on #121212; reserve #fbf5ec surfaces for cards and feature callouts.
- Do keep primary buttons at 53px height with full radius and #c05b58 backgrounds; only one per context.
- Do set display headlines with line-height 1 and -0.03em tracking to match the hero.
- Don't mix Georgia and Crimson Text within the same headline line; pick one level per element.
- Don't introduce new shadow sizes; use sm for subtle lifts and md for hero preview only.
- Don't flood large areas with the accent #c05b58; it is for CTAs and active states, not backgrounds.

## Agent Prompt Guide

Quick reference — Text: #fef9ef, Background: #121212, Border/Sub-surface: #2c2424, Accent: #c05b58.

1) Build the hero header and CTA
- Background: #121212. Max-width container with padding-left/right 48px and padding-top/bottom 160px.
- H1: Georgia, 85.1px, weight 400, line-height 1, letter-spacing -0.03em, color #fef9ef.
- Subline: Crimson Text, 75.6px, weight 400, line-height 1, letter-spacing -0.03em, color #fef9ef.
- Body: Raleway 16px/1.75, color #fef9ef, max-width 60ch.
- Primary button: height 53px; padding 10px 20px; background #c05b58; text #fef9ef; border-radius 9999px; gap between buttons 16px.

2) Create a lab-panel card grid
- Section background: #121212; grid gap 28px.
- Card: 28px radius; padding 24px; background #fbf5ec; text #292727.
- Title: Crimson Text 30px/1.25 #292727.
- Body: Raleway 16px/1.75 #292727; bullet list with 8px item gaps.
- Price line at end; "View details" as link styled in Raleway 16px #2c2424.

3) Compose the compliance icon row
- Container on #121212 with a top divider in #2c2424.
- Each item: icon 20–24px, label Raleway 16px #fef9ef; item gap 16px; group gap 28px.

4) Add the four-step timeline
- Outer padding-top/bottom 48px; inner stack gap 28px.
- Step number: Raleway 18px, color #fef9ef.
- Step title: Crimson Text 30px/1.25 #fef9ef.
- Step body: Raleway 16px/1.75 #fef9ef.

5) Style the dashboard preview card
- Container: background #121212; 28px radius; apply md shadow rgba(0,0,0,0.55) 0 32px 64px -24px; internal padding 24–28px.
- Text and metrics: #fef9ef; accent highlights with #c05b58 used sparingly.

## Similar Brands

- InsideTracker — Data-forward wellness with dark UI; uses more neon accents and sans-serif headlines compared to this serif-led approach.
- Levels — Metabolic tracking with dark dashboards; lighter typography and more blues versus the warm parchment contrast here.
- WHOOP — Performance telemetry in dark mode; relies on geometric sans fonts and vivid greens where this site opts for serif authority and muted reds.
- Eight Sleep — Tech-first health marketing; more gradients and motion, less traditional serif voice than Anabolic Insights.

More like this

Browse Health →
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 3 hours ago
glideapps.com
Glide Blog Developer Tools
Glide Blog
A bold masthead titled The Column and an above-the-fold email capture lead into a clean two-column layout: a large, image-led feature on…
Blog · 15 hours ago
clarionhealth.com
Clarion Health About AI
Clarion Health About
A warm, full-bleed team photo anchors the hero, with a dark gradient that makes the large serif headline pop and a single…
About · 20 hours ago