🚀 Brainstorming: Design of the page

[N3v1]

Hi @SID262000, @Devansh-Singh-Parmar, everyone, This issue is for the design of the page please send some links to well-designed websites that you like Please start with task 1

Tasks

• [x] Gather links from well-designed websites for inspo
• [ ] Create a design on Figma ⚠️Working on it
• [ ] #7

[N3v1]

Some links to well-designed websites:

• https://www.codeedit.app/
• https://www.raycast.com/

[N3v1]

Hi @SID262000, @Devansh-Singh-Parmar, everyone link to the figma file you can find here or on Slack.

[SID262000]

Sure @N3v1

[Devansh-Singh-Parmar]

Hey! @N3v1 @SID262000

I created the designs on Lunacy when me @AryanGupta0007 @Atrika10 was starting this project. If you need it for reference or use it instead of new one, let me know!

[N3v1]

Hey! @N3v1 @SID262000

I created the designs on Lunacy when me @AryanGupta0007 @Atrika10 was starting this project. If you need it for reference or use it instead of new one, let me know!

Can you share it with me? @Devansh-Singh-Parmar

cc: @SID262000

[Devansh-Singh-Parmar]

That was old so you can make edits.

[Devansh-Singh-Parmar]

Please check slack for links. cc @N3v1

[KartikKar19]

@N3v1 I can help with Figma designs. I have worked on many Figma projects. If you give me proper sitemaps it will be easier to make Figma prototypes.

[N3v1]

@KartikKar19: Can you explain what "sitemaps" mean?

[N3v1]

@SID262000 I'll hide comments that are ineffective or outdated so this conversation doesn't become confusing

[KartikKar19]

@N3v1 Sure. Sitemaps are basically rough wireframing to see what needs to be on the pages and in which order they are.

[N3v1]

Thanks, @KartikKar19 for your explanation

[KartikKar19]

@N3v1 https://library.relume.io/app/project/227009/Kc9BLzeRtac8sqAqBDdE4EgRqvu2tYskSCyC9DRcEu8/view This is an example of the sitemap I was talking about. We can use this to work on the Figma designs.

[N3v1]

Now I understand it. How can I create a sitemap? @KartikKar19

[KartikKar19]

@N3v1 You can use Relume AI to make sitemaps and export them to Figma while editing them. But for generating wireframes and exporting to Figma we would need to upgrade the plan.

[KartikKar19]

@N3v1 Once you are done with the sitemaps we can work on the Figma together.

[N3v1]

Does anyone have an updated Figma plan? I don't want to upgrade because I rarely use Figma

cc: @SID262000 @Devansh-Singh-Parmar @KartikKar19

[N3v1]

@N3v1 Once you are done with the sitemaps we can work on the Figma together.

Okay @KartikKar19

[KartikKar19]

@N3v1 I don't have an updated plan in Figma.

[N3v1]

@N3v1 I don't have an updated plan in Figma.

Could we use any free alternatives? @KartikKar19

[N3v1]

Okay @KartikKar19 Thx

[KartikKar19]

@N3v1 we don't need Figma upgrade to import sitemaps. We can do the designing pqrt ourselves.

[N3v1]

@KartikKar19 I'm creating it now. Heres the link https://library.relume.io/app/project/227130/bxRnCYXOGCqTeHPt0I4JyQJiuX0BkYtxWj99HN5cHz8/view

[N3v1]

I'm done with it @KartikKar19

[KartikKar19]

@N3v1 I will make a figma file in 15 min and give you editor rights.Tell me which page I should work on? Also give me your figma email so that I can invite you.

[N3v1]

@N3v1 I will make a figma file in 15 min and give you editor rights.Tell me which page I should work on?

Can I work on the Home page @KartikKar19? You can decide which you want to start with @KartikKar19

cc: @SID262000

[KartikKar19]

@N3v1 Okay I will work on How It works page. cc: @SID262000

[N3v1]

Hi @KartikKar19, It would be a good idea to start by creating a color palette that we can use for the website.

[N3v1]

:root {
    --black: #000;
    --white: #fff;
    --orange: #e66702;
    --tomato: #f63e54;
    --magenta: #d71bce;
    --plum: #8d1287;
    --grape: #6529f8;
    --indigo: #622aff;
    --violet: #8876fe;
    --sapphire: #3d44c3;
    --midnight: #1b23b3;
    --azure: #027fff;
    --moonstone: #2294b1;
    --teal: #049cb7;
    --sea-green: #099b9d;
    --aqua: #039e8f;
    --green: #0c9d46;
    --forest: #0c8346;
    --color-fill-blue: #0071e3;
    --color-figure-blue: #06c;
    --color-button-background-active: var(--color-fill-blue);
    --color-button-background-hover: #0077ed
}

