a CSS framework based on the golden ratio.

The framework utilitzes the golden ratio (1.618). From the grid, typography, table, buttons, form components to colors uses this golden ratio.

Get started
<div class="">


This framework supports fluid typography (try resizing this window if you are using a desktop browser). Also, you can utilize the contrasting typographical feature as per your requirement. Try any one of the following classes .contrast-style-1 and .contrast-style-2 in the editable text field and see the magic!

Dark mode

Phi also supports dark mode. You can enable it within two steps. Check out the documentation for this. You can use partial dark mode as well, as you can view this section utilizes the dark-mode, other sections don't! Tap or Click on the dark mode icon to switch to light mode.


The framework provides CSS variables/CSS custom properties out of the box when you link or import the phi-css in your webpage. It has custom properties for colors, font-families and some important rem values. Also, you will have the ability to use the flex, display and text alignment classes to use within your web app.

Hey! I am Prathamesh Koshti. I'm the creator of this CSS framework, created this framework in my free time. I work as a full-time front end developer. If you do like the idea behind this framework, you can consider buying me a coffee , would be much helpful for me to maintain this project in future.