SIFA Operational UtilityDESIGN.md alpha

The design system focuses on utility, speed, and clarity for internal operational teams. The brand personality is professional and pragmatic, leaning into a Minimalist / Flat Design aesthetic with a high-contrast profile. By removing shadows and gradients and utilizing a stark White, Navy, and Rose palette, the interface reduces visual noise. The visual language uses high whitespace and a bold color palette to ensure the primary accent and dark secondary tones remain the sole drivers of attention.

primary#ba1142
secondary#565b8c
tertiary#5c5c5c
surface#f9f9f9
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

headline-lgInter · 24px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headline-mdInter · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-lgInter · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-mdInter · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

label-capsInter · 10px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

button-textInter · 14px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Corner Radius

0.25rem
0.5rem
0.75rem
1rem
1.5rem
9999px

Spacing

Base: 8px
8px
12px
16px
20px

The design system focuses on utility, speed, and clarity for internal operational teams. The brand personality is professional and pragmatic, leaning into a Minimalist / Flat Design aesthetic with a high-contrast profile. By removing shadows and gradients and utilizing a stark White, Navy, and Rose palette, the interface reduces visual noise. The visual language uses high whitespace and a bold color palette to ensure the primary accent and dark secondary tones remain the sole drivers of attention.

Components

Cards

Card Title

Sample body text for the card component.

Buttons

Inputs

Navbar

default

Chips

neutralaccent

Do's & Don'ts

Do

Apply elevation using solid 0.5px black or navy borders.
Use cards with 12px radius for a modern container.
Apply 8px radius to buttons for a cohesive form language.
Ensure the sticky navbar accounts for bottom safe-area insets on mobile devices.

Don't

Use shadows for elevation – shadows are strictly prohibited
Download .md

License MIT
Uploaded yesterday
Version v1
File size 6.1 KB
Downloads 2
Copies 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/bonibotak/inob and implement it in my code

Don't have the MCP? Install it here