Dub

ਪੈਲੇਟ

ਬ੍ਰਾਂਡ

• Electric Blue #2563eb — ਪ੍ਰਾਇਮਰੀ ਬ੍ਰਾਂਡ ਰੰਗ—ਲੋਗੋ, ਲਿੰਕ, ਮੁੱਖ ਪ੍ਰਦਰਸ਼ਨ ਸੂਚਕ, ਕਿਰਿਆਸ਼ੀਲ ਸਥਿਤੀਆਂ, ਅਤੇ ਆਈਕਨ ਲਹਿਜ਼ੇ—ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਚਿੱਟੇ ਪਿਛੋਕੜ 'ਤੇ ਇੱਕ ਗੂੜ੍ਹਾ ਨੀਲਾ ਰੰਗ ਸਿਸਟਮ ਦੀ ਇੱਕੋ ਇੱਕ ਵਿਜ਼ੂਅਲ ਅਪੀਲ ਬਣਾਉਂਦਾ ਹੈ।
• Deep Sapphire #1e40af — ਐਕਸ਼ਨ ਬਟਨ ਦਾ ਮੁੱਖ ਪਿਛੋਕੜ, ਕਾਲ ਟੂ ਐਕਸ਼ਨ ਦਾ ਬੋਲਡ ਫਿਲ - ਐਕਸ਼ਨ ਨੂੰ ਦਰਸਾਉਣ ਵਾਲਾ ਇੱਕੋ ਇੱਕ ਰੰਗ - ਧਿਆਨ ਖਿੱਚਣ ਲਈ ਘੱਟ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।

ਨਿਰਪੱਖ

• Canvas White #ffffff — ਪੰਨੇ ਦੀ ਪਿੱਠਭੂਮੀ, ਕਾਰਡ ਦੀ ਸਤ੍ਹਾ, ਪੌਪ-ਅੱਪ ਪੈਨਲ ਹਰ ਸਕ੍ਰੀਨ ਦੀ ਪੂਰਨ ਨੀਂਹ ਹਨ।
• Paper Mist #f5f5f5 — ਨੇਸਟਡ ਕਾਰਡਾਂ, ਵਾਧੂ ਪੈਨਲਾਂ ਅਤੇ ਫਿਲਾਂ ਲਈ ਸੂਖਮ ਹੋਵਰ ਰੰਗ ਬਦਲਾਅ।
• Ash #e5e5e5 — ਕਾਰਡਾਂ, ਇਨਪੁਟ ਕਨੈਕਟਰਾਂ ਅਤੇ ਡਿਵਾਈਡਰਾਂ 'ਤੇ ਪਤਲੇ ਬਾਰਡਰ ਉਹ ਢਾਂਚਾਗਤ ਲਾਈਨ ਹਨ ਜੋ ਸਿਸਟਮ ਨੂੰ ਇਕੱਠੇ ਰੱਖਦੀਆਂ ਹਨ।
• Smoke #d4d4d4 — ਚੁਣੇ ਹੋਏ ਕੰਟੇਨਰਾਂ ਲਈ ਤਿੱਖੇ ਬਾਰਡਰ ਅਤੇ ਵਾਧੂ ਬਟਨ ਰੂਪਰੇਖਾ।
• Pebble #c8c8c8 — ਦਰਮਿਆਨੇ ਕੰਟ੍ਰਾਸਟ ਵਾਲੇ ਬਾਰਡਰ, ਕੰਟਰੋਲ ਆਊਟਲਾਈਨ, ਅਤੇ ਸਟ੍ਰਕਚਰਲ ਡਿਵਾਈਡਰ। ਇਸ ਰੰਗ ਨੂੰ ਕਾਲ ਟੂ ਐਕਸ਼ਨ ਲਈ ਪ੍ਰਾਇਮਰੀ ਰੰਗ ਵਜੋਂ ਨਹੀਂ ਵਰਤਿਆ ਜਾਣਾ ਚਾਹੀਦਾ।
• Midnight Ink #0a0a0a — ਬਟਨਾਂ ਦਾ ਮੁੱਖ ਟੈਕਸਟ, ਹਾਈਲਾਈਟ ਕੀਤੇ ਬਟਨ, ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਟੈਕਸਟ ਵੱਧ ਤੋਂ ਵੱਧ ਕੰਟ੍ਰਾਸਟ ਲਈ ਲਗਭਗ ਕਾਲੇ ਹਨ।

