02. colors

Eight tokens. No new hex codes anywhere in the project. If a color is missing — it enters this list first, not a class.

Applied to all branding materials.

Brand / Black

#181818

var(--brand-black)

Primary text, dark surfaces, buttons.

Brand / Off-white

#FFFFF8

var(--brand-off-white)

Page background. Never pure #FFF.

Brand / Yellow

#F5C13B

var(--brand-yellow)

Accents. Featured. One block/page max.

Accent / Red

#C43C1C

var(--accent-red)

Link hover, focus rings, inline code text.

Neutral / Warm

#E4E2D7

var(--neutral-warm)

Borders, dividers, disabled states.

Neutral / Mid

#55524A

var(--neutral-mid)

Secondary text, meta, captions.

Surface / Dark

#0F0F0F

var(--surface-dark)

Code blocks, dark hero backgrounds.

Surface / Code Light

#F0EFE8

var(--surface-code-bg)

Inline code background in rich text.

Base Dark medtech

Token

Value

Role

Cbackground

#FFFFF8

Page and section grounds.

Cforeground

#181818

Primary text on background.

Cmuted

#6B6B6B

Secondary text, meta, captions.

Cbrand

#F1C36F

Mirumee brand yellow. Stable across modes.

Cborder

#181818

Full-contrast borders.

Cborder muted

#181818

Softer dividers.

C_base-accentcolor

#49423D

Per-mode accent differentiator.

Cmedtech mint

#EAFFF1

Reference mint for med-tech blocks.

Cmedtech middle mint

#DCEEE2

Deeper mint for alternating cards.

Cerror

#FE4738

Form errors, destructive actions.

Cmuted gray

#ADB3BC

Placeholder text, empty states.

Cdisabled

#D1D5DB

Disabled buttons, inputs, chips.

Ccolor

transparent

Utility transparent fill/border reset.

Token

Value

Role

Cbackground

#181818

Page and section grounds.

Cforeground

#FFFFF8

Primary text on background.

Cmuted

#6B6B6B

Secondary text, meta, captions.

Cbrand

#F1C36F

Mirumee brand yellow. Stable.

Cborder

#FFFFF8

Full-contrast borders.

Cborder muted

#FFFFF8

Softer dividers.

C_base-accentcolor

#CFBBAD

Per-mode accent — cream.

Cmedtech mint

#EAFFF1

Reference mint.

Cmedtech middle mint

#DCEEE2

Deeper mint.

Cerror

#FE4738

Form errors.

Cmuted gray

#ADB3BC

Placeholder text.

Cdisabled

#D1D5DB

Disabled state.

Ccolor

transparent

Transparent utility.

Token

Value

Role

Cbackground

#E9FFF1

Med-tech mint page ground.

Cforeground

#181818

Primary text on background.

Cmuted

#6B6B6B

Secondary text.

Cbrand

#F1C36F

Mirumee brand yellow. Stable.

Cborder

#181818

Full-contrast borders.

Cborder muted

#181818

Softer dividers.

C_base-accentcolor

#2E5739

Deep green — medtech accent.

Cmedtech mint

#EAFFF1

Reference mint.

Cmedtech middle mint

#DCEEE2

Deeper mint.

Cerror

#FE4738

Form errors.

Cmuted gray

#ADB3BC

Placeholder.

Cdisabled

#D1D5DB

Disabled.

Ccolor

transparent

Transparent utility.

Semantic & Modes

Live semantic tokens from the site's colors collection. 3 modes: Base / Dark / medtech. Bind classes to these — never to raw hex.

Style panel → Variables → colors

04. Typography

Seven sizes. Every text element on the site uses one of them — nothing between. RWD scales at 1024 and 640 breakpoints.

Display: RAMA Gothic M
Body: Neue Haas Grotesk Display
Code: JetBrains Mono

04A. Headings

Theading-style-hero

Hero title.

RAMA Gothic M

Weight 700 · Tracking -1%

Desktop

6 rem / 5.5 lh

Tablet

4.5 rem / 4.125 lh

Mobile

3.5 rem / 3.25 lh

Theading-style-h1

Section headline.

RAMA Gothic M

Weight 700 · Tracking -1%

Desktop

4 rem / 4 lh

Tablet

3 rem / 3.125 lh

Mobile

2.5 rem / 2.625 lh

Theading-style-h2

Subsection heading.

Neue Haas Grotesk Display

Weight 700 · Tracking -1.5%

Desktop

2.5 rem / 2.875 lh

Tablet

2 rem / 2.375 lh

Mobile

1.75 rem / 2.125 lh

Theading-style-h3

Third-level heading in body.

Neue Haas Grotesk Display

Weight 600 · Tracking -1%

Desktop

1.5 rem / 1.875 lh

Tablet

1.375 rem / 1.75 lh

Mobile

1.25 rem / 1.625 lh

04B. Text

Ttext-size-large

Body text large. Used for article rich text, hero support paragraphs, and any long-form reading. Set at 65-character line length maximum for comfort.

Neue Haas Grotesk Display

Weight 400 · Max column width 65ch

