Skip to content
Rhytmelo
Brand guidelines

One system, two lights.

The reference for anyone writing about, partnering with or building for Rhytmelo. One typeface, one accent, one line. Nocturne (dark) is the default; Daylight (light) is for documents and print.

Primary: Text #E9E9ED on Ground #161826
Section: Text #E9E9ED on Indigo #262A60
Daylight: Ink #161826 on Paper #F3F5FE
Tint: Accent-800 #423A6A on Accent-200 #E7E5FE
Icon (R mark)

Use the icon on its own for avatars, favicons, app icons and watermarks, and anywhere the full logo would be under 24px tall. It always sits inside a square or circle with 20% padding. The icon alone carries no ™.

32px
16px
Clear space

Keep clear space equal to the wordmark’s height on all sides.

Minimum size
digital 24px h
print 8mm h

Below these sizes, use the icon instead.

Never
✕ stretch
✕ off-palette
✕ gradients
✕ rotate

No effects, outlines, shadows or recoloring outside the palette, and never remove the ™.

The Signal Line

The only graphic element we own: rhythm, signal and system on one baseline.

Rhythm (wave)Signal (pulse)System (flat + node)

A sine wave (rhythm), a sharp pulse (signal) and flat runs that end in a node (system). Stroke 1.5–2.5px on screen or 0.75–1pt in print, in Accent #9184D9 on dark or Accent-600 #796CBF on light. Nodes are 2× the stroke radius.

Progress: forms, steps, carousels
Metric: a sparkline under figures
Divider: documents, footers
Stamp: approvals, sign-off lines

Typography

Inter only. Hierarchy comes from size and space; weight never goes above 500.

Primary typefaceInterAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz0123456789 ₹ $ % + − × → ● ○
400Regular: body, long readingAll body text
500Medium: headings, labelsEverything else
700Bold: not used✕ Never
Licensing + fallback

Inter is open source (SIL OFL) and free for web, print and social. Web: Google Fonts, weights 400 and 500. Desktop: rsms.me/inter. Fallback: system-ui, -apple-system, Segoe UI. If Inter is unavailable, use Arial, never a serif.

Monospace (code only)GET /v1/orders?status=paid → 200 OK

JetBrains Mono (OFL) for code and reference numbers. Never for headlines.

Type scale

Size / line height
StyleSpecimenWebMobilePrintTracking
DisplayHero, coversPrecision, with a pulse.120/0.9256/0.9548pt-0.05em
H1Page titlesSystems that sell.72/1.040/1.032pt-0.04em
H2Section headsWhat we actually do44/1.0530/1.122pt-0.03em
H3Modules, sub-headsConversion infrastructure24/1.220/1.2514pt-0.015em
Body LLead paragraphsWe review the storefront, the data and the pipeline together.19/1.5517/1.5513pt0
BodyRunning textEach pod owns a client metric and reports weekly.17/1.616/1.612pt0
LabelSection index, captions03 — Selected work12/1.311/1.310pt0.16em
FigureMetrics with receipts+34% 4.2× 99.97%160/0.972/0.960pt-0.05em
MonoCode, reference numbersGET /v1/orders → 20014/1.513/1.510pt0
Measure

Body lines run 60–72 characters. Headlines are set flush-left, not centred.

Print minimum

Body text is 12pt minimum. 10pt only for labels, footers and legal text.

Numbers

Always tabular figures. ₹ with lakh grouping (₹1,50,000) for India; $ and € formats for global work.

Color

One accent, used as a line and a glow, never as a flood. CMYK values are calculated starting points; proof them on coated stock (FOGRA39) before printing.

Nocturne (dark)

Default
GroundbgHEX #161826RGB 22, 24, 38CMYK 42 37 0 85Page and post background. Covers about 70% of any dark surface.
SurfacesurfaceHEX #232532RGB 35, 37, 50CMYK 30 26 0 80Panels, cards, inputs, raised areas.
Lineneutral-800HEX #3F424DRGB 63, 66, 77CMYK 18 14 0 70Hairlines, borders, table rules.
Mutedneutral-500HEX #9397ABRGB 147, 151, 171CMYK 14 12 0 33Secondary text, captions, metadata.
TexttextHEX #E9E9EDRGB 233, 233, 237CMYK 2 2 0 7Headlines and body text on dark.
AccentaccentHEX #9184D9RGB 145, 132, 217CMYK 33 39 0 15Signal Line, outlined buttons, nodes, focus. Lines only.
Accent textaccent-300HEX #D2CEFDRGB 210, 206, 253CMYK 17 19 0 1Labels and figures in the accent at text size.
Accent tintaccent-900HEX #2B2741RGB 43, 39, 65CMYK 34 40 0 75Selected states, highlighted rows, callouts.
Section indigosectionHEX #262A60RGB 38, 42, 96CMYK 60 56 0 62Dividers and stat bands. Large-presence fills only.

Daylight (light)

Documents and print
PaperHEX #F3F5FERGB 243, 245, 254CMYK 4 4 0 0Document and page background. Use instead of white.
SurfaceHEX #E4E7F5RGB 228, 231, 245CMYK 7 6 0 4Tables, callouts, form fields.
RuleHEX #CFD3E5RGB 207, 211, 229CMYK 10 8 0 10Hairlines and borders.
Muted inkHEX #595D6CRGB 89, 93, 108CMYK 18 14 0 58Captions, metadata, secondary text.
InkHEX #161826RGB 22, 24, 38CMYK 42 37 0 85Headlines and body text on light.
Accent lineHEX #796CBFRGB 121, 108, 191CMYK 37 43 0 25Signal Line, rules, buttons on light.
Accent textHEX #5D5294RGB 93, 82, 148CMYK 37 45 0 42Labels, figures and links on light.
Accent tintHEX #E7E5FERGB 231, 229, 254CMYK 9 10 0 0Highlights, selected rows, pull quotes.

Daylight is built from the same ramps rather than new colors. On light grounds the accent shifts two steps darker (600 for lines, 700 for text) to keep contrast. Pure white #FFFFFF is never used; Paper is the lightest value.

Extended ramps

100–900
Neutral
100
#F3F5FE243, 245, 254
200
#E4E7F5228, 231, 245
300
#CFD3E5207, 211, 229
400
#B2B6CA178, 182, 202
500
#9397AB147, 151, 171
600
#75798C117, 121, 140
700
#595D6C89, 93, 108
800
#3F424D63, 66, 77
900
#292B3141, 43, 49
Accent (blurple)
100
#F5F4FF245, 244, 255
200
#E7E5FE231, 229, 254
300
#D2CEFD210, 206, 253
400
#B5ABFC181, 171, 252
500
#968AE0150, 138, 224
600
#796CBF121, 108, 191
700
#5D529493, 82, 148
800
#423A6A66, 58, 106
900
#2B274143, 39, 65

On dark: 900–700 for fills, tints and borders, 500 as the base, and 300–100 for text on tints.

On light: 100–300 for fills and tints, 600 for lines, and 700–900 for text.

Ratio: about 70% ground, 20% neutral, 8% text and 2% accent. If the accent covers more than a line or a mark, it’s too much.

Accessible pairs

WCAG 2 contrast, calculated
PairForegroundBackgroundRatioGradeAllowed for
Text on Ground#E9E9ED#16182614.54:1AAABody text and up
Muted on Ground#9397AB#1618266.08:1AABody text and up
Accent on Ground#9184D9#1618265.45:1AABody text and up
Accent-300 on Ground#D2CEFD#16182611.73:1AAABody text and up
Text on Section indigo#E9E9ED#262A6010.96:1AAABody text and up
Accent-300 on Accent tint#D2CEFD#2B27419.52:1AAABody text and up
Ink on Paper#161826#F3F5FE16.18:1AAABody text and up
Muted ink on Paper#595D6C#F3F5FE6.02:1AABody text and up
Accent text on Paper#5D5294#F3F5FE6.23:1AABody text and up
Accent line on Paper#796CBF#F3F5FE4.10:1AA largeHeadlines 24px+, lines, icons
Accent-800 on Accent tint#423A6A#E7E5FE8.33:1AAABody text and up

Nocturne + Daylight

Same layout, same type, same line. Only the token values swap.

RoleNocturneDaylight
Background#161826#F3F5FE
Surface#232532#E4E7F5
Line / rule#3F424D#CFD3E5
Text#E9E9ED#161826
Muted text#9397AB#595D6C
Accent line#9184D9#796CBF
Accent text#D2CEFD#5D5294
Accent tint#2B2741#E7E5FE
Figure#E7E5FE#423A6A
Presence fill#262A60#E7E5FE
Nocturne · default

Website, product UI, decks, launches, and anything about systems, infrastructure or AI.

Daylight · deliberate

Printed documents, reports and guides, where it saves ink and reads well, plus long-form posts and quotes.

One theme per piece

A carousel or document uses one theme throughout. The exception is a printed document with a dark cover and light inner pages.

Nocturne
03 — Case studyCheckout, rebuilt around how people buy.
+34%Example figure: conversion over 90 days against the previous quarter.
Read the full storyOpen →
Daylight
03 — Case studyCheckout, rebuilt around how people buy.
+34%Example figure: conversion over 90 days against the previous quarter.
Read the full storyOpen →

Logos, Signal Lines and color tokens

Press, partners or something we haven’t covered? Write to hello@rhytmelo.com.

Team or partner with a password? Open the media kit.

Go to brand assets →
Work

Still loading…

This is taking longer than it should.

Try againGo home