ਟਾਈਪੋਗ੍ਰਾਫੀ

11 ਤੋਂ 48px ਤੱਕ · 9 ਕਦਮ

• Satoshi — ਬਦਲ: Inter (weight 500 · ਰੂਪਰੇਖਾ 500 · ਡਿਸਪਲੇ ਹੈਡਿੰਗ - ਹੈਡਿੰਗ ਅਤੇ ਸੈਕਸ਼ਨ ਸਿਰਲੇਖਾਂ ਲਈ ਸਿਰਫ਼ 36–48px ਲਾਈਨਾਂ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। ਫੌਂਟ ਭਾਰ - 500 (ਮੱਧਮ, ਬੋਲਡ ਨਹੀਂ): ਹੈਡਿੰਗ ਭਰੋਸੇਮੰਦ ਅਤੇ ਆਧੁਨਿਕ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ, ਪਰ ਕਦੇ ਵੀ ਹਾਵੀ ਨਹੀਂ ਹੁੰਦੇ। ਸਤੋਸ਼ੀ ਦੇ ਜਿਓਮੈਟ੍ਰਿਕ ਅਨੁਪਾਤ ਟਾਈਪਫੇਸ ਨੂੰ ਥੋੜ੍ਹਾ ਜਿਹਾ ਸੰਪਾਦਕੀ, ਆਧੁਨਿਕ ਅਹਿਸਾਸ ਦਿੰਦੇ ਹਨ ਜਿਸਨੂੰ ਇੰਟਰ ਦੀ ਬਾਡੀ ਕਾਪੀ ਦੁਹਰਾ ਨਹੀਂ ਸਕਦੀ।
• Inter — ਬਦਲ: Inter (native) · ਰੂਪਰੇਖਾ 400, 500, 600 · ਬਾਡੀ ਕਾਪੀ, UI ਲੇਬਲ, ਨੈਵੀਗੇਸ਼ਨ, ਸਬਹੈਡਿੰਗ, ਅਤੇ ਮਾਈਨਰ ਹੈਡਿੰਗ। ਇੰਟਰ ਪ੍ਰਾਇਮਰੀ ਵਰਕ ਹਾਰਸ ਹੈ, ਜੋ 11px ਮਾਈਕ੍ਰੋ-ਲੇਬਲ ਤੋਂ ਲੈ ਕੇ 30px ਸੈਕੰਡਰੀ ਹੈਡਿੰਗ ਤੱਕ ਸਭ ਕੁਝ ਸੰਭਾਲਦਾ ਹੈ। ਬਾਡੀ ਕਾਪੀ ਲਈ 400 ਦਾ ਵਜ਼ਨ ਡਿਫੌਲਟ ਹੈ, ਹਾਈਲਾਈਟ ਕੀਤੇ ਐਲੀਮੈਂਟਸ ਅਤੇ ਬਟਨ ਲੇਬਲਾਂ ਲਈ 500, ਅਤੇ ਮਹੱਤਵਪੂਰਨ UI ਲੇਬਲਾਂ ਲਈ 600 ਰਾਖਵਾਂ ਹੈ। 1.5 ਦੀ ਲਾਈਨ ਉਚਾਈ ਵਾਲਾ 16px ਸਭ ਤੋਂ ਵੱਧ ਅਕਸਰ ਆਉਣ ਵਾਲਾ ਸਿੰਗਲ-ਸਟੈਪ ਆਕਾਰ (1220 ਘਟਨਾਵਾਂ) ਹੈ, ਜੋ ਪੁਸ਼ਟੀ ਕਰਦਾ ਹੈ ਕਿ 16px ਕੈਨੋਨੀਕਲ ਬਾਡੀ ਕਾਪੀ ਆਕਾਰ ਹੈ।
• Geist Mono — ਬਦਲ: JetBrains Mono or IBM Plex Mono · ਰੂਪਰੇਖਾ 400, 500 · ਕੋਡ ਸਨਿੱਪਟ, ਤਕਨੀਕੀ ਮੈਟਾਡੇਟਾ, ਅਤੇ ਏਮਬੈਡਡ ਮੋਨੋਸਪੇਸਡ ਟੋਕਨ 12–14px 'ਤੇ ਕੋਡ ਬਲਾਕਾਂ ਵਿੱਚ ਅਤੇ 24px 'ਤੇ ਵੱਡੇ ਕੋਡ ਡਿਸਪਲੇ ਐਲੀਮੈਂਟਸ ਵਿੱਚ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। ਇਹ ਡਬ ਦੀ ਉਤਪਾਦ ਸਥਿਤੀ ਦੇ ਅਨੁਸਾਰ, ਡਿਵੈਲਪਰ ਟੂਲ ਦੀ ਭਰੋਸੇਯੋਗਤਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ।

ਅੰਤਰਾਲ ਅਤੇ ਰੂਪ

ਮਿਲਦੇ-ਜੁਲਦੇ ਸਟਾਈਲ

• Mollie — ਇੱਕ ਕਸ਼ਮੀਰੀ ਕਾਊਂਟਰ, ਇੱਕ ਗੂੜ੍ਹਾ ਲੇਜ਼ਰ। ਕਾਲੇ ਟੈਕਸਟ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਸੰਪਾਦਕੀ ਡਿਜ਼ਾਈਨ ਲਈ ਕਾਫ਼ੀ ਖਾਲੀ ਥਾਂ ਛੱਡੋ, ਫਿਰ ਗਰਮ ਕਰੀਮਾਂ, ਐਸਪ੍ਰੈਸੋ ਬ੍ਰਾਊਨ, ਅਤੇ ਅਸਲ ਭੁਗਤਾਨ ਵਿਧੀਆਂ ਦੀਆਂ ਸਪਰਸ਼ ਫੋਟੋਆਂ ਨਾਲ ਉਤਪਾਦ ਨਾਲ ਸਬੰਧਤ ਬਿੰਦੂਆਂ ਨੂੰ ਮਜ਼ਬੂਤ ਕਰੋ।
• Kagi — ਇੱਕ ਵੱਖਰਾ ਪੜ੍ਹਨ ਵਾਲਾ ਕਮਰਾ। ਗੂੜ੍ਹੇ ਗ੍ਰੇਫਾਈਟ ਟੈਕਸਟ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਇੱਕ ਖੁੱਲ੍ਹੀ ਚਿੱਟੀ ਜਗ੍ਹਾ ਬਣਾਓ, ਸ਼ਾਂਤਤਾ ਨੂੰ ਤੋੜਨ ਲਈ ਸੂਖਮ ਜਾਮਨੀ ਲਹਿਜ਼ੇ ਅਤੇ ਗਰਮ ਪੇਸਟਲ ਸਤਹਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
• Milanote — ਮਿਲਾਨੋਟ ਇੱਕ ਸਮਰਪਿਤ ਰਚਨਾਤਮਕ ਸਟੂਡੀਓ ਹੈ। ਫਲੋਟਿੰਗ ਵਿਜ਼ੂਅਲ ਬੋਰਡਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੰਪਾਦਕੀ ਗੈਲਰੀ-ਸ਼ੈਲੀ ਦੇ ਪੰਨੇ ਬਣਾਓ: ਗੂੜ੍ਹੇ ਫਰੇਮ ਵਾਲੀਆਂ ਕੰਧਾਂ, ਚਿੱਟੀ ਡਿਸਪਲੇ ਸਪੇਸ, ਅਤੇ ਸਕ੍ਰੀਨਸ਼ਾਟ ਜੋ ਨਰਮ ਡੂੰਘਾਈ ਨਾਲ ਅਸਲੀ ਵਸਤੂਆਂ ਵਰਗੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ।
• Co2 — ਸਰਦੀਆਂ ਦੀ ਰੌਸ਼ਨੀ ਵਿੱਚ ਇੱਕ ਜਲਵਾਯੂ ਐਟਲਸ। ਇੱਕ ਏਰੀਅਲ ਦਸਤਾਵੇਜ਼ ਲੈਂਡਸਕੇਪ ਵਰਗੇ ਪੰਨੇ ਬਣਾਓ, ਜਿੱਥੇ ਸੇਰੀਫ ਸਿਰਲੇਖ, ਸ਼੍ਰੇਣੀ-ਕੋਡ ਕੀਤਾ ਡੇਟਾ, ਅਤੇ ਬਰਫੀਲੇ ਚਿੱਤਰ ਚੌੜੇ ਚਿੱਟੇ ਹਾਸ਼ੀਏ ਨੂੰ ਉਜਾਗਰ ਕਰਦੇ ਹਨ।
• GitButler — ਟੈਕਸਟ ਦੇ ਅੰਤ ਵਿੱਚ ਫਿਰੋਜ਼ੀ। ਸੂਖਮ ਤਕਨੀਕੀ ਗਰਿੱਡਾਂ, ਗਰਮ ਗ੍ਰੇਫਾਈਟ ਸਤਹਾਂ, ਅਤੇ ਇੱਕ ਸਮਝਦਾਰ ਫਿਰੋਜ਼ੀ ਲਹਿਜ਼ੇ ਦੇ ਨਾਲ ਉੱਚ-ਕੰਟਰਾਸਟ ਸੇਰੀਫ ਸੁਰਖੀਆਂ ਦਾ ਸੁਮੇਲ।
• ElevenLabs — ਨਿੱਘੇ ਕਰੀਮ ਰੰਗਾਂ ਵਿੱਚ ਇੱਕ ਫੋਟੋ ਲੇਖ ਜਿਸ ਵਿੱਚ ਸੂਖਮ ਸੁਰਖੀਆਂ ਹਨ। ਇੱਕ ਬੌਹੌਸ-ਸ਼ੈਲੀ ਦੀ ਨੋਟਬੁੱਕ—ਅੰਡੇ ਦੇ ਰੰਗ ਦਾ ਕਾਗਜ਼, ਕਾਲੀ ਸਿਆਹੀ, ਅਤੇ ਉਤਪਾਦ ਪ੍ਰਦਰਸ਼ਨੀ ਲਈ ਇੱਕ ਸਿੰਗਲ ਜਾਮਨੀ ਅਤੇ ਸੰਤਰੀ ਲਹਿਜ਼ਾ।
• Awesomic — ਸੰਪਾਦਕੀ ਜ਼ਿੰਕ ਜਾਲ ਜਿਸ ਵਿੱਚ ਸੰਤਰੀ ਵਿਰਾਮ ਚਿੰਨ੍ਹ ਹਨ ਜੋ ਕੰਫੇਟੀ ਦੀ ਯਾਦ ਦਿਵਾਉਂਦੇ ਹਨ
• Monad — ਗਰਮ ਚਮਚੇ 'ਤੇ ਸੰਪਾਦਕੀ ਤਕਨੀਕੀ ਜਰਨਲ
• Seline Analytics — ਗਰਮ ਕਾਗਜ਼ 'ਤੇ ਇੱਕ ਸ਼ਾਂਤ ਵਿਸ਼ਲੇਸ਼ਣਾਤਮਕ ਮੇਜ਼
• Notion — ਦੁਪਹਿਰ ਦੀ ਧੁੱਪ ਵਿੱਚ ਇੱਕ ਗਰਮ ਕਾਗਜ਼ ਦੀ ਨੋਟਬੁੱਕ
• Anthropic — ਗਰਮ ਵੇਲਮ 'ਤੇ ਇੱਕ ਵਿਗਿਆਨਕ ਫੀਲਡ ਜਰਨਲ—ਸ਼ਾਂਤ ਹਾਥੀ ਦੰਦ ਦੀਆਂ ਸਤਹਾਂ, ਸੇਰੀਫਡ ਸੰਪਾਦਕੀ ਸਿਰਲੇਖ, ਅਤੇ ਇੱਕ ਸਿੰਗਲ ਮਿੱਟੀ ਦਾ ਲਹਿਜ਼ਾ ਜੋ ਸਿਰਫ਼ ਉਦੋਂ ਹੀ ਪ੍ਰਗਟ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਕਾਰਵਾਈ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
• Calendly — ਠੰਡੇ ਸੰਗਮਰਮਰ ਉੱਤੇ ਗੂੜ੍ਹੀ ਨੀਲੀ ਸਿਆਹੀ

ਸ਼੍ਰੇਣੀ ਅਨੁਸਾਰ ਸ਼ੈਲੀਆਂ ਦਾ ਕੈਟਾਲਾਗ