---
title: "Flayks design system"
variant: extended
source: https://flayks.com/
captured_at: 2026-10-12
theme: dark
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/flayks-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Flayks · Design System

> Oversized type, vivid work, and a deep green canvas.

**Theme:** dark · **Industry:** portfolio · **Source:** https://flayks.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Flayks presents a designer’s portfolio through oversized typography, a continuous forest-green canvas, and a carefully paced stream of selected projects. Coral headlines and vivid project media give the page a bold editorial character without sacrificing clear project descriptions and links.

## North star

Let oversized coral typography command the deep green canvas, while project media remains the page’s changing visual counterpoint.

## Overview

The page is built around a nearly uninterrupted deep green field (#00381c), which makes the coral display lettering (#ff8370) the immediate focal point. Warm peach (#ffe0ce) carries most utility and descriptive text, while lavender (#d1adff) highlights select navigation and calls to explore. Mango Grotesque supplies very large, tightly composed uppercase display headlines; Nohemi handles small uppercase labels, navigation, and copy. The layout treats the opening typography almost as a poster, with oversized words extending across the viewport and project imagery layered into the composition. Below, a spacious sequence of portfolio entries alternates broad media previews with compact dark information panels, preserving a consistent rhythm rather than using a dense conventional grid. Project imagery brings its own varied colors, so keep those hues within the media rather than promoting them to global interface colors. Thin warm borders, restrained rounded corners, and subtle shadows separate interactive elements from the otherwise flat canvas.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Coral | `#ff8370` | `--color-signal-coral` | accent | Primary display lettering, selected section text, and outlined project visit buttons. |
| Warm Parchment | `#ffe0ce` | `--color-warm-parchment` | brand | Main body copy, location labels, project descriptions, and some light card surfaces. |
| Soft Charcoal | `#272221` | `--color-soft-charcoal` | neutral | Dark media and project-card content surfaces; occasionally appears within embedded project visuals. |
| Forest Canvas | `#00381c` | `--color-forest-canvas` | brand | Continuous main page background and the defining color behind the hero and portfolio sections. |
| Muted Umber | `#6e615a` | `--color-muted-umber` | semantic | Measured hairline and card-border color, providing subtle definition against dark surfaces. |
| Slate Panel | `#2c2f34` | `--color-slate-panel` | surface | Dark embedded media and video-card surface, distinct from the green page canvas. |
| Deep Violet | `#2d0458` | `--color-deep-violet` | surface | Project-card or embedded artwork color; keep confined to project media rather than the global page UI. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Small badges and dark embedded card details, not a dominant page background. |
| Stone Gray | `#c3bfbc` | `--color-stone-gray` | surface | Light project-card or embedded media surface; not a recurring global section color. |
| Dusty Lilac | `#977eac` | `--color-dusty-lilac` | accent | A secondary accent seen inside selected project cards and embedded artwork. |
| Ink Teal | `#002a3b` | `--color-ink-teal` | surface | Color found in individual project imagery; treat it as media content rather than interface chrome. |
| Electric Indigo | `#1e1779` | `--color-electric-indigo` | surface | Deep blue section or project artwork, including the prominent studio feature treatment. |
| Lilac Signal | `#d1adff` | `--color-lilac-signal` | accent | Selected navigation, prominent links, and the oversized skills-and-services headline. |

### Semantic aliases

`--color-canvas` → `#272221` (Soft Charcoal) · `--color-surface` → `#00381c` (Forest Canvas) · `--color-surface-2` → `#2c2f34` (Slate Panel) · `--color-surface-3` → `#000000` (Pure Black) · `--color-surface-4` → `#c3bfbc` (Stone Gray) · `--color-text` → `#ffe0ce` (Warm Parchment) · `--color-border` → `#6e615a` (Muted Umber) · `--color-accent` → `#ff8370` (Signal Coral) · `--color-accent-2` → `#977eac` (Dusty Lilac) · `--color-accent-3` → `#d1adff` (Lilac Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffe0ce` | `#272221` | 12.57:1 | AAA |
| `#ffe0ce` | `#00381c` | 10.62:1 | AAA |
| `#ffe0ce` | `#2c2f34` | 10.75:1 | AAA |
| `#ffe0ce` | `#000000` | 16.81:1 | AAA |
| `#ff8370` | `#272221` | 6.53:1 | AA |
| `#ff8370` | `#00381c` | 5.52:1 | AA |
| `#ff8370` | `#2c2f34` | 5.59:1 | AA |
| `#ff8370` | `#000000` | 8.73:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Nohemi | `--font-body` | webfont | 400, 600 | Body copy, navigation, location labels, project details, and links. | Space Grotesk |
| Mango Grotesque | `--font-display` | webfont | 700, 500 | Hero and section display headlines, project headings, and large outlined CTA text. | Bebas Neue |

- **Nohemi:** Mostly regular weight, small uppercase text with noticeably open tracking; use mixed case for select promotional links.
- **Mango Grotesque:** Bold or medium display weights, uppercase, exceptionally large scale, and compact line spacing.

### Type scale — Custom (ratio ≈ 2.059, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 518.5px | 700 | 1 | 0 | uppercase | Mango Grotesque | Monumental uppercase lettering framing the opening and oversized section moments. |
| h1 | 93.5px | 700 | 0.85 | 0.015em | uppercase | Mango Grotesque | Primary portfolio and section headlines, set in large uppercase display type. |
| h2 | 48px | 700 | 1 | 0.02em | uppercase | Mango Grotesque | Project names and major portfolio section headings. |
| h3 | 40px | 500 | 0.85 | 0.025em | uppercase | Mango Grotesque | Secondary project titles or prominent short statements. |
| h4 | 32px | 700 | 0.85 | 0.025em | uppercase | Mango Grotesque | Compact project-card headings and small emphatic labels. |
| body | 14px | 400 | 1.35 | 0.1em | uppercase | Nohemi | Uppercase designer introduction, project descriptions, and supporting copy. |
| caption | 13.5px | 400 | normal | 0 | — | Arial | Small media captions, project identifiers, and secondary notes. |
| link | 14px | 400 | 1.35 | 0.1em | uppercase | Nohemi | Uppercase utility links and project actions; selected discovery link uses lavender. |
| eyebrow | 14px | 400 | 1.35 | 0.1em | uppercase | Nohemi | Small uppercase location, availability, and section-context labels. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 3, 4, 6, 8, 10, 14, 16, 20, 29, 36, 48, 58, 64, 72, 79 px.
- Section rhythm 72px · element gap 48px · card padding — · max content width 1090px.

The opening uses expansive poster-like typography arranged across the viewport, with media layered into the letterforms and small utility labels near the edges. A measured max width of 1090px anchors the content while project showcases create broad media-and-description pairings. The page remains spacious, with a measured 72px section gap and 48px element gap. Project order is vertical and consistent, with varied column counts inside media groups; oversized headings and irregular alignment keep the sequence from feeling like a standard card grid.

## Shape & elevation

- Radius: button `6px` · card `10px` · media `10px` · badge `50%` · nav `50%` · xs `6px` · sm `10px` · pill `9999px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.01) 0px 62px 25px 0px, rgba(0, 0, 0, 0.05) 0px 35px 21px 0px, rgba(0, 0, 0, 0.09) 0px 16px 16px 0px, rgba(0, 0, 0, 0.1) 0px 4px 9px 0px`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0.2) 0px 0px 112px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.1) 4px -4px 12px 0px`
- Shadow `inset` (card): `color(srgb 1 0.878431 0.807843 / 0.33) 0px 0px 0px 1px inset`
- Shadow `xl-3` (media): `rgba(0, 0, 0, 0.01) 21px 44px 20px 0px, rgba(0, 0, 0, 0.05) 12px 25px 17px 0px, rgba(0, 0, 0, 0.09) 5px 11px 12px 0px, rgba(0, 0, 0, 0.1) 1px 3px 7px 0px`
- Shadow `inset-2` (other): `rgb(209, 173, 255) 0px 0px 0px 5.79813px inset`
- Motion: standard transition `0.2s ease` on interactive elements.

The green page field stays largely flat, while media and project cards receive restrained separation through soft shadows and rounded corners. Thin warm-brown borders outline some interactive buttons and card edges. Selected media or card treatments use inset highlights; avoid turning the whole interface into a stack of elevated panels.

## Imagery

Project previews mix website screenshots, video frames, photography, motion, and occasional illustration. Media appears as wide rounded rectangles with the original project’s colors intact, including vivid purples, blues, and warm photographic tones. The opening uses layered portfolio mockups as a collage over the headline. Keep imagery richly visible and framed as project work rather than applying a uniform tint or filter.

## Components

### Poster-like hero

Oversized coral uppercase display words dominate a full green canvas, with portfolio imagery layered across the typography and tiny utility labels at the edges.

### Project media preview

Broad, rounded project screenshots or video frames retain their own source colors and sit beside compact descriptions and controls.

### Project information panel

Dark charcoal content surface pairs a large uppercase project title with concise uppercase copy and an outlined coral visit button.

### Outlined project CTA

Transparent background, coral text and 1px coral border, 6px radius, uppercase Mango Grotesque styling.

### Utility navigation

Small uppercase Nohemi links in peach or lavender, kept visually quiet against the continuous green background.

### Studio feature block

Large blue-toned media area pairs an embedded studio image with compact supporting copy and an outlined action.

### Skills display

Oversized lilac uppercase Mango Grotesque heading stretches across the page as a strong closing section treatment.

### Measured component styles

- **Primary button** (“VISIT WEBSITE”): transparent background · text #ff8370 · border 1px solid #ff8370 · radius 6px · padding 6px 16px 0px 16px · 700 32.004px Mango Grotesque · uppercase
- **Link** (“CURRENTLY IN TOULOUSE, FR (CET)”): transparent background · text #ffe0ce · radius 0px · padding 0px · 400 14.004px Nohemi · uppercase
- **Card** (“0:00”): background #2c2f34 · text #ffe0ce · radius 10px · padding 0px · 400 18px Nohemi · shadow rgba(0, 0, 0, 0.01) 0px 62px 25px 0px, rgba(0, 0, 0, 0.05) 0px 35px 21px 0px, rg
- **Badge** (“1”): background #547057 · text #000000 · radius 100% · padding 0px · 400 13.3333px Arial
- **Navigation item** (“INTRO”): transparent background · text #d1adff · radius 0px · padding 0px · 400 14.004px Nohemi · uppercase

## Do

- Use #00381c as the dominant uninterrupted page canvas.
- Set the biggest headlines in uppercase Mango Grotesque or a close condensed substitute.
- Use #ff8370 for display type and the outlined project CTA.
- Reserve #ffe0ce for legible supporting text and utility labels.
- Let project media keep its own vivid color palette.
- Keep small navigation and copy visually secondary to the typography.
- Use spacious section rhythm and restrained card elevation.

## Don't

- Do not replace the green canvas with a generic black theme.
- Do not use lavender as the primary headline color across the page.
- Do not normalize the hero into a conventional centered banner.
- Do not apply one global color filter to all project previews.
- Do not fill the page with uniformly elevated cards.
- Do not use small, tightly packed body text.
- Do not introduce extra palette colors as recurring UI colors.

## Agent prompt

Build a new portfolio page in the Flayks visual style. Use Forest Canvas (#00381c) as the continuous background, Signal Coral (#ff8370) for oversized uppercase display typography and outlined actions, and Warm Parchment (#ffe0ce) for readable supporting copy. Use Lilac Signal (#d1adff) sparingly for selected links or a standout section title. Pair a condensed, bold display face with a clean sans-serif for small uppercase labels. Compose the hero like a typographic poster, layering project media across the words rather than centering a standard banner. Follow with spacious, vertically paced project showcases pairing wide rounded media previews with concise dark information panels. Preserve the distinct color and texture of each project’s imagery. Keep borders fine, shadows soft, and the overall canvas visually flat.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed green canvas with oversized display lettering and layered project mockups. | location and availability labels, contact link | giant coral typography, media collage, edge-aligned utility text |
| 2 | gallery | Continues the oversized title, with several portfolio visuals set into the composition. | visual portfolio preview | multi-column media, oversized headline fragments |
| 3 | hero | Single-column oversized display type with wide spacing on the green canvas. | scroll-led introduction | coral display lettering, open composition |
| 4 | content-feed | Two-column introduction with concise biography and large display text. | designer introduction, scroll-led narrative | asymmetric columns, oversized typography |
| 5 | product-showcase | Wide media preview paired with a project information panel and controls. | project carousel indicators, visit website action | rounded media, dark project panel, outlined coral button |
| 6 | product-showcase | Broad project media paired with a narrow information column. | project carousel indicators, external project link | rounded video preview, dark text panel |
| 7 | product-showcase | Large media-led showcase alongside compact project details. | project carousel indicators, visit website action | dark media, vivid artwork, project panel |
| 8 | product-showcase | Wide immersive media with adjacent title and project summary. | project carousel indicators, project exploration | nature-led imagery, rounded preview, dark panel |
| 9 | product-showcase | Media-first project presentation with a separate information panel. | project carousel indicators, external project link | craft-focused imagery, rounded preview, outlined action |
| 10 | product-showcase | Wide fashion imagery paired with short project copy. | project carousel indicators, visit website action | photographic media, dark project panel |
| 11 | product-showcase | Broad travel and architecture media beside project details. | project carousel indicators, exploration link | colored media preview, dark information panel |
| 12 | product-showcase | Large music-project preview with a neighboring information panel. | project carousel indicators, project discovery | high-contrast typography in media, rounded preview |
| 13 | product-showcase | Compact media and information pairing within the project sequence. | project indicators, discover project link | blue-violet media, dark project panel |
| 14 | cta | Centered, isolated discovery link with generous green space around it. | external portfolio discovery | lavender link, minimal centered composition |
| 15 | feature-split | Large immersive media area with supporting studio copy and a compact action. | studio introduction, explore studio action | blue-violet background, embedded project image, outlined button |
| 16 | other | Two-column closing section led by an oversized lilac display heading. | skills and services introduction | oversized uppercase type, lavender-on-green contrast |

## Source CSS custom properties (selected)

```css
--base-font-size: 18px;
--gap: 20px;
--dir-fonts: "/fonts";
--ease-quart: cubic-bezier(.165, .84, .44, 1);
--ease-quart-inout: cubic-bezier(.76, 0, .24, 1);
--ease-cubic: cubic-bezier(.33, 1, .68, 1);
--ease-cubic-inout: cubic-bezier(.785, .135, .15, .86);
--ease-expo: cubic-bezier(.16, 1, .3, 1);
--color-primary: #00381c;
--color-secondary: #ff8370;
--color-beige: #ffe0ce;
--color-text: #ffe0ce;
--color-accent: #d1adff;
--color-accent-blue: #55f9ff;
--color-gray-dark: #272221;
--color-border: color-mix(in srgb, #ffe0ce 33%, #0000);
--font-titles: "Mango Grotesque", impact, "Helvetica, arial, sans-serif";
--font-text: "Nohemi", "Helvetica, arial, sans-serif";
--spacing-sm: calc(min(5vw, 104px));
--spacing-md: calc(min(8vw, 140px));
--spacing-lg: calc(min(11vw, 180px));
--spacing-xl: calc(min(14vw, 240px));
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/flayks-com