Style guide
The Minima design system: the colors, type, components and rules used across this site. Change a style or component once and it updates on every page.
How to use
Follow these rules when you edit pages or build new ones, so the site stays consistent.
01
Use styles, not one-off values
Always pick colors from the color styles and text from the text styles below. Never type a hex code or font size directly onto a layer.
02
Build pages from the template
Every page uses the “project template” layout, which adds the Navbar and Footer. Add your sections between them, or duplicate the Template page as a starting point.
03
Design for three breakpoints
Desktop is 1200px and up, Tablet is 810–1199px, Phone is below 810px. Check every new section on all three.
04
Keep strokes at 1px Black
Borders, dividers and outlines are always 1px solid Black. Don’t mix thicknesses or colors.
05
Use the spacing scale
Spacing comes from 8, 16, 24, 32, 48, 64, 80 and 112px. Sections use 112px vertical / 86px side padding on Desktop, 80/40 on Tablet and 64/20 on Phone, with content capped at 1280px wide.
06
Reuse components
Use the existing components for buttons, cards, rows, testimonials and FAQs instead of rebuilding them, so changes stay in sync.
07
Animate gently, once
Elements fade or slide in when their section scrolls into view and play only once. Keep durations between 0.5s and 1s.
08
Write for people and search
One H1 per page, a clear page title and description, and alt text on every image.
Colors
Seven color styles make up the palette. Use them by name from the color styles panel.
Light Ash
#F3F1EC
Page background
Black
#000000
Body text, strokes and icons
Charcoal
#2E2E2E
Headings and button text
Gray Text
#424242
Secondary and muted text
Light Salmon
#FFD4BD
Primary buttons and highlights
Pale Blue Gray
#CBDDDE
Footer, reel band and tags
White
#FFFFFF
Cards and testimonials
Typography
Headings use Sofia Sans Extra Condensed, body text uses Space Mono, and the reel band uses Lato. Sizes are Desktop / Tablet / Phone.
Display/Giant
Footer “Contact us” · 342 / 190 / 90px
Aa
Display/Hero
Page titles (H1) · 82 / 64 / 48px
Seriously good design
Heading 2
Section titles (H2) · 76 / 56 / 44px
Our skills & service
Article Heading
Headings inside articles · 48 / 40 / 32px
Small habits, big results
Heading 3/Work
Work list titles · 44 / 38 / 30px
CashSend App
Heading 4
Card and case-study headings · 42 / 36 / 30px
Design research
Heading 5
Small headings and FAQ questions · 34 / 30 / 26px
What does Minima do?
Client Name
Names and labels · 28 / 26 / 22px
Md Shahin Alam
Reel
Scrolling reel band · 46.8 / 36 / 28px
Seriously good design.
Paragraph/XL
Lead lines · 24 / 22 / 18px
Do you have any specific projects in mind?
Paragraph/Large
Intros · 18 / 17 / 16px
We design websites and products people love to use.
Paragraph/Regular
Body text · 16px
Clear, honest copy that explains what we do and why it matters.
Paragraph/Small
Captions, meta and labels · 14px
June 27, 2023 · App Design
Button
Button labels · 18px uppercase
View our latest work
Badge
Category badges · 13px
Fintech
Layout & spacing
The grid, spacing and breakpoints every section follows.
Breakpoints
Desktop 1200px+ · Tablet 810–1199px · Phone under 810px
Content width
Max 1280px, centered inside each section
Section padding
Desktop 112 / 86px · Tablet 80 / 40px · Phone 64 / 20px
Spacing scale
8 · 16 · 24 · 32 · 48 · 64 · 80 · 112px
Strokes
1px solid Black for every border, divider and outline
Corners
Square by default · 128px pill for buttons · 8px for blog covers
Images
1px Black border, 1:1 or 3:2 ratio, always with alt text
Motion
Appear on scroll, play once, 0.5–1s ease
Buttons & links
Use the Button component for links styled as buttons and the Submit Button inside forms. Inline links use the Underline Link style.
• Primary — the main action in a section, like “View our latest work” or “Learn more”.
• Small — secondary actions and phone layouts.
• Nav — the Contact button in the Navbar.
• Submit Button — only inside forms; shows Sending… and Thank you! states automatically.
• Underline Link — links inside paragraphs.
Components
Reusable building blocks. Edit the component once and every instance updates.
Navbar
Top navigation with Desktop, Tablet, Phone and Phone Open (menu) variants. Lives in the page template.
Footer
Contact prompt, giant Contact us link with the plane cursor, credits and links. Lives in the page template.
Button / Submit Button
Primary, Small and Nav link buttons; Submit Button for forms.
Service Card
Icon, title and description for services. Default and Phone variants.
Work Row
Project row with hover preview, used in the Latest Work list. Default, Hover and Phone variants.
Testimonial Slider
Carousel of Testimonial Cards with Desktop, Tablet and Phone slide sets.
FAQ Item
Accordion question and answer with Open and Closed variants.
MailPlaneCursor (code)
Paper-plane cursor that follows the mouse and opens an email on click.
StructuredData (code)
Invisible schema.org data for search and answer engines: FAQ, blog post or project.