深色主题设计工具creative studio about page编辑感电影感深色户外超大字体原网页 sanrita.ca ↗ · 2026-10-12 采集 · 1440×900 桌面端
San Rita 的关于页面以壮阔风景摄影搭配超大窄体标题和克制的等宽字体细节。深森林绿承载长篇品牌故事，浅绿文字与结尾的旅行主题行动区形成鲜明对比。
North star · Let one monumental headline and authentic landscape photography define each section, with all supporting UI kept quiet.
The visual strategy sets an adventurous, editorial mood through contrast rather than ornament. Deep Green (#161b13) forms the long, quiet story canvas; the measured gray-green (#84907f) appears in the opening section, while Icy Blue (#dde2e4) and white are supporting light surfaces and muted text tones. Adventure Yellow (#e2ffcc) is the high-visibility accent: it colors the enormous opening headline, navigation button, and small markers over the landscape. F37stout gives the display copy its narrow, forceful silhouette; monospace handles uppercase labels, captions, and compact details. The opening is a full-bleed aerial map image, with small controls overlaid and a huge headline anchored across its lower area. Farther down, the story becomes a sparse dark field with a compact cluster of overlapping documentary photos. The final pale image band returns to oversized type. Generous dark negative space, square-edged elements, and minimal ornament let the imagery and typography carry the page.
Most page text: uppercase body copy, captions, links, and small labels.
Aa 设计
F37stout
网络字体 · 字重 400 · 占比 13%
免费替代：Bebas Neue
Display headlines, including the oversized hero statement and section headings.
角色
示例
字号
字重
行高
字距
特大标题
Monumental uppercase hero headline over the landscape.
San Rita
366px
400
0.9
0
一级标题
Primary page headline in the condensed display face.
San Rita
48px
400
0.9
0
二级标题
Large uppercase story or section headlines.
San Rita
40px
400
0.9
0
正文
Uppercase monospace narrative and supporting copy.
The quick brown fox 敏捷的狐狸
16px
400
1.2
-0.01em
辅助文字
Small uppercase monospace image and origin notes.
The quick brown fox 敏捷的狐狸
12px
400
normal
0
链接
Compact uppercase monospace navigation links.
The quick brown fox 敏捷的狐狸
12px
400
normal
0
代码
Monospace utility text where a code-like treatment is needed.
const style = 1;
16px
400
1.2
-0.01em
间距与布局
基准单位 4px · 密度：适中
50px版块间距
12px元素间距
20px卡片内边距
1392px内容最大宽度
5px
12px
16px
24px
40px
The opening fills the viewport with landscape imagery and places branding and a compact trail control at opposite top corners. Its main headline spans almost the full width near the bottom, balanced by a small origin note. The page then shifts to a very long, sparse Deep Green story canvas with a small photo collage rather than a dense grid. The measured maximum page width is 1392px; comfortable spacing and broad negative space keep each visual moment distinct.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page is predominantly flat: measured shadows are absent, borders are not a defining element, and components have square corners. Create depth through full-bleed photography, a dark gradient fading into the hero base, and the overlap of the story photos. Keep controls crisp and pale against their backgrounds rather than adding card shadows.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Brand mark
Place the expressive pale-green San Rita wordmark at the top-left over the hero photograph.
Trail control
A compact pale-green rectangular control sits at the top-right; pair its uppercase monospace label with a small icon.
Hero headline
Set a very large, uppercase F37stout statement across the lower hero image in #e2ffcc.
Map markers
Use small pale-green outlined markers and a route graphic over the aerial landscape, keeping them subordinate to the headline.
Origin caption
A small uppercase monospace note sits near the lower-right of the hero, with a minimal outlined symbol nearby.
Story photo collage
Overlap a small number of documentary photographs within the otherwise open Deep Green story canvas.
Closing call to action
A pale photographic band combines oversized condensed uppercase copy with a simple lime directional cue.
Imagery · Use cinematic, full-bleed aerial landscape photography as the opening image, with natural terrain colors visible beneath the graphic overlays. Add a small, loosely stacked documentary photo collage within the dark story area. The closing section uses a pale landscape image behind oversized type. Keep imagery photographic and grounded; avoid decorative illustration or polished product renders.
Reserve #e2ffcc for high-contrast headlines and key controls.
Let landscape photography fill the hero.
Set display statements in uppercase condensed type.
Keep supporting labels small, uppercase, and monospace.
Leave generous dark negative space around story imagery.
✕ 不该做
Do not crowd the sparse story section with cards or grids.
Do not introduce unmeasured palette colors as brand UI.
Do not add rounded corners, prominent borders, or shadows.
Do not compete with the hero image using multiple headline blocks.
Do not use decorative illustration in place of documentary photography.
Do not turn small navigation and captions into dominant elements.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new editorial page in San Rita’s visual style. Use Deep Green (#161b13) as the quiet main canvas and Terrain Sage (#84907f) for subdued section surfaces. Start with full-bleed, authentic landscape photography; overlay a single oversized uppercase headline in a condensed display face using Trail Lime (#e2ffcc). Keep navigation compact and monospace, with pale rectangular controls and small map-inspired markers. Use Icy Blue (#dde2e4) and white sparingly for light surfaces or muted copy, and Moss Shadow (#2d3329) for dark supporting cards. Structure the story with broad negative space and a small overlapping photo collage, then finish with a pale image-led CTA and large type. Keep corners square, avoid shadows and ornamental borders, and let photography and typography provide the drama.