[data-color-scheme=light] {
    --dark: #000;
    --light: #fff;
    --glyph-gray: #1d1d1f;
    --glyph-gray-override: ;
    --glyph-gray-secondary: #6e6e73;
    --glyph-gray-secondary-alt: #515154;
    --glyph-gray-tertiary: #86868b;
    --glyph-blue: #06c;
    --glyph-blue-override: ;
    --glyph-orange: ;
    --glyph-red: ;
    --glyph-green: ;
    --fill: #fff;
    --fill-override: #000;
    --fill-gray: ;
    --fill-blue: ;
    --fill-orange: ;
    --fill-red: ;
    --fill-green: ;
    --fill-yellow: ;
    --fill-secondary: #fbfbfd;
    --fill-secondary-alt: #fafafa;
    --fill-secondary-alt-override: ;
    --fill-blue-secondary: ;
    --fill-gray-secondary: ;
    --fill-gray-secondary-alt: ;
    --color-fill-green-secondary: ;
    --color-fill-light-blue-secondary: ;
    --color-fill-light-gray-secondary: ;
    --color-fill-orange-secondary: ;
    --color-fill-purple-secondary: ;
    --color-fill-red-secondary: ;
    --color-fill-teal-secondary: ;
    --color-fill-yellow-secondary: ;
    --fill-tertiary: #f5f5f7;
    --fill-tertiary-alt: #f5f5f7;
    --fill-tertiary-override: ;
    --fill-blue-tertiary: ;
    --fill-gray-tertiary: ;
    --fill-gray-quaternary: ;
    --fill-gray-quinary: ;
    --fill-blue-gradient-light: ;
    --fill-blue-gradient-dark: ;
    --fill-gradient-gray-start: ;
    --fill-gradient-gray-end: ;
    --fill-table: ;
    --app-store-glyph-tile: ;
    --app-store-fill-tile: ;
    --applemusic: ;
    --toggle-color-background: ;
    --toggle-color-text: #fff;
    --color-button-background: ;
    --color-button-text: #fff;
    --color-figure-blue: ;
    --color-figure-gray: ;
    --color-figure-gray-secondary: ;
    --color-figure-gray-secondary-alt: ;
    --color-figure-gray-tertiary: ;
    --color-figure-green: ;
    --color-figure-light-blue: ;
    --color-figure-light-gray: ;
    --color-figure-orange: ;
    --color-figure-pink: ;
    --color-figure-purple: ;
    --color-figure-red: ;
    --color-figure-teal: ;
    --color-figure-yellow: ;
    --color-highlight-green: ;
    --color-highlight-red: ;
    --color-tutorials-teal: ;
    --color-aside-deprecated: ;
    --color-aside-deprecated-background: ;
    --color-aside-deprecated-border: ;
    --color-aside-experiment: ;
    --color-aside-experiment-background: ;
    --color-aside-experiment-border: ;
    --color-aside-important: ;
    --color-aside-important-background: ;
    --color-aside-important-border: ;
    --color-aside-note: ;
    --color-aside-note-background: ;
    --color-aside-note-border: ;
    --color-aside-tip: ;
    --color-aside-tip-background: ;
    --color-aside-tip-border: ;
    --color-aside-warning: ;
    --color-aside-warning-background: ;
    --color-aside-warning-border: ;
    --foreground-color: var(--fill-override);
    --background-color: var(--fill);
    --background-secondary-color: var(--fill-secondary-alt);
    --background-tertiary-color: var(--fill-tertiary);
    --label-primary-color: #1d1d1f;
    --label-secondary-color: #666;
    --label-tertiary-color: #86868b;
    --separator-color: #d2d2d7;
    --separator-secondary-color: var(--fill-gray-quaternary);
    --link-color: var(--glyph-blue);
    --material-background-color: hsla(0,0%,100%,0.72);
    --material-separator-color: rgba(0,0,0,0.16);
    --material-filters: saturate(180%) blur(20px)
}

