# Layout Design Guidelines

Below are the guidlines to design layouts compatible with `Saral App` and `SaralSDK`.

&#x20;  <img src="https://lh4.googleusercontent.com/9JO0k5Ftl0gIE6WfkP9WJNcFXmcem_mrgBMgeyuYXS-BVQmH5ItLs42w0PEIhDCpZd1sQtoxyp8h1wZBDNLBnIvv-MkkL4cfv83c1v_0TweqMfHK80Mda6_EjVwMYf_UT3sbDZFxyR5ws8qqd4RPJg" alt="" data-size="line">  Alignment Circle Radius Width – 36px & Height 36px Border Radius – 100px or use directly Circle shape. These alignment circles should be present in the corners of the overall table area to be able to facilitate scanning the sheet.

&#x20;<img src="https://lh4.googleusercontent.com/0WV1oieI6PHnYvW4ZHJsXhUpqIAoQG5piEslebLV8vmmdNXguEaUVBSaIn22yUgVKMGMJ-juIIJYJ9n1JqBqp2N1ScfXCrsf0wpvGGBbVhStgTb0Tn4Hpsiqh7RrUN2pDN8bB84LvffsBV8R_5TE-g" alt="" data-size="line">  Box for informational fields(Can’t be scanned): Width – 26px & Height 26px Border Color - #C2C2C2 Fill Color - #ffffff

<img src="https://lh3.googleusercontent.com/b-sfMMUdQrRuxbGNBvz8pTcqBxs7iwfB1cNHv9pqDT4MiOERMwkKIukYEfvWGwgNV8Y30ZIUvsAEU-lqbLeGiwF-echpeuWLYTpxdzd6Htz7ipfB8h8pJdjVtbpkvxiukYViThiSN36Pgfi3QROfzw" alt="" data-size="line">  Box for Handwritten Digit or Block Letter: Width – 21px & Height 26px Border Color - #C2C2C2 Fill Color - #ffffff

<img src="https://lh5.googleusercontent.com/zEgPnCNC7j2xI2FMGIIHOPEoeViRnrG-aPaSFexYYDY3zbSa8VX-aMQLIOl0oE52L2v4useidsqZO-Y601y5DtGT5XfXlguMx1hbQZPLsF9Iugd8A2sTDyWg3vi2GCmKk_wIUkI4NH36pl-mtHrmMg" alt="" data-size="line">   OMR Bubble Width – 12px & Height - 12px Border Radius – 100px or use directly Circle shape Fill Color - #ffffff, Border Color - #C2C2C2

<img src="https://lh5.googleusercontent.com/T9n-rKcUlcIdcacqr36gPtpXSoTIsnccT7_87hQR3nxYllU2sqrUnnd5eoeVfNGV9ZDnimYRXeexFFApbAo_EvM48clT-WvNvhJJjkWshfgjPGL5Cc6Tzoz94jaX0odsnQ-z0hi2Da0gZCfHhKdPIA" alt="" data-size="line">  Row & Column Width – 41px, Height-41px Border – 1px, Border Color - #000

**Text** Font Name – “Noto Sans”, Color- #707070, Font Size – 9px (Optional, can use other fonts and colors)

**Page Size** – Custom Size, Maximum Dimension In MM - Maximum Width – 842 mm & Maximum Height- 595 mm Dimension In Inch - Maximum Width – 33 inch & Maximum Height- 24 inch Dimension In Pixel (300ppi/dpi) - Maximum Width – 3182 pixel & Maximum Height- 2248 pixel Mode - Landscape

Refer some of the layouts designed and used in `Saral` implementations.

![](https://811030052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLe89Gzl6JNQ9inpB8sRg%2Fuploads%2FdlZwPf9UBkrRoiGZnbjj%2Fbooks-distribution-layout.png?alt=media\&token=652f2b0b-7b3d-40eb-979e-c93d42264593)  ![](https://811030052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLe89Gzl6JNQ9inpB8sRg%2Fuploads%2FdkJ07c72GZFd7nK12oaR%2Fmcq_up.png?alt=media\&token=97f9eb66-62d9-45af-bbc9-158bfb481d65)

![](https://811030052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLe89Gzl6JNQ9inpB8sRg%2Fuploads%2F8MplMCwooZBjmjxXjNlT%2F8students_13q.png?alt=media\&token=48385328-a4e0-45fb-8e45-d9a0eddffb42) ![](https://811030052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLe89Gzl6JNQ9inpB8sRg%2Fuploads%2FUWkz8d8KYDubu0Mb6QQu%2F20q_1s_odisha.png?alt=media\&token=0c978b00-0c65-46ac-9c99-e1fa2dac913f)

![](https://811030052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLe89Gzl6JNQ9inpB8sRg%2Fuploads%2FbJUkFy1YExFmixQnBtGi%2F34q_1s_guj.png?alt=media\&token=1bbdcc2e-8e0c-49c8-bf31-1783a1f71692)