Superlist
Мәрҗән күмерләре белән бизәлгән төнге эш урыны — тыныч баклажан өслеге, анда бер җылы кызгылт сары очкын һәр гамәлне күрсәтә
Superlist төн уртасындагы шәмәхә төсләрдә җитештерүчәнлек телен куллана: тирән баклажан, бердәнбер төп төс буларак җылы мәрҗән һәм бөтен атмосфераны чагылдырган зур санс-сериф башлыклары. Интерфейс төнге игътибарлы эш хисен уята - тыныч, катламлы һәм ышанычлы, төсләр гамәл чакыруларында, актив халәтләрдә һәм төп нокталарда функциональ тыныш билгеләре буларак кына кулланыла. Өслекләр нечкә караңгы төсләрдә шәмәхә төсмерле аскы төс белән катламланган (#181824 → #26253b), тирәнлек стериль түгел, ә җылы тоелсын өчен саф кара төстән кача. Компонентлар киң түгәрәкләнгән формалар (20 пиксельле карточкалар, таблетка төймәләре), йомшак күләгәләр һәм тар рәшәткәләр урынына уңайлы 10-16 пиксель аралар аша "сулыш алу" мөмкинлеген бирә. Башлыкның тавышы барысын да аңлата: 70-88 пиксель зурлыктагы 600 пунктлы авырлык һәм -0.02 ем хәрефләр арасы тыгыз, текстны UI түгел, ә типографик дип карый - ул SaaSка караганда редакция текстына якынрак.
Караңгы бүлекләр битнең бөтен киңлеген колачлый, үзәкләштерелгән, максималь киңлектәге эчтәлек контейнерлары белән. Төп бүлек вертикаль рәвештә үзәкләштерелгән һәм башлык, аскы текст һәм чакыру (CTA) бар, аннан соң киләсе бүлек белән капланган зур продукт скриншоты килә. Киләсе бүлекләр үзәкләштерелгән текст блоклары һәм карточкалар челтәрләре арасында чиратлашып урнашкан. Караулар бүлегендә карау карточкалары һәм 16 суүткәргеч белән өч баганалы челтәр кулланыла. Навигация - сул якта логотип, үзәкләштерелгән сылтамалар һәм уң якта керү гамәлләре булган бер өске панель - билгеләнгән ян панель яки мега-меню юк. Бүлекләр арасындагы суүткәргечләр киң (16 суүткәргеч), тыгыз продукт челтәре урынына киң, редакция ритмын булдыра.
Визуаль киңлектә продукт скриншотлары өстенлек итә - түгәрәкләнгән почмаклы зур рамка, чын кушымта интерфейсын күрсәтә, төп һәм икенчел бүлекләрне тутыра. Фотосурәтләр минималь, алар кулланучы аватарлары яки кушымта эчендәге медианың алдан караулары буларак кына кулланыла (мәсәлән, продукт макетының уң панелендәге концерт рәсеме). Ышаныч панелендәге логотиплар - яссы, тонык ак текст символлары. Декоратив иллюстрацияләр, абстракт графика, 3D рендерлар юк. Визуаль стратегия - продуктны масштабта күрсәтү, типографиягә эмоциональ эш башкарырга рөхсәт итү һәм коралл төсен бердәнбер акцент төсе итеп куллану.
Палитра
Бренд
- Coral Ember
#ff4a36— Кызгылт сары төс декоратив детальләр өчен икенчел акцент һәм сирәк очрый торган ишарәләрне ассызыклау өчен кулланыла. Аны эшкә чакыру өчен төп төс итеп кулланырга ярамый.
Нейтраль
- Aubergine Canvas
#181824— Бит фоны, төп холст, саф кара төсне алыштыра торган җылы, караңгы төсмер, кулланучы интерфейсын яссы түгел, ә катламлы итеп күрсәтә. - Elevated Plum
#26253b— Карточка өслекләре, кертү кырлары, навигация контейнерлары — күренерлек чиксез тирәнлек булдыру холстка караганда бер адым җиңелрәк. - Pure White
#ffffff— Төп исемнәр, төймә тексты һәм иконка контурлары — караңгы полотнода максималь контраст. - Fog Text
#696f81— Төп текст, икенчел исемнәр һәм тонык чикләр барысы да баклажан төсендәге фонда уңайлы уку өчен 7:1 контраст нисбәтенә ия. - Ash Text
#8e8da0— Икенчел UI элементлары, бүлгечләр һәм тавышсыз ярлыклар өчен нейтраль төс кулланыла. Аны гамәл чакырулары өчен төп төс итеп кулланырга ярамый. - Mist Highlight
#a3a3a7— Нечкә чикләр, бүлгечләр һәм актив булмаган навигация элементлары холстка каршы аерылып торган нечкә нейтраль тон тудыра.
Типография
12 дән 88 пиксельгә кадәр · 9 адым
- sans-serif — алыштыру: Inter · контурлар 400 · sans-serif - алынган мәгълүматларда очрый, ләкин ясалма интеллект тарафыннан тасвирланмаган.
- Haffer XH SemiBold — алыштыру: Inter Tight · контурлар 400, 600 · Дисплей һәм башлыклар өчен төп шрифт. Ул 70–88 пиксель зурлыгында, хәрефләр арасындагы ара -0.02em һәм авырлыгы 600 булган герой башлыклары өчен кулланыла. Тар хәреф аралыгы һәм зур хәреф биеклеге башлыкларга редакция авырлыгын бирә, караңгы интерфейсны панельгә караганда журнал тышлыгына охшата. Калын калынлыктагы Inter Tight яки General Sans белән алыштырыгыз.
- Jersey 10 — алыштыру: Anybody · контурлар 400 · Басым саннары һәм аскы сызыклар өчен зур, бизәкле шрифт. Бик зур размерларда типографик басымнар ясау өчен сирәк кулланыла. Аны Anybody яки Cabinet Grotesk белән алыштырырга мөмкин.
Интерваллар һәм форма
| Максат | Мәгънәсе |
|---|---|
| Тыгызлык | уртача |
| Төп адым | 10-16px |
| Төймә радиусы | 100px |
| Карта радиусы | 20px |
| Күләгәләр | йомшак күләгәләр |
| Бүлекләр арасында | 80px |
| Бит киңлеге | 1200px |
Ясалма интеллект сезнең сайтны Superlist стилендә төзер һәм аны тутырыр
- Продуктлар һәм постлар белән Instagram, TikTok, Facebook сылтамасы аша тутырыгыз.
- Иске сайтыгыздан контентны күчерегез — адресны күрсәтегез генә.
- Иң яхшы двигательдә заманча дизайн: сервер рендерингы һәм SEO оптимизациясе белән React ( Next.js).
- Эзләү нәтиҗәләре һәм нейрон челтәр тәкъдимнәре өчен тулысынча автоматик SEO оптимизациясе.
Охшаш стильләр
- DNA — Төн уртасы обсерваториясе, кисәкчәләр линзасы аша күренгәнчә
- Abetterlou — "Ээр өстендә очкыннар" - тирән кофе төсендәге кара фонда балкып торган җылы каймаксыман шрифт, аның янтарь-алтын төсендәге төймәләр биткә басылган кайнар металл кебек тоела.
- Galileo-ft — Зәңгәр электр сигналлары белән тирән космик командалык палубасы
- Decide AI — Төн уртасында обсерватория - ялкау сигналы
- Redis Agency — Редакция остаханәсе эш вакытыннан соң ачык, караңгы урында, анда барлык брендинг эшләре сериф шрифтлары һәм бер генә кызыл редис ярдәмендә башкарыла.
- Spellbook — Мәрҗән карасы белән яктыртылган төнге суд залы — караңгы редакция өслеге, анда бары тик җылы кызгылт сары каләм сызыгы гына ишетелә.
- Linear — төн уртасы төгәллеге коралы
- Origin Financial — Тыныч, муллык белән тулы төн уртасы галереясе. Зур сериф шрифтлары һәм берничә яктыртылган төсле панель финанс әсәренең җентекләп сайланган сәнгать әсәре кебек хис тудыра торган тыныч, диярлек караңгы бүлмә.
- Hyperstudio — Дизайн обсидиан төсенә сызылган. Текст һәм нечкә сызыклар ак буен саф кара төс белән бизәгән, вакыт-вакыт юлны күрсәткән алтын компас билгеләре дә бар.
- Air — "Төн уртасы күк пыяла аша" скульптурасы
- Raycast — Төн уртасы команда үзәге, Корал Неон
- dope.security — Шәмәхә төстәге маяклар белән төнге терминал