Ölika Design System

Get DESIGN.md Download View template Works with

Ölika is a loud, poster-like agency site on plain white. Every word is uppercase Gantari Bold, often with wide tracking, and each section takes one flat signal colour: red for the nav and hero, blue for services, violet for testimonials, green for the marquee, yellow for the showreel. Colour is drawn as 2px outlines, outlined letters and pill buttons rather than big filled areas.

Four signatures make it recognisable:

The boxed red nav. The nav is drawn as two 2px red outlined boxes inside the 1200px container: a logo box (ÖLIKA, tracked) on the left and a wide box on the right holding HOME ABOUT NEWS CONTACT and a red BUY ÖLIKA pill.
Solid, outline, solid hero. ÖLIKA / DIGITAL / STUDIO at 173px (12vw) in red, the middle line in white with a thin red outline, each line indented a little further right, with a red asterisk-and-line mark at the right edge.
One colour per section. A section's title, borders, icons, text and button all take the same colour (blue WHAT WE LOVE TO DO, violet WHAT THEY THINK), on white.
Tracked uppercase everywhere. Even paragraphs are uppercase and bold (the blue service descriptions), with 1–5px letter spacing on labels and display lines.

Ölika is a light-only design.

Colors

Surfaces

canvas#FFFFFF

Page background, cards, testimonial cards

surface-1#FFFFFF

Same as canvas

inverse-canvas#000000

Heading wipe block, the round UP button

Ink

on-primary#FFFFFF

Text on primary

on-primary-hover#000000

Text on primary-hover

on-accent#FFFFFF

Text on accent

on-secondary#FFFFFF

on-violet#FFFFFF

on-yellow#000000

Text on yellow

ink#000000

Base text, tags, section titles, the .button

ink-muted#000000

Base paragraphs (p) are full black, the same as ink; many sections recolour them

ink-strong#020A0C

.navigation-line link colour in the CSS

on-media#FFFFFF

inverse-ink#FFFFFF

Text on inverse-canvas

Action

primary#000000

.button (VIEW ALL WORK, SEND MESSAGE)

primary-hover#FFFFFF

.button:hover: background goes transparent, text black, the 2px black border stays

accent#FE0000

Hero, nav boxes and links, BUY ÖLIKA pill, link underline overlay

accent-soft#FE0000 · 20%

1px base line under nav links

secondary#4353FF

Services: title, 2px box borders, icons, paragraphs, the outline BOOK A FREE KICK-OFF CALL! button, hatch lines

Lines & effects

violet#8338EC

Testimonials: title, 2px card borders, stars, quotes; the VIEW ALL POST pill (35 text uses, the most common colour)

green#1AA333

The marquee: text and 5px side borders; fills green on hover

yellow#FFEF43

The SHOW REEL 2023© pill

line#000000

1px tag borders, 2px rule under section headers

scrim#000000 · 30%

Bottom gradient on blog cards (transparent 64% → #0000004D)

Typography

Gantari · display-hero

The quick brown fox jumps

ÖLIKA in red (.hero-display, 12vw). 173px · 700 · 0.9 · 5px

Gantari · headline-lg

The quick brown fox jumps

OUR WORK, WHAT WE LOVE TO DO, WHAT THEY THINK, NEWS. 65px · 700 · 1

Gantari · title-md

The quick brown fox jumps

Project names (DIGI TEMPLATE), clipped to 30px for the roll. 20px · 700 · 1.5 · 1px

Gantari · label-client

The quick brown fox jumps

Small centred headers like OUR LOVELY CLIENT. 17px · 700 · 1.18

Gantari · body

The quick brown fox jumps

Paragraphs and quotes (CSS p is 600; rendered copy measures 700). 16px · 700 · 1.2

Gantari · caption

The quick brown fox jumps

Names, roles, footer links. 14px · 600 · 1.5

Spacing & shape

Purpose	Value
Container	.container max 1200px, centred; the nav uses the same width
Section rhythm	.section is 100px top and bottom with 5% sides (72px at 1440px); the work section closes with 50px
Section header	a 2-column grid (2fr 1fr, 16px gap) with a 2px black bottom border and 30px bottom padding: title left, button right
Breakpoints	991px, 767px and 479px, plus a min-width: 768px set

Spacing scale

Token	Value	Preview
`hair`	1px
`xs`	7px
`sm`	16px
`md`	20px
`lg`	30px
`xl`	40px
`2xl`	50px

Layout spacing

Token	Value	Preview
`rule`	2px
`nav-y`	30px
`section-tight`	50px
`hero-top`	75px
`section`	100px

Border radius

sm10px

showreel30px

tag40px

pill50px

full9999px

Motion

Heading wipe	Black .heading-overlay slides from x −100% across the heading and off
Button text roll	Label y 0% → −100%, copy 100% → 0%, 300ms ease, in a 22px clipped box
Link underline	Size 0 → 100%, 300ms ease and 500ms
Fade-up	opacity 0 → 1, move y 50px → 0, 500ms; page load 1000ms outQuart
Mouse parallax	Decorations move ±10px and ±5px with the mouse, 500ms
Rotate	Rotate, 400ms ease
Skew settle	skew x −15° → 0°, 500ms ease
Icon hover	scale 1 → 1.1, 100ms ease
Marquee and testimonial track	Move sideways while in view
Colour hover	transition: all .2s on buttons and the marquee

Do’s and don’ts

Set everything uppercase in Gantari 700, with 1px tracking on buttons and tags and 2px on nav and display lines.
Give each section one signal colour (#FE0000, #4353FF, #8338EC, #1AA333 or #FFEF43) and use it for the title, borders, icons and button.
Draw boxes with 2px coloured outlines on white instead of filled panels.
Use 50px pills for buttons and 40px outlined pills for tags.
Alternate solid and outlined display lines in big headlines.
Reveal section titles with the black wipe.
Use red text below 15px bold; #FE0000 on white is about 4.0:1. Keep white-on-red pills at 15px bold with 1px tracking.
Use green text below display size; #1AA333 on white is about 3.3:1.
Fill large areas with the signal colours or mix two signal colours in one block.
Round images or boxes; only pills, avatars and the UP button are round.
Add shadows or gradients (except the blog-card bottom gradient).
Use sentence case or light weights.

Example prompt

Any page in the Ölika style

Prompt

Build your page in the Ölika style. White #FFFFFF page, Gantari weight 700, all text uppercase. Nav: two 2px #FE0000 outlined boxes inside a 1200px container, logo left, 15px red links with 2px tracking and a red pill button right. Hero: three lines at 12vw (173px at 1440) in #FE0000, the first at line height 0.9 with 5px tracking, the other two at line height 1.0 with 2px tracking, the middle line white with a thin red outline, each line indented further right. Sections: 100px top and bottom, 5% sides; 65px titles revealed by a black block wiping across. Give each section one colour (#4353FF, #8338EC, #1AA333, #FFEF43) for its borders, icons, text and pill button. Buttons: 50px pills, 12px 30px padding, 15px with 1px tracking. Cards and images are square with 2px coloured outlines. No shadows.

# Ölika Design System

> Measured from the Ölika template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Ölika is a loud, poster-like agency site on plain white.
Every word is uppercase Gantari Bold, often with wide
tracking, and each section takes one flat signal colour:
red for the nav and hero, blue for services, violet for
testimonials, green for the marquee, yellow for the

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background, cards,… |
| surface-1    | #FFFFFF     | Same as canvas           |
| inverse-can… | #000000     | Heading wipe block, the… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-primary-… | #000000     | Text on primary-hover    |
| on-accent    | #FFFFFF     | Text on accent           |
| on-secondary | #FFFFFF     |                          |
| on-violet    | #FFFFFF     |                          |
| on-yellow    | #000000     | Text on yellow           |
| ink          | #000000     | Base text, tags, sectio… |
| ink-muted    | #000000     | Base paragraphs (p) are… |
| ink-strong   | #020A0C     | .navigation-line link c… |
| on-media     | #FFFFFF     |                          |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |

## Typography

- display-hero: Gantari 173px / 700
- display-outline: Gantari 173px / 700
- display-marquee: Gantari 101px / 700
- headline-lg: Gantari 65px / 700

{
  "$description": "Ölika design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#000000",
      "$description": ".button (VIEW ALL WORK, SEND MESSAGE)"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": ".button:hover: background goes transparent, text black, the 2px black border stays"
    },
    "on-primary-hover": {
      "$type": "color",
      "$value": "#000000",
      "$description": "Text on primary-hover"
    },
    "accent": {
      "$type": "color",
      "$value": "#FE0000",
      "$description": "Hero, nav boxes and links, BUY ÖLIKA pill, link underline overlay"
    },
    "on-accent": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on accent"
    },
    "accent-soft": {
      "$type": "color",
      "$value": "#FE000033",
      "$description": "1px base line under nav links"
    },
    "secondary": {
      "$type": "color",
      "$value": "#4353FF",
      "$description": "Services: title, 2px box borders, icons, paragraphs, the outline BOOK A FREE KICK-OFF CALL! button, hatch lines"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF"

/* Ölika theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-sm, p-lg */

@theme {
  /* Colors */
  --color-primary: #000000;
  --color-on-primary: #FFFFFF;
  --color-primary-hover: #FFFFFF;
  --color-on-primary-hover: #000000;
  --color-accent: #FE0000;
  --color-on-accent: #FFFFFF;
  --color-accent-soft: #FE000033;
  --color-secondary: #4353FF;
  --color-on-secondary: #FFFFFF;
  --color-violet: #8338EC;
  --color-on-violet: #FFFFFF;
  --color-green: #1AA333;
  --color-yellow: #FFEF43;
  --color-on-yellow: #000000;
  --color-canvas: #FFFFFF;
  --color-surface-1: #FFFFFF;
  --color-ink: #000000;
  --color-ink-muted: #000000;
  --color-ink-strong: #020A0C;
  --color-line: #000000;
  --color-on-media: #FFFFFF;
  --color-scrim: #0000004D;
  --color-inverse-canvas: #000000;
  --color-inverse-ink: #FFFFFF;

  /* Fonts */
  --font-sans: "Gantari", sans-serif;
  --font-gantari: "Gantari", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 173px;
  --text-display-hero--line-height: 0.9;
  --text-display-hero--letter-spacing: 5px;
  --text-display-hero--font-weight: 700;
  --text-display-outline: 173px;
  --text-display-outline--line-height: 1;
  --text-display-outline--letter-spacing: 2px;
  --text-display-outline--font-weight: 700;
  --text-display-marquee: 101px;
  --text-display-marquee--line-height: 1.1;

/* Ölika design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #000000; /* .button (VIEW ALL WORK, SEND MESSAGE) */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-primary-hover: #FFFFFF; /* .button:hover: background goes transparent, text black, the 2px black border stays */
  --color-on-primary-hover: #000000; /* Text on primary-hover */
  --color-accent: #FE0000; /* Hero, nav boxes and links, BUY ÖLIKA pill, link underline overlay */
  --color-on-accent: #FFFFFF; /* Text on accent */
  --color-accent-soft: #FE000033; /* 1px base line under nav links */
  --color-secondary: #4353FF; /* Services: title, 2px box borders, icons, paragraphs, the outline BOOK A FREE KICK-OFF CALL! button, hatch lines */
  --color-on-secondary: #FFFFFF;
  --color-violet: #8338EC; /* Testimonials: title, 2px card borders, stars, quotes; the VIEW ALL POST pill (35 text uses, the most common colour) */
  --color-on-violet: #FFFFFF;
  --color-green: #1AA333; /* The marquee: text and 5px side borders; fills green on hover */
  --color-yellow: #FFEF43; /* The SHOW REEL 2023© pill */
  --color-on-yellow: #000000; /* Text on yellow */
  --color-canvas: #FFFFFF; /* Page background, cards, testimonial cards */
  --color-surface-1: #FFFFFF; /* Same as canvas */
  --color-ink: #000000; /* Base text, tags, section titles, the .button */
  --color-ink-muted: #000000; /* Base paragraphs (p) are full black, the same as ink; many sections recolour them */
  --color-ink-strong: #020A0C; /* .navigation-line link colour in the CSS */
  --color-line: #000000; /* 1px tag borders, 2px rule under section headers */
  --color-on-media: #FFFFFF;
  --color-scrim: #0000004D; /* Bottom gradient on blog cards (transparent 64% → #0000004D) */
  --color-inverse-canvas: #000000; /* Heading wipe block, the round UP button */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */

  /* Fonts */
  --font-gantari: "Gantari", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 173px;
  --text-display-hero-font: var(--font-gantari);
  --text-display-hero-weight: 700;
  --text-display-hero-line-height: 0.9;
  --text-display-hero-tracking: 5px;
  --text-display-outline: 173px;
  --text-display-outline-font: var(--font-gantari);
  --text-display-outline-weight: 700;
  --text-display-outline-line-height: 1;
  --text-display-outline-tracking: 2px;
  --text-display-marquee: 101px;
  --text-display-marquee-font: var(--font-gantari);

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Agency design systems, the same colors first.

Browse all 398

Bring any of them to your AI tool

All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.

Get All Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Gantari · display-hero

Gantari · headline-lg

Gantari · title-md

Gantari · label-client

Gantari · body

Gantari · caption

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Ölika style

More design systems like this

Altrum

Jore

Agencā

AgencQ

Bring any of them to your AI tool