[data-color-scheme=dark] {
    --dark: #000;
    --light: #fff;
    --glyph-gray: #f5f5f7;
    --glyph-gray-override: #1d1d1f;
    --glyph-gray-secondary: #86868b;
    --glyph-gray-secondary-alt: #a1a1a6;
    --glyph-gray-tertiary: #6e6e73;
    --glyph-blue: #2997ff;
    --glyph-blue-override: #06c;
    --glyph-orange: #f56300;
    --glyph-red: #ff3037;
    --glyph-green: #03a10e;
    --fill: #000;
    --fill-override: #fff;
    --fill-gray: #f5f5f7;
    --fill-blue: #0071e3;
    --fill-orange: #f56300;
    --fill-red: #ff3037;
    --fill-green: #03a10e;
    --fill-yellow: #ad8200;
    --fill-secondary: #161617;
    --fill-secondary-alt: #141414;
    --fill-secondary-alt-override: #fafafa;
    --fill-blue-secondary: #162b5b;
    --fill-gray-secondary: #6e6e73;
    --fill-gray-secondary-alt: #141414;
    --color-fill-green-secondary: #002b03;
    --color-fill-light-blue-secondary: #002a51;
    --color-fill-light-gray-secondary: #323232;
    --color-fill-orange-secondary: #290d00;
    --color-fill-purple-secondary: #190325;
    --color-fill-red-secondary: #300;
    --color-fill-teal-secondary: #002d2b;
    --color-fill-yellow-secondary: #2b2000;
    --fill-tertiary: #1d1d1f;
    --fill-tertiary-alt: #111;
    --fill-tertiary-override: #f5f5f7;
    --fill-blue-tertiary: #081021;
    --fill-gray-tertiary: #424245;
    --fill-gray-quaternary: #333336;
    --fill-gray-quinary: #222;
    --fill-blue-gradient-light: #0e3768;
    --fill-blue-gradient-dark: #07172a;
    --fill-gradient-gray-start: #161616;
    --fill-gradient-gray-end: #000;
    --fill-table: #1d1d1f;
    --app-store-glyph-tile: #eee;
    --app-store-fill-tile: #1f1f21;
    --applemusic: #ff2d55;
    --toggle-color-background: #1d1d1f;
    --toggle-color-text: #0071e3;
    --color-button-background: #0071e3;
    --color-button-text: #fff;
    --color-figure-blue: #2997ff;
    --color-figure-gray: #f5f5f7;
    --color-figure-gray-secondary: #86868b;
    --color-figure-gray-secondary-alt: #a1a1a6;
    --color-figure-gray-tertiary: #6e6e73;
    --color-figure-green: #03a10e;
    --color-figure-light-blue: #7dc1ff;
    --color-figure-light-gray: #9a9a9e;
    --color-figure-orange: #f56300;
    --color-figure-pink: #f14bf1;
    --color-figure-purple: #a95ed2;
    --color-figure-red: #ff3037;
    --color-figure-teal: #00c2bb;
    --color-figure-yellow: #936d00;
    --color-highlight-green: #e4fee6;
    --color-highlight-red: #f8dddd;
    --color-tutorials-teal: #38a39c;
    --color-aside-deprecated: var(--color-figure-orange);
    --color-aside-deprecated-background: var(--color-fill-orange-secondary);
    --color-aside-deprecated-border: var(--color-figure-orange);
    --color-aside-experiment: var(--color-figure-purple);
    --color-aside-experiment-background: var(--color-fill-purple-secondary);
    --color-aside-experiment-border: var(--color-figure-purple);
    --color-aside-important: var(--color-figure-yellow);
    --color-aside-important-background: var(--color-fill-yellow-secondary);
    --color-aside-important-border: var(--color-figure-yellow);
    --color-aside-note: var(--color-figure-light-gray);
    --color-aside-note-background: var(--color-fill-light-gray-secondary);
    --color-aside-note-border: var(--color-figure-light-gray);
    --color-aside-tip: var(--color-figure-teal);
    --color-aside-tip-background: var(--color-fill-teal-secondary);
    --color-aside-tip-border: var(--color-figure-teal);
    --color-aside-warning: var(--color-figure-red);
    --color-aside-warning-background: var(--color-fill-red-secondary);
    --color-aside-warning-border: var(--color-figure-red);
    --foreground-color: var(--fill-override);
    --background-color: var(--fill);
    --background-secondary-color: var(--fill-secondary-alt);
    --background-tertiary-color: #1d1d1f;
    --label-primary-color: #fffffff9;
    --label-secondary-color: #ffffffc1;
    --label-tertiary-color: #ffffff7b;
    --separator-color: var(--fill-gray-tertiary);
    --separator-secondary-color: var(--fill-gray-quaternary);
    --link-color: var(--glyph-blue);
    --material-background-color: rgba(29,29,31,0.72);
    --material-separator-color: hsla(0,0%,100%,0.24);
    --material-filters: saturate(180%) blur(20px)
}

Maybe you can do something with this @KartikKar19 This is the CSS code from code-edit our orientation site

[N3v1]

@N3v1 I will make a figma file in 15 min and give you editor rights.Tell me which page I should work on? Also give me your figma email so that I can invite you.

My email is n3v1010@gmail.com and my Username NH @KartikKar19

[N3v1]

DeliverEase-product-page.csv

This is the sitemap in a CSV file or click here to see it.

cc: @SID262000 @Devansh-Singh-Parmar @KartikKar19

[KartikKar19]

@N3v1 Can we select a color from https://colorhunt.co/palettes/popular ?I don't know how we will add the code edit pallete to our figma files

[KartikKar19]

@N3v1 https://www.figma.com/file/jSIuBlHIQVMXDyERjeWyi7/Untitled?type=design&node-id=0-1&mode=design&t=ttifCSXWhhtEXjXd-0 This is the link to the Figma file

[N3v1]

@N3v1 Can we select a color from https://colorhunt.co/palettes/popular ?I don't know how we will add the code edit pallete to our figma files

I can create one @KartikKar19

[KartikKar19]

@N3v1 Also export your sitemaps into the design file it will make it easier to work on

[N3v1]

@KartikKar19 Please vote for the new Logo here if you haven‘t voted yet. https://github.com/orgs/TeamCodeArena/discussions/114