Desktop

1.125 rem / 1.8125 lh

Tablet

1.0625 rem / 1.6875 lh

Mobile

1.0625 rem / 1.6875 lh

Ttext-size-medium

Body text medium. Card descriptions, form labels, secondary UI.

Neue Haas Grotesk Display

Weight 400

Desktop

0.9375 rem / 1.4375 lh

Tablet

0.875 rem / 1.375 lh

Mobile

0.875 rem / 1.375 lh

Ttext-style-caption

Kicker / label / eyebrow

Neue Haas Grotesk Display

Weight 500 · Tracking +10% · Uppercase

Desktop

0.75 rem / 1.0625 lh

Tablet

0.75 rem / 1.0625 lh

Mobile

0.6875 rem / 1 lh

heading-style-h4

Small heading

Neue Haas Grotesk Display

Weight 600 · Tracking -0.005em

Desktop

1.25 rem / 1.35 lh

Tablet

1.25 rem / 1.35 lh

Mobile

1.25 rem / 1.35 lh

text-size-small

Small body / UI label / secondary text.

Neue Haas Grotesk Display

Weight 400 · Tracking 0

Desktop

0.875 rem / 1.5 lh

Tablet

0.875 rem / 1.5 lh

Mobile

0.875 rem / 1.5 lh

text-size-tiny

Tiny text / meta / footer / tag.

Neue Haas Grotesk Display

Weight 400 · Tracking 0

Desktop

0.75 rem / 1.5 lh

Tablet

0.75 rem / 1.5 lh

Mobile

0.75 rem / 1.5 lh

04C. Special

text-weight-medium

Emphasized body — zastosuj obok text-size-* aby uzyskac wage 500.

Utility class

font-weight: 500

Uzycie

class="text-size-medium text-weight-medium"

Wynik

font-weight: 500

Plik

NHaasGroteskTXPro-65Md

text-weight-bold

Bold body — zastosuj obok text-size-* aby uzyskac wage 700.

Utility class

font-weight: 700

Uzycie

class="text-size-medium text-weight-bold"

Wynik

font-weight: 700

Plik

NHaasGroteskTXPro-75Bd

Rich text

Defined once via 'Style all rich text elements' on the Blog Posts Template. Every article inherits this — no per-post override.

Applied to .w-richtext / .blog_post_body

.blog_post_body

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

A section heading in the article body

h2 · margin-top 48 · margin-bottom 16

This is body copy in a Mirumee blog article, set at 18px with 1.6 line-height on a 680px column — comfortable for long-form reading. Inline links use a visible underline because color alone isn't enough on the current dark-text-on-off-white palette.

p · a (all links) — underline 1.5px, offset 3px, hover Accent Red

A subheading below h2

h3 · margin-top 32 · margin-bottom 12

Technical text often needs inline code — like a call to DataLoader or a symbol reference. The style ends the invisible-monospace problem where inline code was indistinguishable from body text.

code (inline) · Surface/Code-Light bg, Accent/Red fg, JetBrains Mono

Ordered and unordered lists get 24px left padding.
Item spacing is 8px between items.
Nested lists inherit — no extra styling.

ul / ol · padding-left 24 · li margin-bottom 8

Pull-quotes get the accent red left rule and h3-scale type, italic. Used for the one or two claims a reader should remember.

blockquote · border-left 3px Accent/Red · h3 size, italic

@query.field("user")
def resolve_user(_, info, id):
    return session.get(User, id)

pre > code · Surface/Dark bg · padding 20/24 · radius 8

CTAs

Three variants. If a new button doesn't fit one of these — the problem is the information, not the missing variant.

Rule: max ONE primary per view.

Let's talk →

.button-primary

Black fill, off-white text. Max one per page. Hero, conversion. Padding 14/24, caption type.

See all posts →

.button-secondary

Outline black, same size as primary. Secondary actions, section CTAs, load more.

Read the piece →

.button-ghost

Text-only, underline. In-text CTAs, card 'read more', inline article links.

Section Architecture

Every section on the site follows the same information rhythm. The design changes; the hierarchy doesn't.

Reader eye path: kicker → statement → support → action

→ Kicker

The one thing this section is saying, in as few words as possible.

Support paragraph. Why this matters, in one or two sentences. Never a wall of text — if you need more, that's a different section.

One clear action →

.text-style-caption

2-4 words. Names what the section is.

.heading-style-h2

One sentence. States the argument.

.text-size-large

1-2 sentences. Supports the claim.

.button-primary / .button-ghost

One action. Verb + object.

Section paddings

Vertical space between stacked content sections. Choose the size that matches the informational weight — large for hero transitions, small for tight groupings.

Section A

48 px

Section B

Cpadding-section-small

Desktop 3 rem

Tablet 2.5 rem

Mobile 2 rem

Section A

96 px

Section B

Cpadding-section-medium

Desktop 6 rem

Tablet 4.5 rem

Mobile 3.5 rem

Section A

144 px

Section B

Cpadding-section-large

Desktop 9 rem

Tablet 7 rem

Mobile 5 rem

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }