Studio MY
An AI-native product studio for scale-ups — design, engineering, and QA under one roof. We build the AI products and agents that run your business.
01 / Logo
Logo Variants
- Primary mark: a butterfly whose body is a rising phoenix — metamorphosis meeting rebirth. The 'RO' monogram sits in the right wing.
- Mark palette: cream wings, deep-maroon (#7C3030) color-blocking, dusty-rose accents, and a copper-to-red flame crest.
- Use the full-color mark on light/cream backgrounds. For dark, small, or single-color contexts, use the solid Firebird mark or the Line Butterfly.
- Clear space: keep at least the height of the phoenix's head clear on every side. Minimum web size 32px; minimum print 12mm. Never recolor, rotate, or stretch the mark.
02 / Color
Color Palette
Primary
Studio Maroon
#7c3030
RGB(124, 48, 48)
Primary CTAs, links, eyebrows, the brand accent
Deep Maroon
#5a2222
RGB(90, 34, 34)
Hover states, deepest accents
Copper
#c0603f
RGB(192, 96, 63)
Gradient terminus, warm highlight
Neutrals (Warm)
Canvas
#faf5ef
RGB(250, 245, 239)
Page background — the dominant field
Sand
#f1e8de
RGB(241, 232, 222)
Alternate section backgrounds
Blush Tint
#f6eae1
RGB(246, 234, 225)
Icon chips, subtle fills, highlight blocks
Panel White
#ffffff
RGB(255, 255, 255)
Cards and raised surfaces
Text & Ink
Ink
#241f1b
RGB(36, 31, 27)
Headings and body text
Muted
#6b5b51
RGB(107, 91, 81)
Secondary text, paragraph sub-copy
Dim
#9a897b
RGB(154, 137, 123)
Captions, meta, placeholder text
Lines
Line
#ebe1d4
RGB(235, 225, 212)
Default borders and dividers
Line Strong
#dccfbe
RGB(220, 207, 190)
Outlined buttons, stronger separators
03 / Typography
Type Scale
Newsreader
Headings & Display
"Newsreader", Georgia, serif
Inter
Body & UI
"Inter", system-ui, sans-serif
Build a fully agentic business.
An agency that is slightly different
Be the first to adopt a new way of working.
AI-native product studio
Body text looks like this. Clean, readable Inter with a generous 1.7 line height.
- Headlines in Newsreader (serif, weight 500), tight tracking — never bold-heavy, never in Inter.
- Body and all UI in Inter; ink on cream, white on maroon, line height 1.7.
- Eyebrows: Inter 600, uppercase, 0.16em tracking, set in Studio Maroon.
04 / Components
Button Styles
Solid
Start a project
Primary CTAs (hover → #5A2222)
Outline
See our work
Secondary actions on light (hover → ink border)
- Radius 10px, font weight 500, padding ~13px / 26px.
- Solid buttons darken to Deep Maroon on hover; outline buttons darken their border to Ink.
- Pick the solid maroon for the single most important action per view.
05 / Tokens
Spacing, Corners & Shadows
Corner Radius
Radius SM
10px
Buttons, pills, badges
Radius MD
13px
Icon chips, inputs
Radius LG
18px
Cards, panels
Shadows
Shadow SM
0 8px 20px rgba(40,38,30,0.10)
Pills, floating labels
Shadow MD
0 20px 50px rgba(40,38,30,0.08)
Card hover lift
Shadow LG
0 30px 70px rgba(40,38,30,0.16)
Hero & device mockups
Borders & Lines
Line (Subtle)
#ebe1d4
Line Strong
#dccfbe
06 / Visual Style
Visual Language
Warm, editorial, optimistic — a cream canvas with deep-maroon ink, serif headlines over clean sans body.
Signature gradient: linear-gradient(102deg, #7C3030, #C0603F), maroon → copper. Reserve it for one or two accent words.
The butterfly-phoenix mark stands for metamorphosis and rebirth — use it as a quiet flourish, never as wallpaper.
Generous whitespace, soft 18px-radius cards, low-contrast warm shadows. Nothing cold or harsh.
Color-block one warm tone per section and let the cream breathe.
Show product UI in dark device frames to contrast against the warm page.
07 / Guidelines
Do's and Don'ts
Do
Lead with the cream (#FAF5EF) background; keep maroon as the accent, not the field.
Pair Newsreader headlines with Inter body — serif display, sans UI.
Use the maroon → copper gradient sparingly, on one or two words at most.
Keep the full-color mark on light backgrounds; switch to a solid mark on dark.
Maintain high contrast: ink on cream, white on maroon.
Don't
Don't recolor the mark or place the full-color version on busy or dark backgrounds.
Don't set body copy in Newsreader or headlines in Inter.
Don't introduce cold blues or greys — the palette is entirely warm.
Don't stretch, rotate, or crowd the logo; respect its clear space.
Don't gradient-fill entire headings or large areas.